如何在JavaScript中实现数组多条件筛选且不覆盖原数据？

有三个筛选框（room、color、staff），每个包含多个可选值，通过changeBox(name, value)函数传入筛选框名称和选中值来筛选数组，要求同时启用多个筛选条件，只显示符合所有激活条件的结果。原实现使用switch-case，但每次调用filter都会覆盖原数组，导致切换第二个筛选条件的值时功能失效。

核心思路 #

• 保留原始数据源的副本，永远不修改它，作为所有筛选操作的基础
• 维护一个currentFilters对象，存储当前所有激活的筛选条件（键为筛选框名称，值为选中的条件值）
• 每次更新筛选条件后，基于原始数据和所有当前条件重新执行过滤

具体代码实现 #

// 1. 保存原始数据副本（根据你的实际场景初始化，比如接口返回数据时直接保存）
const originalArray = [...myArray];
// 2. 维护当前激活的筛选条件集合
let currentFilters = {};

function changeBox(name, value) {
    // 更新筛选条件：若选中值为空（取消选择）则移除该条件，否则保存
    if (value) {
        currentFilters[name] = value;
    } else {
        delete currentFilters[name];
    }

    // 3. 基于原始数据和所有条件重新过滤
    myArray = originalArray.filter(item => {
        // 验证item是否符合所有激活的筛选条件
        return Object.entries(currentFilters).every(([key, val]) => {
            return item[key] === val;
        });
    });
}

代码说明 #

• originalArray是原始数据的完整副本，始终保持不变，确保每次筛选都能基于全量数据执行
• currentFilters用来记录当前所有生效的筛选规则，比如选中color: blue和room: presidential时，它的值为{ color: 'blue', room: 'presidential' }
• 使用Object.entries(currentFilters).every(...)确保只有符合所有筛选条件的项才会被保留
• 取消筛选时（比如清空某个筛选框的选择），通过delete currentFilters[name]移除对应条件，后续筛选将不再考虑该规则

原代码失效原因 #

原代码每次筛选都会直接覆盖myArray，将其变为过滤后的子集。当切换第二个筛选条件时，只能在已缩小的子集里继续过滤；若之后修改第二个条件的值，此时myArray已经是前一次筛选的结果，无法回到原始全量数据重新执行完整筛选，导致功能失效。

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