javascript - Lodash 中的多个过滤条件

Question

我有一个包含产品信息的对象数组，其中有类别和颜色作为字段。现在，我有另一个数组，其中包含要显示的类别和颜色。

主数组:

products: [{
id: 1,
  name: 'Product 1',
  category: 'Home',
  skill: 'Easy',
  color: 'blue',
  price: 100.00
}, {
    id: 2,
  name: 'Product 2',
  category: 'Home',
  skill: 'Intermediate',
  color: 'red',
  price: 120.00
}, {
    id: 3,
  name: 'Product 3',
  category: 'Office',
  skill: 'Intermediate',
  color: 'green',
  price: 190.00
}, {
    id: 4,
  name: 'Product 4',
  category: 'Office',
  skill: 'Advanced',
  color: 'blue',
  price: 260.00
}, {
    id: 5,
  name: 'Product 5',
  category: 'Warehouse',
  skill: 'Advanced',
  color: 'white',
  price: 321.00
}, {
    id: 6,
  name: 'Product 6',
  category: 'Farm',
  skill: 'Intermediate',
  color: 'red',
  price: 120.00
}, {
    id: 7,
  name: 'Product 7',
  category: 'Space',
  skill: 'Advanced',
  color: 'green',
  price: 150.00
}, {
    id: 8,
  name: 'Product 8',
  category: 'Bathroom',
  skill: 'Easy',
  color: 'black',
  price: 9.00
}],

我的另一个包含过滤器选项的数组:

selectedFilters: {
 categories : ["home", "bathroom"] ,
 colors : ["blue", "red"] 
}

现在我希望输出为:

[{
id: 1,
  name: 'Product 1',
  category: 'Home',
  skill: 'Easy',
  color: 'blue',
  price: 100.00
}, {
    id: 2,
  name: 'Product 2',
  category: 'Home',
  skill: 'Intermediate',
  color: 'red',
  price: 120.00
}]

我尝试了普通的数组过滤方法:

this.filteredProducts = this.products.filter(prod => {
  // [prod.category, prod.color].some(val => this.selectedFilters.includes(val))
  console.log(this.selectedFilters);
  for (let i = 0; i < this.selectedFilters.length; i++) {
    // console.log('Selected Category : ', this.selectedFilters[i]);
    // console.log('Product Category : ', prod.category);
    if (prod.category == this.selectedFilters[i]) {
      console.log('Called category');
      return true;
    } else if (prod.color == this.selectedFilters[i]) {
      console.log('Called color');
      return true;
    } else {
      console.log('Called else');
      continue;
    }
  }

});

如何使用数组过滤函数或 Lodash 函数实现此目的？

Answer 1

不需要库，使用标准的.filter方法过滤一个数组，检查每个对象的颜色和类别是否包含在selectedFilters对象中:

const products = [{
  id: 1,
  name: 'Product 1',
  category: 'Home',
  skill: 'Easy',
  color: 'blue',
  price: 100.00
}, {
  id: 2,
  name: 'Product 2',
  category: 'Home',
  skill: 'Intermediate',
  color: 'red',
  price: 120.00
}, {
  id: 3,
  name: 'Product 3',
  category: 'Office',
  skill: 'Intermediate',
  color: 'green',
  price: 190.00
}, {
  id: 4,
  name: 'Product 4',
  category: 'Office',
  skill: 'Advanced',
  color: 'blue',
  price: 260.00
}, {
  id: 5,
  name: 'Product 5',
  category: 'Warehouse',
  skill: 'Advanced',
  color: 'white',
  price: 321.00
}, {
  id: 6,
  name: 'Product 6',
  category: 'Farm',
  skill: 'Intermediate',
  color: 'red',
  price: 120.00
}, {
  id: 7,
  name: 'Product 7',
  category: 'Space',
  skill: 'Advanced',
  color: 'green',
  price: 150.00
}, {
  id: 8,
  name: 'Product 8',
  category: 'Bathroom',
  skill: 'Easy',
  color: 'black',
  price: 9.00
}];
const selectedFilters = {
 categories : ["home", "bathroom"] ,
 colors : ["blue", "red"] 
};

const { categories, colors } = selectedFilters;
const filteredProducts = products.filter(({ category, color }) => (
  categories.includes(category.toLowerCase()) && colors.includes(color.toLowerCase())
));
console.log(filteredProducts);