如何按多组name与age组合条件过滤JavaScript对象数组

问题说明 #

要过滤一组对象，得挑出同时符合两个条件的项：

• 对象的name必须在filterInput.name数组里
• 对象的age必须在filterInput.age数组里

示例数据 #

过滤条件 #

const filterInput = {
  name: ["Alice", "Bob"],
  age: [25, 30]
};

待过滤列表 #

const userList = [
  { name: "Alice", age: 25 },
  { name: "Alice", age: 35 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 25 },
  { name: "Bob", age: 22 }
];

常见的无效代码 #

比如错误用了或逻辑，导致只要满足一个条件就被保留：

// 错误逻辑：用了||，不符合"同时满足"的要求
const filteredUsers = userList.filter(user => {
  return filterInput.name.includes(user.name) || filterInput.age.includes(user.age);
});

修正后的正确代码 #

const filteredUsers = userList.filter(user => {
  // 用&&确保两个条件同时成立
  return filterInput.name.includes(user.name) && filterInput.age.includes(user.age);
});

期望输出 #

运行上面的代码后，得到的结果是：

[
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
]

逻辑说明 #

• 用includes()方法判断对象的属性是否在对应过滤数组里，这个方法会直接检查数组中是否存在指定值
• 核心是用&&运算符，只有当两个条件都满足时，对象才会被保留下来
• 如果你的业务场景需要处理过滤数组为空的情况（比如filterInput.name为空时不做name过滤），可以加个判断扩展逻辑：

const filteredUsers = userList.filter(user => {
  const nameMatch = filterInput.name.length === 0 || filterInput.name.includes(user.name);
  const ageMatch = filterInput.age.length === 0 || filterInput.age.includes(user.age);
  return nameMatch && ageMatch;
});

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