JavaScript多条件过滤数组对象技巧

在前端开发中，经常需要根据复杂条件筛选数据。本文针对JavaScript数组对象过滤，提供实用技巧，着重讲解如何利用`filter()`、`some()`和`every()`等高阶函数，处理包含嵌套选项的复杂过滤逻辑。通过电商应用中商品属性筛选的实例，展示了如何根据多层嵌套的条件数组，高效过滤原始数据数组，确保匹配所有指定条件，获取预期结果。本文还分析了常见错误，并强调了`some`和`every`的区别，助你掌握JavaScript复杂条件过滤的精髓，提升代码质量与性能。

本文详细介绍了如何在JavaScript中，利用filter()、some()和every()等高阶数组方法，高效地根据多层嵌套的条件数组来过滤原始数据数组。通过清晰的示例代码和逐步解释，展示了如何处理对象数组中包含嵌套选项的复杂过滤逻辑，确保匹配所有指定条件以获取预期结果。

1. 场景概述与数据结构

在前端开发中，我们经常需要根据一系列复杂的条件来筛选数据。例如，在一个电商应用中，我们可能需要根据用户选择的多个商品属性（如尺码、颜色）来过滤商品列表。本教程将展示如何处理以下类型的数据结构：

原始商品数据 (products): 这是一个包含多个商品对象的数组，每个商品对象内部有一个options数组，存储了该商品的所有属性。

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'},
    ],
   },
];

过滤条件 (conditions): 这是一个嵌套数组，其中每个内部数组代表一个完整的过滤条件集。一个商品只要满足其中任何一个条件集，就应该被包含在结果中。每个条件集内部包含多个属性对象，表示商品必须同时满足这些属性。

const conditions = [
  [ // 条件集 1：尺码为 '10' 且 颜色为 'yellow'
    { name: 'Size',value: '10'},
    { name: 'Color', value: 'yellow'},
  ],
  [ // 条件集 2：尺码为 '10' 且 颜色为 'pink'
    { name: 'Size', value: '10'},
    { name: 'Color', value: 'pink'},
  ],
];

期望输出 (outputProducts): 根据上述条件，我们期望得到一个只包含满足条件的商品的新数组。

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'},
    ],
  },
];

2. 核心过滤逻辑与方法解析

为了实现上述过滤需求，我们将巧妙地结合使用JavaScript的几个高阶数组方法：filter()、some()和every()。

2.1 整体思路

1. 外部过滤 (filter): 对 products 数组进行迭代，决定哪些商品应该被保留。
2. 条件集匹配 (some): 对于每个商品，检查它是否满足 conditions 数组中的 任何一个 条件集。
3. 单个条件集内部匹配 (every): 对于 conditions 中的一个特定条件集，检查当前商品是否满足该条件集中的 所有 属性。
4. 商品属性匹配 (some): 对于条件集中的每个属性（例如 { name: 'Size', value: '10'}），检查该属性是否存在于当前商品的 options 数组中。

2.2 逐步构建过滤函数

下面是实现这个复杂过滤逻辑的代码：

const filterProducts = products.filter(product =>
  // 步骤 1: 遍历 conditions 数组，检查当前 product 是否满足其中任何一个条件集
  conditions.some(conditionSet =>
    // 步骤 2: 对于当前的 conditionSet，检查 product 的 options 是否包含 conditionSet 中的所有属性
    conditionSet.every(({ name, value }) =>
      // 步骤 3: 对于 conditionSet 中的每个 {name, value}，检查 product.options 中是否存在匹配的项
      product.options.some(option => option.name === name && option.value === value)
    )
  )
);

console.log(filterProducts);

2.3 方法详解

• Array.prototype.filter(callback)

  • 用途：创建一个新数组，其中包含通过 callback 函数实现的测试的所有元素。
  • 在本例中：我们用它来遍历 products 数组，并根据内部的复杂逻辑决定哪些 product 对象应该被保留。

• Array.prototype.some(callback)

  • 用途：测试数组中是否 至少有一个 元素通过了 callback 函数的测试。如果找到一个通过测试的元素，则立即返回 true；否则返回 false。
  • 在本例中：
    • 外层 some(conditionSet => ...) 用于检查 products 数组中的一个 product 是否满足 conditions 数组中的 任何一个 conditionSet。
    • 内层 some(option => ...) 用于检查 product.options 数组中是否 存在 某个 option，其 name 和 value 与当前 conditionItem 匹配。

• Array.prototype.every(callback)

  • 用途：测试数组中的 所有 元素是否都通过了 callback 函数的测试。如果所有元素都通过测试，则返回 true；否则返回 false。
  • 在本例中：every(({ name, value }) => ...) 用于检查 conditionSet 数组中的 所有 属性（{name, value} 对）是否都在 product.options 中找到对应的匹配项。这意味着一个 product 必须同时满足 conditionSet 中的所有条件。

3. 注意事项与常见错误

• 理解 some 和 every 的区别：
  • some 强调“至少一个”满足。
  • every 强调“所有”都满足。
  • 在处理嵌套条件时，正确选择这两个方法至关重要。例如，一个商品需要满足 所有 选定的属性（用 every），但只需要满足 任一 过滤条件集（用 some）。
• 深层嵌套的性能考虑：
  • 当 products 和 conditions 数组非常庞大时，这种多层嵌套的循环可能会有性能开销。对于极端情况，可以考虑构建哈希表或使用更优化的算法来提高查找效率，例如将 product.options 转换为一个易于查找的 Map 结构。
• 原始尝试的错误分析：
  • 在问题描述中，原始代码尝试使用 el.options.find((o) => { return conditions.find((m) => { return m.every(({ name, value }) => o.name == name && o.value === value); }); });
  • 这个错误在于 m.every(({ name, value }) => o.name == name && o.value === value)。它试图让 conditionSet 中的 所有 条件都匹配 product.options 中的 单个 选项 o。这是不可能的，因为一个选项（如 { name: 'Size', value: '10'}）不可能同时是 Size:10 和 Color:yellow。every 应该检查 conditionSet 中的每个条件是否都能在 product.options 的 不同 选项中找到匹配。

4. 总结

通过本教程，我们学习了如何利用JavaScript中强大的高阶数组方法filter()、some()和every()来解决复杂的数据过滤问题。理解这些方法的语义和正确组合方式，是高效处理嵌套数据结构和多重条件过滤的关键。掌握这种模式，能够使你的代码更加简洁、可读，并有效处理各种复杂的业务逻辑。

本篇关于《JavaScript多条件过滤数组对象技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！