如何根据筛选对象从产品对象数组中筛选符合条件的元素？

原始产品数据 #

const products = [
  {id:1, color:["white","red"], size:["S","M"]},
  {id:2, color:["blue","yellow","white"], size:["S","M","L","XL"]},
  {id:3, color:["green","red"], size:["M"]},
  {id:4, color:["black","green"], size:["L","XL"]},
  {id:5, color:["white","black"], size:["M","L"]},
  {id:6, color:["red","yellow"], size:["S","M"]},
  {id:7, color:["yellow","blue"], size:["L"]}
]

需求说明 #

页面包含两个<Select>组件，分别用于选择颜色和尺寸。用户选择后会生成一个filters对象：

• 同时选颜色和尺寸时，如const filters = {color:"red", size:"S"}
• 仅选颜色时，如const filters = {color:"red", size:undefined}

需要实现筛选逻辑，将同时满足所有选定条件的产品存入filteredProducts数组。例如当filters = {color:"red", size:"S"}时，筛选结果为：

const filteredProducts = [
  {id:1, color:["white","red"], size:["S","M"]},
  {id:6, color:["red","yellow"], size:["S","M"]}
]

实现方案 #

利用数组filter方法结合条件判断实现，核心逻辑是仅对filters中存在有效值的条件做校验，未选择的条件直接跳过：

function filterProducts(products, filters) {
  return products.filter(product => {
    // 颜色校验：未选颜色则直接通过，否则检查产品是否包含该颜色
    const colorPass = !filters.color || product.color.includes(filters.color);
    // 尺寸校验：未选尺寸则直接通过，否则检查产品是否包含该尺寸
    const sizePass = !filters.size || product.size.includes(filters.size);
    // 必须同时满足所有有效筛选条件
    return colorPass && sizePass;
  });
}

// 示例调用
const filters1 = {color:"red", size:"S"};
const result1 = filterProducts(products, filters1);
console.log(result1); // 输出符合双条件的产品数组

const filters2 = {color:"red", size:undefined};
const result2 = filterProducts(products, filters2);
console.log(result2); // 输出所有含红色的产品（id:1、3、6）

逻辑说明 #

• !filters.color：当用户未选择颜色时，该表达式为true，直接跳过颜色校验
• product.color.includes(filters.color)：用户选择颜色后，检查产品的颜色数组是否包含选定值
• 尺寸校验逻辑与颜色完全一致
• 最终返回同时满足所有有效筛选条件的产品集合

内容的提问来源于stack exchange，提问作者Chamindu Vidyarathne