通过 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'}));