如何循环遍历对象数组，并使用lodash检查该对象中的值是否与另一个数组中的项匹配

how to loop through array of objects and check if a value in that object matches an item in another array using lodash

本文关键字：数组 对象 是否 另一个 检查 循环 何循环 遍历 lodash      更新时间：2023-09-26

我有一个项目数组，这些项目是像这样的特色组件:

var featuredIds = ['footerB', 'headerA', 'landingA'];

我也有一个对象数组，看起来像这样:

[{
    "title": "first footer",
    "section": "structure",
    "categoryId": "footer",
    "uId": "footerA"
  },{
    "title": "second footer",
    "section": "structure",
    "categoryId": "footer",
    "uId": "footerB"
  },
  {
    "title": "first header",
    "section": "structure",
    "categoryId": "header",
    "uId": "headerA"
  },
  {
    "title": "first header",
    "section": "structure",
    "categoryId": "header",
    "uId": "headerB"
  },
  {
    "title": "first landing",
    "section": "structure",
    "categoryId": "landing",
    "uId": "landingA"
  },
  {
    "title": "second landing",
    "section": "structure",
    "categoryId": "landing",
    "uId": "landingB"
  },
  {
    "title": "third landing",
    "section": "structure",
    "categoryId": "landing",
    "uId": "landingC"
  },
  {
    "title": "first nav",
    "section": "structure",
    "categoryId": "navigation",
    "uId": "navA"
  },{
    "title": "first footer",
    "section": "components",
    "categoryId": "blog",
      "uId": "blogA"
  },
  {
    "title": "second footer",
    "section": "components",
    "categoryId": "blog",
    "uId": "blogB"
  },
  {
    "title": "first header",
    "section": "components",
    "categoryId": "contact_button",
    "uId": "contact_buttonA"
  },
  {
    "title": "first landing",
    "section": "components",
    "categoryId": "content_bloc",
    "uId": "content_blocA"
  },
  {
    "title": "second landing",
    "section": "components",
    "categoryId": "content_bloc",
    "uId": "content_blocB"
  },
  {
    "title": "third landing",
    "section": "components",
    "categoryId": "content_bloc",
    "uId": "content_blocC"
  },
  {
    "title": "first nav",
    "section": "components",
    "categoryId": "cover",
    "uId": "coverA"
  }]

我想创建一个新的数组，它只包含与我在featureIds数组中提供的featureid相匹配的组件，它看起来像这样:

[{
    "title": "second footer",
    "section": "structure",
    "categoryId": "footer",
    "uId": "footerB"
  },{
    "title": "first header",
    "section": "structure",
    "categoryId": "header",
    "uId": "headerA"
  },
  {
    "title": "first landing",
    "section": "structure",
    "categoryId": "landing",
    "uId": "landingA"
  }]

我考虑过使用_。一些,_。找到和其他一些人，但还没有能够得到我正在寻找的结果。我已经用双for循环写过了，这就是为什么我想用lodash去掉它/学习一些新的东西。

您可以使用lodash的_.keyBy()和_.at()链:

function filterBy(arr, filters) {
  return _(features)
  .keyBy('uId')
  .at(filters)
  .value();
}
var features = [{
  "title": "first footer",
  "section": "structure",
  "categoryId": "footer",
  "uId": "footerA"
}, {
  "title": "second footer",
  "section": "structure",
  "categoryId": "footer",
  "uId": "footerB"
}, {
  "title": "first header",
  "section": "structure",
  "categoryId": "header",
  "uId": "headerA"
}, {
  "title": "first header",
  "section": "structure",
  "categoryId": "header",
  "uId": "headerB"
}, {
  "title": "first landing",
  "section": "structure",
  "categoryId": "landing",
  "uId": "landingA"
}, {
  "title": "second landing",
  "section": "structure",
  "categoryId": "landing",
  "uId": "landingB"
}, {
  "title": "third landing",
  "section": "structure",
  "categoryId": "landing",
  "uId": "landingC"
}, {
  "title": "first nav",
  "section": "structure",
  "categoryId": "navigation",
  "uId": "navA"
}, {
  "title": "first footer",
  "section": "components",
  "categoryId": "blog",
  "uId": "blogA"
}, {
  "title": "second footer",
  "section": "components",
  "categoryId": "blog",
  "uId": "blogB"
}, {
  "title": "first header",
  "section": "components",
  "categoryId": "contact_button",
  "uId": "contact_buttonA"
}, {
  "title": "first landing",
  "section": "components",
  "categoryId": "content_bloc",
  "uId": "content_blocA"
}, {
  "title": "second landing",
  "section": "components",
  "categoryId": "content_bloc",
  "uId": "content_blocB"
}, {
  "title": "third landing",
  "section": "components",
  "categoryId": "content_bloc",
  "uId": "content_blocC"
}, {
  "title": "first nav",
  "section": "components",
  "categoryId": "cover",
  "uId": "coverA"
}];
var featuredIds = ['footerB', 'headerA', 'landingA'];
var result = filterBy(features, featuredIds);
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.6/lodash.min.js"></script>

或者如果您可以使用ES6，则使用Array.prototype.filter()和Set的组合:

