React中多条件组合筛选数组对象失效问题求助

原始数据与需求 #

用户有如下用户数组：

const users = [
    { name: 'John', age: 15, gender: 'M', city: 'London', country: 'UK' },
    { name: 'Jack', age: 20, gender: 'M', city: 'New York', country: 'USA' },
    { name: 'Jinny', age: 30, gender: 'F', city: 'London', country: 'UK' },
    { name: 'Key', age: 15, gender: 'M', city: 'Leeds', country: 'UK' },
];

需求是通过复选框选择筛选条件（国家UK、性别F、年龄15或显示全部），将选中条件存入数组后，筛选出同时满足所有选中条件的用户，但原实现只能单条件生效，无法组合筛选。

原代码的问题分析 #

原实现代码存在以下错误：

// 重复声明变量，语法错误
const value = ['F', 'UK', 15];
const value = ['all'];

const showUsersFilter = () => {
    // 变量名冲突，自身赋值无意义
    let users = users;
    value.forEach((item) => {
      switch (item) {
        case 'all':
          users = users;
          return users; // forEach中return无效，不会终止遍历
        case 'F':
          users = users.filter((user) => user.gender === 'F');
          return users;
        case 'UK':
          users = users.filter((user) => user.country === 'UK');
          return listUsers; // 未定义变量，逻辑错误
        case 15:
          users  = users.filter((user) => user.age === 15);
          return users ;
       default:
          return users;
      }
    });
  };

1. 变量重复声明：两次声明const value，违反语法规则，导致变量覆盖。
2. 变量名冲突：let users = users;将变量赋值给自身，后续修改会破坏原数组引用，应使用不同变量名。
3. forEach的return无效：forEach遍历中return不会终止遍历，也无法传递返回值，导致逻辑执行混乱。
4. 未定义变量：case 'UK'中返回listUsers，该变量未声明，直接导致代码报错。
5. 条件逻辑错误：若筛选数组包含'all'和其他条件，原代码会继续执行后续筛选，无法正确返回全部用户；同时依次过滤的逻辑虽然是逻辑与，但因上述错误无法正常执行。

正确实现方案 #

方案1：使用every实现多条件同时满足 #

const users = [
    { name: 'John', age: 15, gender: 'M', city: 'London', country: 'UK' },
    { name: 'Jack', age: 20, gender: 'M', city: 'New York', country: 'USA' },
    { name: 'Jinny', age: 30, gender: 'F', city: 'London', country: 'UK' },
    { name: 'Key', age: 15, gender: 'M', city: 'Leeds', country: 'UK' },
];

// 选中的筛选条件数组，可根据复选框选中状态动态更新
const selectedFilters = ['F', 'UK', 15];
// const selectedFilters = ['all'];

const showUsersFilter = () => {
    // 若选中"全部"，直接返回原数组副本（避免修改原数组）
    if (selectedFilters.includes('all')) {
        return [...users];
    }

    // 筛选同时满足所有选中条件的用户
    return users.filter(user => {
        return selectedFilters.every(filter => {
            switch (filter) {
                case 'F':
                    return user.gender === 'F';
                case 'UK':
                    return user.country === 'UK';
                case 15:
                    return user.age === 15;
                default:
                    return true; // 未知条件默认视为满足
            }
        });
    });
};

// 测试调用，查看筛选结果
console.log(showUsersFilter());

方案2：依次过滤（逻辑与） #

如果需要保持依次过滤的逻辑（和原思路一致），修正变量和语法错误后也可实现：

const showUsersFilter = () => {
    if (selectedFilters.includes('all')) {
        return [...users];
    }

    // 初始化筛选结果为原数组副本
    let filteredUsers = [...users];
    selectedFilters.forEach(filter => {
        switch (filter) {
            case 'F':
                filteredUsers = filteredUsers.filter(user => user.gender === 'F');
                break;
            case 'UK':
                filteredUsers = filteredUsers.filter(user => user.country === 'UK');
                break;
            case 15:
                filteredUsers = filteredUsers.filter(user => user.age === 15);
                break;
        }
    });
    return filteredUsers;
};

说明 #

• 两种方案都实现了多条件组合筛选，用户需同时满足所有选中的条件。
• 使用[...users]返回原数组的副本，避免修改原数组的引用，保证数据的纯净性。
• 当选中"all"时，直接返回全部用户，忽略其他筛选条件。

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