使用 JavaScript 根据对象数组过滤对象数组

本文介绍了如何使用 JavaScript 根据另一个对象数组中的条件，高效地过滤对象数组。通过将过滤器条件转换为约束条件，并使用 filter、every 和 some 方法，可以灵活地实现复杂的过滤逻辑，并提供示例代码进行演示。

对象数组过滤详解

在 JavaScript 开发中，经常会遇到需要根据特定条件过滤对象数组的情况。本文将详细介绍一种高效且灵活的方法，用于根据另一个对象数组中的条件来过滤目标对象数组。这种方法的核心在于将过滤条件转化为约束条件，然后利用数组的 filter、every 和 some 方法来实现过滤逻辑。

示例场景

假设我们有一个 subjects 数组，其中包含多个课程对象，每个对象包含 id、title、area、mode 和 available 属性。

let subjects = [
    {
        "id": "course 1",
        "title": "course 1",
        "area": ["red"," blue"],
        "mode": "offline",
        "available": ["full-time", "part-time"],
    },
    {
        "id": "course 2",
        "title": "course 3",
        "area": ["red"],
        "mode": "online",
        "available": "part-time",
    },
    {
        "id": "course 2",
        "title": "course 3",
        "area": ["blue", "green"],
        "mode": "offline",
        "available": ["full-time", "part-time"],
    },
];

同时，我们还有一个 filters 对象，用于存储过滤条件。用户可以选择多个 area、mode 和 available 选项。

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

let filters = { area: ["red", "green"], mode: "" , available: ["full-time"]};

我们的目标是根据 filters 对象中的条件，从 subjects 数组中筛选出符合条件的课程对象。例如，我们需要筛选出 area 包含 "red" 或 "green"，且 available 包含 "full-time" 的课程。

实现步骤

1. 转换过滤器为约束条件：

   

   j2me3D游戏开发简单教程 中文WORD版

   本文档主要讲述的是j2me3D游戏开发简单教程；　如今，3D图形几乎是任何一部游戏的关键部分，甚至一些应用程序也通过用3D形式来描述信息而获得了成功。如前文中所述，以立即模式和手工编码建立所有的3D对象的方式进行开发速度很慢且很复杂。应用程序中多边形的所有角点必须在数组中独立编码。在JSR 184中，这称为立即模式。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

   下载

   首先，我们需要将 filters 对象转换为一个约束条件数组。这个数组的每个元素都是一个键值对，其中键是属性名，值是允许的值的数组。

   const constraints = Object
       .entries(filters)
       .filter(([, v]) => v !== '' && v !== undefined && Array.isArray(v) && v.length)
       .map(([k, v]) => [k, [].concat(v)]);

   这段代码做了以下几件事：

   • Object.entries(filters): 将 filters 对象转换为键值对数组。
   • .filter(([, v]) => v !== '' && v !== undefined && Array.isArray(v) && v.length): 过滤掉值为空字符串、undefined 或空数组的键值对。
   • .map(([k, v]) => [k, [].concat(v)]): 将值转换为数组，确保即使只有一个值，也以数组形式存在。

2. 使用 filter、every 和 some 方法进行过滤：

   接下来，我们使用 subjects 数组的 filter 方法，对每个课程对象进行过滤。对于每个课程对象，我们需要检查它是否满足所有的约束条件。

   const result = subjects.filter(o => constraints.every(([key, value]) => []
       .concat(o[key])
       .some(v => value.includes(v))
   ));

   这段代码做了以下几件事：

   • subjects.filter(o => ...): 遍历 subjects 数组，对每个课程对象 o 进行过滤。
   • constraints.every(([key, value]) => ...): 检查课程对象 o 是否满足所有的约束条件。
   • [].concat(o[key]): 将课程对象 o 的 key 属性值转换为数组，确保即使只有一个值，也以数组形式存在。
   • .some(v => value.includes(v)): 检查课程对象 o 的 key 属性值是否包含在约束条件的值数组中。

完整代码示例

const subjects = [
    {
        "id": "course 1",
        "title": "course 1",
        "area": ["red"," blue"],
        "mode": "offline",
        "available": ["full-time", "part-time"],
    },
    {
        "id": "course 2",
        "title": "course 3",
        "area": ["red"],
        "mode": "online",
        "available": "part-time",
    },
    {
        "id": "course 2",
        "title": "course 3",
        "area": ["blue", "green"],
        "mode": "offline",
        "available": ["full-time", "part-time"],
    },
];

const filters = { area: ["red", "green"], mode: "" , available: ["full-time"]};

const constraints = Object
    .entries(filters)
    .filter(([, v]) => v !== '' && v !== undefined && Array.isArray(v) && v.length)
    .map(([k, v]) => [k, [].concat(v)]);

const result = subjects.filter(o => constraints.every(([key, value]) => []
    .concat(o[key])
    .some(v => value.includes(v))
));

console.log(result);

注意事项

• 确保 filters 对象中的值是数组类型，即使只有一个值，也应该是一个包含该值的数组。
• 如果 filters 对象中某个属性的值为空字符串或 undefined，则该属性的过滤条件将被忽略。
• 该方法适用于简单的 "OR" 逻辑的过滤条件。如果需要更复杂的过滤逻辑，可能需要调整代码。
• 注意数据类型，确保 subjects 中需要过滤的属性和 filters 中对应的值类型一致，例如，都是字符串数组。

总结

本文介绍了一种高效且灵活的方法，用于根据对象数组过滤对象数组。通过将过滤器条件转换为约束条件，并使用 filter、every 和 some 方法，可以灵活地实现复杂的过滤逻辑。这种方法在实际开发中非常实用，可以帮助我们快速地从大量数据中筛选出符合条件的数据。