JS动态构建筛选对象时不同键对应数组值重复问题求助

问题原因 #

1. 你全局只定义了一个creators_cat数组，JS中数组属于引用类型，你给js_filter不同键赋值时，实际都指向同一个数组实例，自然所有键对应的数组内容完全一致。
2. 没有按筛选类型区分独立数组，每次选中都往同一个公共数组里push值，也没有处理取消勾选的场景。
3. 你给键名额外拼接了引号"'"+filter_type+"'"，会导致生成的键多了一层不必要的引号字符。

修正后代码 #

var js_filter = {};

$('.filter-item input').on('change',function (e) {
    var filter_type = $(this).attr('name');
    var filter_term = $(this).val();
    // 对应筛选类型无数组时先初始化独立数组
    if (!js_filter[filter_type]) {
        js_filter[filter_type] = [];
    }
    if ($(this).is(':checked')) {
        // 勾选时加入值，自带去重避免重复添加
        if (!js_filter[filter_type].includes(filter_term)) {
            js_filter[filter_type].push(filter_term);
        }
    } else {
        // 取消勾选时移除对应值
        js_filter[filter_type] = js_filter[filter_type].filter(item => item !== filter_term);
        // 可选：数组为空时删除对应键，避免空值残留
        if (js_filter[filter_type].length === 0) {
            delete js_filter[filter_type];
        }
    }
    console.log(js_filter);
})

补充说明 #

如果你的筛选是单选逻辑，不需要存储多个值，直接勾选时给对应键赋值为当前选中值即可，不需要用数组存储，按需调整逻辑即可。

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