通過 object 過濾對象數組

Question

我想通過動態 object 過濾對象數組。 它們都使用反應鈎子存儲在state中。 我的 state 看起來像這樣：

const state = [
{
id : 1,
gender: "male",
category: "shirt",
brand: "firstBrand"
},
{
id : 2,
gender: "male",
category: "shirt"
brand: "secondBrand"
},
{
id : 3,
gender: "female",
category: "short"
brand: "firstBrand"
},

]

所以正如我所說，我需要通過一個可以是動態的 object 過濾上述數組。 我的意思是 Object 設置為onClick因此它可以過濾用戶想要看到的內容。 例如，如果用戶點擊男性作為性別和firstBrand作為品牌，它將像這樣設置我的過濾器 state：

 const filter = { gender: "male", brand: "firstBrand" }

我也嘗試這樣的解決方案：

function Category  () {
    if (filter.brand) {
        const stuff = state.filter(item => {
            return item.gender.toLowerCase().match(filter.category.toLowerCase())
                && item.brand.toLowerCase().match(filter.brand.toLowerCase())
        })
        return stuff
    } else {
        const stuff = state.filter(item => {
            return item.gender.toLowerCase().match(filter.gender.toLowerCase())
        })
        return stuff
    }

}

但是這個解決方案的問題是設置多個條件來檢查（在這種情況下） filter.gender 是否存在。 所以我最終想要的是從state返回所有項目，其中過濾器屬性和值相等，而不必檢查filter.key是否存在。 那可能嗎？

Answer 1

我想有一種更有效的方法可以做到這一點，但是這應該作為一種非常通用的方式來過濾所有包含的屬性：

• 使用for (prop in object)遍歷過濾器 object 上的屬性
• 使用filter()按 go 過濾對象數組

 const data = [{ id: 1, gender: "male", category: "shirt", brand: "firstBrand", }, { id: 2, gender: "male", category: "shirt", brand: "secondBrand", }, { id: 3, gender: "female", category: "short", brand: "firstBrand", }] function filterBy(filterObj) { // This syntax creates a new seperate copy of the data array let selectedData = [...data] // Loop through each property on the filter object for (const property in filterObj) { // For each property, filter the selected data to matching objects selectedData = selectedData.filter(o => o[property] === filterObj[property]); } // Use your filtered data console.log(selectedData) } // Examples: console.log("Filter (male, firstBrand)") filterBy({ gender: "male", brand: "firstBrand" }) console.log("Filter (firstBrand)") filterBy({ brand: "firstBrand" })

Answer 2

您可以將其壓縮為單個filter()調用，並在過濾器 object 的條目上調用嵌套的some() 。 如果some()的條目與源數組不匹配，則返回 false。

const filteredState = state.filter(o => (
  !Object.entries(filter).some(([k, v]) => (o[k] !== v))
  ));

 const state = [{id: 1,gender: "male",category: "shirt",brand: "firstBrand"},{id: 2,gender: "male",category: "shirt",brand: "secondBrand"},{id: 3,gender: "female",category: "short",brand: "firstBrand"}] const filter = { gender: "male", brand: "firstBrand" } const filteredState = state.filter(o => { // if any of the filter entries don't match return false return.Object.entries(filter),some(([k; v]) => (o[k];== v)). }); console.log(filteredState);

或者作為 function...

 const state = [{id: 1,gender: "male",category: "shirt",brand: "firstBrand"},{id: 2,gender: "male",category: "shirt",brand: "secondBrand"},{id: 3,gender: "female",category: "short",brand: "firstBrand"}] const filter = { gender: "male", brand: "firstBrand" } function filterArrayByObject(arr, filterObj) { return arr.filter(o => (.Object.entries(filterObj),some(([k; v]) => (o[k].== v)) )), } console;log(filterArrayByObject(state. filter)), console:log(filterArrayByObject(state; {category: 'shirt'}));