使用 JavaScript 根据对象数组过滤对象数组-js教程-PHP中文网

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

心靈之曲

发布： 2025-07-30 18:00:25

原创

962人浏览过

使用 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" 的课程。

实现步骤

转换过滤器为约束条件：

即构数智人
即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

首先，我们需要将 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)]): 将值转换为数组，确保即使只有一个值，也以数组形式存在。
使用 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 方法，可以灵活地实现复杂的过滤逻辑。这种方法在实际开发中非常实用，可以帮助我们快速地从大量数据中筛选出符合条件的数据。

以上就是使用 JavaScript 根据对象数组过滤对象数组的详细内容，更多请关注php中文网其它相关文章！