修改对象内JavaScript数组时，所有数组均被更新的问题

嘿，我太懂这种“改一个全变了”的崩溃感了——这种引用类型的坑我之前也踩过好几次！

问题根源 #

你遇到的核心问题是：JavaScript里数组属于引用类型，你在循环填充discount_arr的时候，大概率是把同一个数组实例赋值给了对象里的每个键（比如EMAILVIP和其他可能的键）。这就相当于所有键都“指向”了内存里的同一个数组，不管你修改哪个键对应的数组，本质上都是在改同一个底层数组，自然看起来所有数组都被更新了。

举个错误示例，你可能写了类似这样的填充代码：

// 错误示范：复用了同一个数组
const defaultDiscount = [0, 0, 0]; // 你的基础数组模板
const discount_arr = {};
// 假设你遍历的键列表
const userTypes = ['EMAILVIP', 'SVIP', 'NORMAL'];

userTypes.forEach(type => {
  discount_arr[type] = defaultDiscount; // 坑在这！所有属性都指向同一个数组
});

解决办法 #

关键是每次循环都创建一个新的数组实例，而不是复用同一个数组。你可以用这几种方式实现：

• 扩展运算符（最直观）：

userTypes.forEach(type => {
  discount_arr[type] = [...defaultDiscount]; // 复制出一个新数组
});

• Array.from()：

userTypes.forEach(type => {
  discount_arr[type] = Array.from(defaultDiscount);
});

• slice() 方法：

userTypes.forEach(type => {
  discount_arr[type] = defaultDiscount.slice(); // 无参数slice会复制整个数组
});

• 如果你的模板数组是固定值，也可以直接在循环里创建新数组：

userTypes.forEach(type => {
  discount_arr[type] = [0, 0, 0]; // 每次循环都生成新数组
});

验证效果 #

改完填充代码后，再执行discount_arr.EMAILVIP[0] = 100;，这时候只有EMAILVIP对应的数组会被修改，其他键的数组会保持原样——完全符合你想要的效果！

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