JavaScript 中复杂数组对象的高效过滤：基于多条件数组的筛选实践

理解复杂数组对象的过滤需求

在前端开发中，我们经常需要处理结构复杂的数组数据。例如，一个 products 数组，每个产品对象内部包含一个 options 数组，用于描述产品的各种属性（如尺寸、颜色）。同时，我们还有一个 conditions 数组，它定义了多个过滤条件组，每个条件组又是一个包含 name-value 对的对象数组。我们的目标是筛选出那些至少满足 conditions 数组中 任一 条件组的 product 对象，并且对于每个匹配的条件组，该产品的所有指定选项（name-value 对）都必须在其 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: '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'},
  ],
];

根据上述 conditions，我们期望的输出是：

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

核心方法与逻辑构建

要实现上述复杂的过滤逻辑，我们需要巧妙地组合使用 JavaScript 数组的三个高阶函数：filter()、some() 和 every()。

1. filter(): 用于遍历 products 数组，根据回调函数的返回值（true 或 false）决定是否保留当前产品。
2. some(): 用于检查数组中是否存在至少一个元素满足指定条件。在本例中，它将用于检查一个产品是否满足 conditions 数组中的 任一 条件组。
3. every(): 用于检查数组中的 所有 元素是否都满足指定条件。在本例中，它将用于检查一个条件组中的 所有 name-value 对是否都在产品的 options 数组中找到。

分步实现

让我们逐步构建正确的过滤逻辑：

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

1. 外层过滤 (filter): 我们首先对 products 数组进行过滤。

   const filterProducts = products.filter(product => {
     // ... 内部逻辑判断当前 product 是否符合条件
   });

   登录后复制

2. 匹配任意条件组 (some): 对于每个 product，我们需要检查它是否满足 conditions 数组中的 任何一个 条件组。

   products.filter(product =>
     conditions.some(condition => {
       // ... 内部逻辑判断当前 product 是否满足这个 condition
     })
   );

   登录后复制

   这里的 conditions.some(condition => ...) 表示只要 product 满足 conditions 里的 任何一个 condition，就返回 true。

   

   硅基智能

   基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播

   62

   查看详情

3. 验证条件组内所有项 (every): 对于 conditions 数组中的每个 condition（它本身是一个对象数组），我们需要确保这个 condition 里的 所有 name-value 对都能在当前 product 的 options 中找到。

   conditions.some(condition =>
     condition.every(({ name, value }) => {
       // ... 内部逻辑判断当前 name-value 对是否在 product.options 中
     })
   );

   登录后复制

   这里的 condition.every(({ name, value }) => ...) 表示当前 condition 数组中的 所有 name-value 对都必须满足内部的匹配逻辑。

4. 在产品选项中查找匹配项 (some): 最后，对于 condition 中的每个 name-value 对，我们需要检查 product.options 数组中是否存在 至少一个 选项，其 name 和 value 与当前 name-value 对完全匹配。

   condition.every(({ name, value }) =>
     product.options.some(option => option.name === name && option.value === value)
   );

   登录后复制

   这里的 product.options.some(option => ...) 表示在 product.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'},
    ],
   },
];

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

const filterProducts = products.filter(product =>
  // 遍历 conditions 数组，检查当前 product 是否满足其中任何一个条件组
  conditions.some(condition =>
    // 对于每个条件组 (condition)，检查其所有 name-value 对是否都在 product.options 中找到
    condition.every(({ name, value }) =>
      // 在 product.options 中查找是否存在一个选项与当前的 name-value 对匹配
      product.options.some(option => option.name === name && option.value === value)
    )
  )
);

console.log(filterProducts);
/*
期望输出:
[
  {
    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'},
    ],
  },
]
*/

注意事项与总结

• 逻辑清晰性: 这种嵌套的 filter、some、every 组合是处理复杂多条件过滤的强大模式。理解它们各自的作用以及它们之间的逻辑关系（filter 决定是否保留元素，some 相当于逻辑或 OR，every 相当于逻辑与 AND）是关键。
• 性能考量: 对于非常庞大的数据集，多层嵌套的循环可能会影响性能。在这种情况下，可以考虑对 conditions 或 product.options 进行预处理（例如，转换为 Set 或 Map 以加速查找），或者探索其他更优化的算法。然而，对于大多数常见的网页应用场景，这种方法的可读性和简洁性通常是首选。
• 代码可读性: 使用箭头函数和解构赋值 ({ name, value }) 可以使代码更加简洁和易读。为变量选择有意义的名称（如 product、condition、option）也有助于理解代码的意图。

通过掌握 filter()、some() 和 every() 这些强大的数组方法，开发者可以高效且优雅地处理 JavaScript 中各种复杂的数组过滤和数据匹配场景。理解其背后的逻辑组合，是编写健壮、可维护代码的关键。

以上就是JavaScript 中复杂数组对象的高效过滤：基于多条件数组的筛选实践的详细内容，更多请关注php中文网其它相关文章！