本文档旨在提供一种高效且灵活的方法，用于根据多个条件过滤 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);
代码解释
-
Object.entries(filters): 将 filters 对象转换为一个包含键值对的数组。例如，{ area: [“red”, “green”], mode: “” , available: [“full-time”]} 转换为 [[“area”, [“red”, “green”]], [“mode”, “”], [“available”, [“full-time”]]]。
-
.filter(([, v]) => v !== ” && v !== undefined && Array.isArray(v) && v.length): 过滤掉无效的过滤条件。如果一个过滤条件的值为空字符串、undefined、不是数组或者数组为空，则不参与过滤。
-
.map(([k, v]) => [k, [].concat(v)]): 将过滤条件的值转换为数组。.concat(v) 确保 o[key] 始终被视为数组，即使它本身不是数组。
-
subjects.filter(o => …): 使用 filter 方法遍历 subjects 数组。
-
constraints.every(([key, value]) => …): 使用 every 方法检查每个对象是否满足所有过滤条件。every 方法只有在所有条件都满足时才返回 true。
-
[].concat(o[key]).some(v => value.includes(v)): 对于每个过滤条件，检查对象 o 的属性 key 是否包含在过滤条件的值 value 中。 some 方法只要找到一个匹配的元素就返回 true。
注意事项
- 确保 filters 对象中的值是数组类型，即使只有一个过滤值。
- filters 对象中的键必须与 subjects 数组中对象的属性名一致。
- 如果 subjects 数组中对象的属性值不是数组，可以使用 [].concat(o[key]) 将其转换为数组，以便进行统一处理。
总结
通过结合 filter、every 和动态属性访问，可以实现灵活且强大的多条件过滤。这种方法不仅可以处理多种过滤条件，而且可以适应不同的数据结构。在实际开发中，可以根据具体的需求进行调整和优化。
