JavaScript循环创建key对应数组对象：已存在key时追加值

你的代码存在两个核心问题：

1. 每次直接赋值obj[name] = [checkbox.id]，会覆盖该key对应的原有数组，无法实现追加元素的效果
2. 循环中重复将同一个obj推入dataName，由于对象是引用类型，最终dataName内的所有元素都会指向同一个对象，只会保留最后一次修改的结果

修正后的代码如下：

// 初始化存储结果的对象
let obj = {};
// 如果需要记录每次选中后的状态，再初始化这个数组
// let dataName = [];

checkboxes.forEach(checkbox => {
    if (checkbox.checked) {
        // 判断key是否已存在，存在则追加值，不存在则初始化数组
        if (obj[name]) {
            obj[name].push(checkbox.id);
        } else {
            obj[name] = [checkbox.id];
        }

        // 若要保存每次选中后的对象状态，需创建对象副本推入数组
        // dataName.push({...obj});
    }
});

// 最终结果直接存于obj中，若需要历史状态则查看dataName

关键改动点 #

• 避免数组覆盖：通过条件判断obj[name]是否存在，存在时调用push追加新元素，不存在时才创建新数组
• 处理引用类型问题：如果需要记录每次选中后的对象状态，必须使用{...obj}创建对象的浅副本，否则dataName中的所有元素都会指向同一个对象，导致所有元素内容一致

内容的提问来源于stack exchange，提问作者michouël