JavaScript如何按多个条件过滤数组 附完整代码样例

核心逻辑说明 #

你的筛选规则符合通用多条件过滤规则：

• 不同筛选字段之间是「且」的关系：用户必须同时满足所有字段的筛选要求
• 单个字段下的多个筛选值是「或」的关系：用户对应字段的值只要匹配数组里任意一个就算符合要求

具体代码实现 #

// 筛选规则
const filter = {
  address: ['England'],
  name: ['Mark', 'Tom']
};
// 待筛选用户数组
const users = [
  { name: 'John', email: 'johnson@mail.com', age: 25, address: 'USA' },
  { name: 'Tom', email: 'tom@mail.com', age: 35, address: 'England' },
  { name: 'Mark', email: 'mark@mail.com', age: 28, address: 'England' }
];

// 过滤逻辑
const filteredUsers = users.filter(user => {
  // 遍历所有筛选规则字段，全部满足才保留
  return Object.entries(filter).every(([filterKey, allowedValues]) => {
    // 检查用户对应字段值是否在允许的列表中
    return allowedValues.includes(user[filterKey]);
  });
});

console.log(filteredUsers);

运行后输出的结果与你给出的预期结果完全一致。

逻辑拆解 #

• 用数组原生的filter方法遍历所有用户，返回符合条件的用户组成的新数组
• 用Object.entries把筛选规则对象转成[字段名, 允许值数组]的键值对数组
• 用every方法判断用户是否满足所有筛选字段的要求：只要有一个字段不满足就会被过滤
• 用includes方法判断用户对应字段的值是否在当前筛选字段的允许值数组里，匹配任意一个就算符合当前字段的要求

可扩展性说明 #

这个写法是通用的，后续如果要新增筛选规则，比如加age: [28,35]的筛选条件，直接在filter对象里加对应属性即可，不需要修改过滤逻辑。

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