const filterBy = (arr, filters) => {
  const filtersSet = new Set(filters);
  
  return arr.filter((item) => filtersSet.has(item.uId));
};
const featuredIds = ['footerB', 'headerA', 'landingA'];
const features = [{
  "title": "first footer",
  "section": "structure",
  "categoryId": "footer",
  "uId": "footerA"
}, {
  "title": "second footer",
  "section": "structure",
  "categoryId": "footer",
  "uId": "footerB"
}, {
  "title": "first header",
  "section": "structure",
  "categoryId": "header",
  "uId": "headerA"
}, {
  "title": "first header",
  "section": "structure",
  "categoryId": "header",
  "uId": "headerB"
}, {
  "title": "first landing",
  "section": "structure",
  "categoryId": "landing",
  "uId": "landingA"
}, {
  "title": "second landing",
  "section": "structure",
  "categoryId": "landing",
  "uId": "landingB"
}, {
  "title": "third landing",
  "section": "structure",
  "categoryId": "landing",
  "uId": "landingC"
}, {
  "title": "first nav",
  "section": "structure",
  "categoryId": "navigation",
  "uId": "navA"
}, {
  "title": "first footer",
  "section": "components",
  "categoryId": "blog",
  "uId": "blogA"
}, {
  "title": "second footer",
  "section": "components",
  "categoryId": "blog",
  "uId": "blogB"
}, {
  "title": "first header",
  "section": "components",
  "categoryId": "contact_button",
  "uId": "contact_buttonA"
}, {
  "title": "first landing",
  "section": "components",
  "categoryId": "content_bloc",
  "uId": "content_blocA"
}, {
  "title": "second landing",
  "section": "components",
  "categoryId": "content_bloc",
  "uId": "content_blocB"
}, {
  "title": "third landing",
  "section": "components",
  "categoryId": "content_bloc",
  "uId": "content_blocC"
}, {
  "title": "first nav",
  "section": "components",
  "categoryId": "cover",
  "uId": "coverA"
}];
const result = filterBy(features, featuredIds);
console.log(result);

另一个lodash选项是_.intersectionWith():

function filterBy(arr, filters) {
  return _.intersectionWith(arr, filters, function(value, filter) {
    return value.uId === filter;
  });
}
var features = [{
  "title": "first footer",
  "section": "structure",
  "categoryId": "footer",
  "uId": "footerA"
}, {
  "title": "second footer",
  "section": "structure",
  "categoryId": "footer",
  "uId": "footerB"
}, {
  "title": "first header",
  "section": "structure",
  "categoryId": "header",
  "uId": "headerA"
}, {
  "title": "first header",
  "section": "structure",
  "categoryId": "header",
  "uId": "headerB"
}, {
  "title": "first landing",
  "section": "structure",
  "categoryId": "landing",
  "uId": "landingA"
}, {
  "title": "second landing",
  "section": "structure",
  "categoryId": "landing",
  "uId": "landingB"
}, {
  "title": "third landing",
  "section": "structure",
  "categoryId": "landing",
  "uId": "landingC"
}, {
  "title": "first nav",
  "section": "structure",
  "categoryId": "navigation",
  "uId": "navA"
}, {
  "title": "first footer",
  "section": "components",
  "categoryId": "blog",
  "uId": "blogA"
}, {
  "title": "second footer",
  "section": "components",
  "categoryId": "blog",
  "uId": "blogB"
}, {
  "title": "first header",
  "section": "components",
  "categoryId": "contact_button",
  "uId": "contact_buttonA"
}, {
  "title": "first landing",
  "section": "components",
  "categoryId": "content_bloc",
  "uId": "content_blocA"
}, {
  "title": "second landing",
  "section": "components",
  "categoryId": "content_bloc",
  "uId": "content_blocB"
}, {
  "title": "third landing",
  "section": "components",
  "categoryId": "content_bloc",
  "uId": "content_blocC"
}, {
  "title": "first nav",
  "section": "components",
  "categoryId": "cover",
  "uId": "coverA"
}];
var featuredIds = ['footerB', 'headerA', 'landingA'];
var result = filterBy(features, featuredIds);
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.6/lodash.min.js"></script>

您可以在纯js中使用filter()和includes()。

var data = [{"title":"first footer","section":"structure","categoryId":"footer","uId":"footerA"},{"title":"second footer","section":"structure","categoryId":"footer","uId":"footerB"},{"title":"first header","section":"structure","categoryId":"header","uId":"headerA"},{"title":"first header","section":"structure","categoryId":"header","uId":"headerB"},{"title":"first landing","section":"structure","categoryId":"landing","uId":"landingA"},{"title":"second landing","section":"structure","categoryId":"landing","uId":"landingB"},{"title":"third landing","section":"structure","categoryId":"landing","uId":"landingC"},{"title":"first nav","section":"structure","categoryId":"navigation","uId":"navA"},{"title":"first footer","section":"components","categoryId":"blog","uId":"blogA"},{"title":"second footer","section":"components","categoryId":"blog","uId":"blogB"},{"title":"first header","section":"components","categoryId":"contact_button","uId":"contact_buttonA"},{"title":"first landing","section":"components","categoryId":"content_bloc","uId":"content_blocA"},{"title":"second landing","section":"components","categoryId":"content_bloc","uId":"content_blocB"},{"title":"third landing","section":"components","categoryId":"content_bloc","uId":"content_blocC"},{"title":"first nav","section":"components","categoryId":"cover","uId":"coverA"}];
var featuredIds = ['footerB', 'headerA', 'landingA'];
var result = data.filter(function(e) {
  return featuredIds.includes(e.uId);
})
console.log(result)

相关文章：