基于多嵌套值筛选数组对象：实现全部指定筛选值的匹配查询

嘿，我懂你的问题了——你要的是必须包含所有筛选值的产品，而不是只要沾边就行。之前用find的问题在于，它只要找到一个匹配的就返回true，所以会把满足任意一个条件的产品都留下来，这显然不是你想要的。

核心思路 #

要实现“全匹配”，我们需要验证：筛选数组里的每一个值，都能在当前产品的details的value中找到。这里可以用数组的every()方法，它会遍历筛选数组的所有元素，只有当所有元素都满足条件时，才返回true。

具体实现代码 #

const filterValues = ['blue', '30cm', 'true'];
const products = [
 { details: [ { id: 1, value: 'red' }, { id: 2, value: '30cm' }, { id: 3, value: 'true' }, { id: 4, value: '123432'} ], name: "Product 1" },
 { details: [ { id: 5, value: 'blue' }, { id: 6, value: '30cm' }, { id: 7, value: 'true' }, { id: 8, value: '98348'} ], name: "Product 2" },
 { details: [ { id: 9, value: 'black' }, { id: 10, value: '40cm' }, { id: 11, value: 'false' }, { id: 12, value: '578347'} ], name: "Product 3" },
];

const matchedProducts = products.filter(product => {
  // 先提取当前产品所有详情的value，生成一个数组
  const productDetailValues = product.details.map(detail => detail.value);
  // 检查筛选数组的每一个值都存在于这个数组中
  return filterValues.every(filterVal => productDetailValues.includes(filterVal));
});

console.log(matchedProducts); // 输出：[{ details: [...], name: "Product 2" }]

性能优化（可选） #

如果你的产品数组或者详情数据量很大，可以把产品的详情值转成Set——因为Set.has()的查找效率是O(1)，比数组的includes()（O(n)）更快：

const matchedProducts = products.filter(product => {
  const productDetailSet = new Set(product.details.map(detail => detail.value));
  return filterValues.every(filterVal => productDetailSet.has(filterVal));
});

为什么之前的代码不对？ #

你之前用的p.details.find(k => filterValues.includes(k.value))，find()方法只要找到第一个符合条件的元素就会返回该元素（也就是“存在至少一个匹配”），所以最终filter会保留所有有任意一个匹配值的产品，而不是所有值都匹配的产品。用every()正好反过来，确保所有筛选条件都被满足。

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