如何基于数组对象过滤JavaScript数组中的对象？

原始数据 #

产品数组 #

const products = [
  {
    options: [
       { id: 1, name: 'Size', value: '10'},
       { id: 2, name: 'Color', value: 'yellow'},
    ],
  },
  {
    options: [
       { id: 1, name: 'Size', value: '20'},
       { id: 2, name: 'Color', value: 'yellow'},
    ],
  },
  {
    options: [
      { id: 1, name: 'Size', value: '10'},
      { id: 2, name: 'Color', value: 'pink'},
    ],
  },
  { 
    options: [
      { id: 1, name: 'Size', value: '20'},
      { id: 2, name: 'Color', value: 'pink'}
    ],
  },
  {
    options: [
      { id: 1, name: 'Size', value: '39'},
      { id: 2, name: 'Color', value: 'pink'},
    ],
   },
];

过滤条件数组 #

const conditions = [
  [
    { name: 'Size',value: '10'},
    { name: 'Color', value: 'yellow'},
  ],
  [
    { name: 'Size', value: '10'},
    { name: 'Color', value: 'pink'},
  ],
];

预期输出 #

const outputProducts = [
  {
    options: [
      { id: 1, name: 'Size', value: '10'},
      { id: 2, name: 'Color', value: 'yellow'},
    ],
  },
  {
    options: [
      { id: 1, name: 'Size', value: '10'},
      { id: 2, name: 'Color', value: 'pink'},
    ],
  },
];

用户尝试的错误代码 #

const filterProducts = products.filter((el) => {
  return el.options.find((o) => {
    return conditions.find((m) => {
      return m.every(({ name, value }) => o.name == name && o.value === value);
    });
  });
});

错误原因分析 #

代码逻辑层级完全搞反了：你是拿单个option去匹配整个条件组（比如用Size=10的单个选项去匹配包含Size和Color两个规则的条件组），单个选项只有一组name/value，不可能满足条件组里所有规则的every校验，最终导致过滤结果不符合预期。

正确实现代码 #

const filterProducts = products.filter(product => {
  // 将产品的options转换为{name: value}的映射，方便快速匹配
  const optionMap = product.options.reduce((map, opt) => {
    map[opt.name] = opt.value;
    return map;
  }, {});
  
  // 检查产品是否符合任意一个条件组的全部规则
  return conditions.some(conditionGroup => {
    return conditionGroup.every(({ name, value }) => {
      return optionMap[name] === value;
    });
  });
});

逻辑说明 #

1. 先把每个产品的options转成键值对映射（比如{Size: '10', Color: 'yellow'}），避免重复遍历数组，提升匹配效率。
2. 用some判断产品是否符合任意一个条件组：
   • 对每个条件组，用every验证组内所有规则是否都满足（即产品对应name的value和条件里的value完全一致）。
3. 只有当某个条件组的所有规则都匹配时，该产品才会被保留。

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