JavaScript 中如何过滤对象数组，确保所有指定值都存在于对象的数组属性中

本文介绍了如何使用 JavaScript 过滤一个对象数组，根据一组过滤器（包含类别和标签）筛选出符合特定条件的对象。类别采用 OR 逻辑，即对象只需匹配任意一个类别即可；标签采用 AND 逻辑，即对象必须匹配所有指定的标签。通过 filter、every 和 some 方法的组合使用，可以高效地实现这种复杂的过滤需求。

在实际开发中，经常会遇到需要根据特定条件过滤对象数组的场景。例如，电商网站需要根据用户选择的筛选条件（如品牌、价格、颜色等）展示商品列表。本文将以一个更通用的例子，即根据类别和标签过滤汽车信息，来详细讲解如何实现这种过滤逻辑。

假设我们有以下数据结构：

const filters = {     categories: [         'car',         'van',         'motorbike',     ],     tags: [         '4x4',         'petrol',         'sunroof'     ] }  const items = [     {         title: '2016 VW Polo',         categories: [             {                 title: 'Car',                 slug: 'car'             }         ],         tags: [             {                 title: 'Sunroof',                 slug: 'sunroof',             },             {                 title: 'Power Steering',                 slug: 'power-steering',             },             {                 title: 'Petrol',                 slug: 'petrol',             },         ]     },     {         title: '2015 Audi A4',         categories: [             {                 title: 'Car',                 slug: 'car'             }         ],         tags: [             {                 title: 'Sunroof',                 slug: 'sunroof',             },             {                 title: 'Power Steering',                 slug: 'power-steering',             },             {                 title: 'Petrol',                 slug: 'petrol',             },             {                 title: '4x4',                 slug: '4x4',             },         ]     } ]

我们的目标是根据 filters 中的 categories 和 tags 过滤 items 数组。 categories 使用 OR 逻辑，意味着如果一个 item 的 categories 属性包含 filters.categories 中的任何一个值，则该 item 应该被包含在过滤结果中。tags 使用 AND 逻辑，意味着如果一个 item 的 tags 属性 不 包含 filters.tags 中的 所有 值，则该 item 不应该被包含在过滤结果中。

立即学习“Java免费学习笔记（深入）”；

可以使用以下代码实现这个过滤逻辑：

const filtered = items.filter(({tags, categories}) =>    // first filter by tags since it's more restrictive   (!filters.tags.length || filters.tags.every(tag => tags.some(({slug}) => slug === tag)))   && (!filters.categories.length || filters.categories.some(category => categories.some(({slug}) => slug === category))) );  console.log(filtered);

代码解释：

1. items.filter(({tags, categories}) => …): 使用 filter 方法遍历 items 数组，并对每个 item 执行过滤逻辑。这里使用了对象解构，直接提取了 tags 和 categories 属性。
2. (!filters.tags.length || filters.tags.every(tag => tags.some(({slug}) => slug === tag))): 这部分处理 tags 的过滤逻辑。
   • !filters.tags.length: 如果 filters.tags 数组为空，则跳过 tags 过滤，因为没有需要匹配的 tag。
   • filters.tags.every(tag => tags.some(({slug}) => slug === tag)): every 方法确保 filters.tags 中的 所有 tag 都满足后面的条件。
     • tags.some(({slug}) => slug === tag): some 方法检查当前 item 的 tags 数组中是否存在一个 slug 属性与当前 filter.tags 中的 tag 相等。
3. && (!filters.categories.length || filters.categories.some(category => categories.some(({slug}) => slug === category))): 这部分处理 categories 的过滤逻辑，与 tags 类似，但是使用了 some 方法，实现了 OR 逻辑。
   • !filters.categories.length: 如果 filters.categories 数组为空，则跳过 categories 过滤，因为没有需要匹配的 category。
   • filters.categories.some(category => categories.some(({slug}) => slug === category)): some 方法确保 filters.categories 中的 任何一个 category 满足后面的条件。
     • categories.some(({slug}) => slug === category): some 方法检查当前 item 的 categories 数组中是否存在一个 slug 属性与当前 filter.categories 中的 category 相等。

注意事项：

• 代码中使用了 slug 属性进行匹配，这是因为示例数据中 categories 和 tags 都是对象数组，每个对象都有 slug 属性。如果你的数据结构不同，需要相应地调整匹配逻辑。
• 空数组的处理：代码中使用了 !filters.tags.length 和 !filters.categories.length 来处理过滤器数组为空的情况。 这样做可以避免在过滤器为空时，every 和 some 方法返回意外的结果。
• 性能优化：如果 items 数组非常大，可以考虑使用更高效的算法来提高过滤性能，例如使用索引。

总结：

通过 filter、every 和 some 方法的组合使用，可以灵活地实现复杂的对象数组过滤逻辑。 理解 every 和 some 方法的区别和用法是关键。 在实际应用中，需要根据具体的数据结构和过滤需求调整代码，并注意性能优化。