我試圖通過標籤過濾列表：如何過濾對象數組內部的數組？

const initialState = [ 
    {id:1 ,name: 'Product A', image: 'pic-001.jpg', tags: ['nature', 'camping', 'outdoor']}, 
    {id:2 ,name: 'Product B', image: 'pic-002.jpg', tags: ['winter', 'hiking', 'camping', 'snow']}, 
    {id:3 ,name: 'Product C', image: 'pic-003.jpg', tags: ['vacation', 'family', 'kids', 'river', 'lake', 'fishing']} 
    ]

我可以用map和filter名過濾列表，我的問題是，當我試圖通過標籤列出的產品。我必須在我的產品過濾器中使用foreach嗎？還有另一種做法嗎？

來源

2017-07-06 Takebo

我不認爲有這樣做的任何其他方式。你將不得不遍歷整個數組，以符合與標籤匹配的條件。 –

你可以在你的過濾器函數中使用array.indexOf。 – James

像那樣？

const filter = 'nature'; 
const filteredResult = initialState.filter((item) => { 
    return (item.tags.indexOf(filter) >= 0); 
});

來源

2017-07-06 13:10:28 sjahan

爲什麼不使用'includes'？ – destoryer

@James，yup，thx！ – sjahan

@destoryer什麼是'includes'？它可能是lodash或下劃線的一個特徵，但我認爲它不是本地JS。但IE不支持 – sjahan

您可以創建一個地圖選擇標籤，並在對象的標籤列表使用Array#some檢查是否在地圖標記中的至少一個存在：

const initialState = [ 
 
    {id:1 ,name: 'Product A', image: 'pic-001.jpg', tags: ['nature', 'camping', 'outdoor']}, 
 
    {id:2 ,name: 'Product B', image: 'pic-002.jpg', tags: ['winter', 'hiking', 'camping', 'snow']}, 
 
    {id:3 ,name: 'Product C', image: 'pic-003.jpg', tags: ['vacation', 'family', 'kids', 'river', 'lake', 'fishing']} 
 
]; 
 

 
const filterByTags = ['nature', 'family']; 
 

 
const filterByTagMaps = filterByTags.reduce((map, tag) => map.set(tag, true), new Map()); 
 

 
const result = initialState.filter((o) => o.tags.some((tag) => filterByTagMaps.get(tag))); 
 

 
console.log(result);

來源

2017-07-06 13:14:13

我真的很喜歡代碼是多麼優雅。花了我一段時間才明白爲什麼你需要真正的標誌作爲中介地圖..所以有些過濾器返回值與真正的get。 – JGFMK

謝謝。它節省了需要在過濾器的每次迭代中迭代'filterByTags'。 –

您可以使用indexOf功能

var foo = initialState.filter(function(elm){ 
    return elm.tags.indexOf("camping")>=0 
});

來源

2017-07-06 13:14:16

已經有一個幾乎相同的答案。 – destoryer

Fi首先獲取所有標籤並從initialState過濾重複標籤。將數組保存到uniqueTags中。

然後將uniqueTags與initialState名稱進行比較，以創建具有對象及其屬性標記和產品的另一個數組productTags。

const initialState = [ 
    {id:1 ,name: 'Product A', image: 'pic-001.jpg', tags: ['nature', 'camping', 'winter', 'outdoor']}, 
    {id:2 ,name: 'Product B', image: 'pic-002.jpg', tags: ['winter', 'hiking', 'family', 'camping', 'snow']}, 
    {id:3 ,name: 'Product C', image: 'pic-003.jpg', tags: ['vacation', 'family', 'kids', 'river', 'lake', 'fishing']} 
    ] 

    let allTags = []; 
    initialState.map((t)=>t.tags).forEach((a)=>a.forEach((b)=>allTags.push(b))) 
    let uniqueTags = allTags.filter((a,i,arr)=>arr.indexOf(a,i+1)===-1) 


    productTags = []; 
    uniqueTags.forEach((u)=>{ 
     initialState.forEach((t)=>{ 
      if(t.tags.includes(u)) 
      productTags.push({'tag': u, 'product':t.name}); 
     }) 
    }) 


    console.log(JSON.stringify(productTags)); 

    /* 
    [ 
    { "tag": "nature", "product": "Product A" }, 
    { "tag": "outdoor", "product": "Product A" }, 
    { "tag": "winter", "product": "Product A" }, 
    { "tag": "winter", "product": "Product B" }, 
    { "tag": "hiking", "product": "Product B" }, 
    { "tag": "camping", "product": "Product A" }, 
    { "tag": "camping", "product": "Product B" }, 
    { "tag": "snow", "product": "Product B" }, 
    { "tag": "vacation", "product": "Product C" }, 
    { "tag": "family", "product": "Product B" }, 
    { "tag": "family", "product": "Product C" }, 
    { "tag": "kids", "product": "Product C" }, 
    { "tag": "river", "product": "Product C" }, 
    { "tag": "lake", "product": "Product C" }, 
    { "tag": "fishing", "product": "Product C" } 
] */

（後來編輯）更正：

形成正確的對象，我已經改變了代碼：

const initialState = [ 
    {id:1 ,name: 'Product A', image: 'pic-001.jpg', tags: ['nature', 'camping', 'winter', 'outdoor']}, 
    {id:2 ,name: 'Product B', image: 'pic-002.jpg', tags: ['winter', 'hiking', 'family', 'camping', 'snow']}, 
    {id:3 ,name: 'Product C', image: 'pic-003.jpg', tags: ['vacation', 'family', 'kids', 'river', 'lake', 'fishing']} 
    ] 

    let allTags = []; 
    initialState.map((t)=>t.tags).forEach((a)=>a.forEach((b)=>allTags.push(b))) 
    let uniqueTags = allTags.filter((a,i,arr)=>!arr.includes(a,i+1)) 


    productTags = []; 
    uniqueTags.forEach((u)=>{ 
     let productName = []; 
     initialState.forEach((t)=>{ 
      if(t.tags.includes(u)) 
      productName.push(t.name); 
     }) 
     productTags.push({tag:u, products:productName}); 
    }) 

    console.log(JSON.stringify(productTags)); 

    /* 
    productTags = [ 
     {"tag":"nature","products":["Product A"]}, 
     {"tag":"outdoor","products":["Product A"]}, 
     {"tag":"winter","products":["Product A","Product B"]}, 
     {"tag":"hiking","products":["Product B"]}, 
     {"tag":"camping","products":["Product A","Product B"]}, 
     {"tag":"snow","products":["Product B"]}, 
     {"tag":"vacation","products":["Product C"]}, 
     {"tag":"family","products":["Product B","Product C"]}, 
     {"tag":"kids","products":["Product C"]}, 
     {"tag":"river","products":["Product C"]}, 
     {"tag":"lake","products":["Product C"]}, 
     {"tag":"fishing","products":["Product C"]} 
    ] 
    */

來源

2017-07-06 15:25:37 Calvin

如何過濾對象數組內部的數組？

回答

（後來編輯）更正：

相關問題