JavaScript中如何基于多维度筛选条件筛选对象数组？

问题背景 #

现有课程信息数组：

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

用户选择后的筛选器对象：

let filters = { filter1: ["red", "green"], filter2: "" , filter3: ["full-time"]}

需要筛选满足以下条件的课程：

1. 课程的area包含red或green；
2. 课程的available支持full-time。

预期输出：

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

错误分析 #

你之前的尝试存在核心逻辑问题：

• 第一种方法里，s是课程对象，对象本身没有includes方法，直接拿对象和筛选器对比完全不符合筛选逻辑；
• 第二种方法将筛选器转为值数组，但没有对应到课程的具体字段做匹配，自然无法得到正确结果。

正确实现代码 #

// 映射筛选器键与课程字段的对应关系
const filterFieldMap = {
  filter1: 'area',
  filter2: 'mode',
  filter3: 'available'
};

const filteredSubjects = subjects.filter(subject => {
  // 处理area筛选：课程area与筛选值存在交集则通过
  const areaFilters = filters.filter1;
  let areaPass = true;
  if (areaFilters.length > 0) {
    // 去除课程area元素的空格，避免空格导致匹配失败
    const cleanedAreas = subject.area.map(item => item.trim());
    areaPass = cleanedAreas.some(area => areaFilters.includes(area));
  }

  // 处理available筛选：课程available包含所有选中的选项则通过
  const availableFilters = filters.filter3;
  let availablePass = true;
  if (availableFilters.length > 0) {
    availablePass = availableFilters.every(filter => subject.available.includes(filter));
  }

  // 处理mode筛选：有筛选值则严格匹配，无值直接通过
  const modeFilter = filters.filter2;
  let modePass = true;
  if (modeFilter) {
    modePass = subject.mode === modeFilter;
  }

  // 三个维度条件都满足才保留课程
  return areaPass && availablePass && modePass;
});

console.log(filteredSubjects);

代码逻辑说明 #

1. 筛选器映射：通过filterFieldMap明确筛选器键与课程字段的对应关系，方便后续扩展更多筛选维度；
2. area筛选：用some方法实现“或”逻辑，只要课程的area（去除空格后）包含任意一个筛选值就通过；
3. available筛选：用every方法实现“与”逻辑，确保课程的available包含所有选中的选项，支持多选场景；
4. mode筛选：如果筛选器有值则严格匹配，无值则直接通过，兼容空筛选的情况；
5. 多条件组合：只有三个筛选维度的条件全部满足时，课程才会被保留到结果数组中。

内容的提问来源于stack exchange，提问作者user3699344