基于多条件过滤对象数组的 JavaScript 教程

本文档旨在提供一种高效且灵活的方法，用于根据多个条件过滤 JavaScript 对象数组。我们将通过一个实际示例，演示如何利用 filter 和 every 等数组方法，结合动态属性访问，实现复杂的过滤逻辑。该方法可以处理多种过滤条件，并能适应不同数据结构。

在实际开发中，经常需要根据用户的选择或特定的业务规则，从一个对象数组中筛选出符合特定条件的对象。例如，在一个课程列表中，用户可能希望根据课程的领域、模式和可用性等条件进行筛选。下面将详细介绍如何使用 JavaScript 实现这种多条件过滤。

示例数据结构

首先，定义一个包含多个课程对象的数组：

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

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

同时，定义一个包含过滤条件的 filters 对象：

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

在这个例子中，我们希望筛选出 area 包含 "red" 或 "green"，并且 available 包含 "full-time" 的课程。 mode 为空字符串，表示该条件不参与过滤。

实现多条件过滤

核心思路是将 filters 对象转换为一个条件数组，然后使用 filter 方法遍历 subjects 数组，并使用 every 方法检查每个对象是否满足所有条件。

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);

代码解释

硅基智能

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

62

查看详情

1. Object.entries(filters): 将 filters 对象转换为一个包含键值对的数组。例如，{ area: ["red", "green"], mode: "" , available: ["full-time"]} 转换为 [["area", ["red", "green"]], ["mode", ""], ["available", ["full-time"]]]。

2. .filter(([, v]) => v !== '' && v !== undefined && Array.isArray(v) && v.length): 过滤掉无效的过滤条件。如果一个过滤条件的值为空字符串、undefined、不是数组或者数组为空，则不参与过滤。

3. .map(([k, v]) => [k, [].concat(v)]): 将过滤条件的值转换为数组。.concat(v) 确保 o[key] 始终被视为数组，即使它本身不是数组。

4. subjects.filter(o => ...): 使用 filter 方法遍历 subjects 数组。

5. constraints.every(([key, value]) => ...): 使用 every 方法检查每个对象是否满足所有过滤条件。every 方法只有在所有条件都满足时才返回 true。

6. [].concat(o[key]).some(v => value.includes(v)): 对于每个过滤条件，检查对象 o 的属性 key 是否包含在过滤条件的值 value 中。 some 方法只要找到一个匹配的元素就返回 true。

注意事项

• 确保 filters 对象中的值是数组类型，即使只有一个过滤值。
• filters 对象中的键必须与 subjects 数组中对象的属性名一致。
• 如果 subjects 数组中对象的属性值不是数组，可以使用 [].concat(o[key]) 将其转换为数组，以便进行统一处理。

总结

通过结合 filter、every 和动态属性访问，可以实现灵活且强大的多条件过滤。这种方法不仅可以处理多种过滤条件，而且可以适应不同的数据结构。在实际开发中，可以根据具体的需求进行调整和优化。

以上就是基于多条件过滤对象数组的 JavaScript 教程的详细内容，更多请关注php中文网其它相关文章！