[英]how to loop through array of objects and check if a value in that object matches an item in another array using lodash
我有一系列的項目，這些項目是類似這樣的特色組件：
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數組中提供的featureIds匹配的組件的新數組，如下所示：
[{
"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"
}]
我已經研究過使用_.some，_。find和其他一些方法，但是無法獲得我想要的結果。 我已經使用double for循環編寫了此文件，這就是為什么我希望我們破破爛爛地切出/學習一些新知識。
您可以將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)
如何遍歷對象數組並使用lodash檢查值是否匹配對象中的字符串或項目數組中的值
[英]How to loop through array of objects and check if a value matches either a string in the object or a value in an array of items using lodash
如何檢查數組的至少一項是否包含在 object 的數組中並遍歷所有對象（JS）
[英]How to check if at least one item of an array is included in an array of an object and loop through all objects (JS)
如何基於其他數組遍歷數組中的每個值並使用 javascript 檢查它是否符合某些條件？
[英]How to loop through each value in array based on other array and check if it matches some condition using javascript?
在Lodash中遍歷對象數組時如何添加新的鍵值對
[英]How to add new key value pair when loop through array of objects in lodash
LoDash從子數組中找到其屬性與對象數組中的值匹配的對象
[英]LoDash find the object whose property matches the value from array of objects with children array
如何將數組中的對象值復制到 javascript/lodash 中的另一個空數組？
[英]How to copy object value in array to another empty array in javascript/lodash?
如何檢查數組對象的屬性是否與另一個 object 數組中的值之一匹配
[英]How to check if property of an objects of array matches with one of the values in another array of object
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.