JavaScript修改对象键时意外改动其他关联键的问题求助

问题根源 #

你遇到的问题是引用赋值导致的对象共享。JavaScript中对象、数组属于引用类型，当你把example_keyframes直接赋值给myObject[2]和myObject[3]时，这两个键实际上指向内存中的同一个对象。修改myObject[3].keyframes时，本质是在修改这个共享对象，因此会同步影响myObject[2]的对应属性。

解决方案 #

方案1：每次创建全新对象实例

放弃复用example_keyframes，每次添加新键时生成独立的对象：

// 添加第二个键
let lastkey = Object.keys(myObject)[Object.keys(myObject).length - 1];
myObject[parseInt(lastkey)+1] = {
    keyframes: [
        {"posX": "0", "posY": "0"},
        {"posX": "400", "posY": "0"},
        {"posX": "100", "posY": "0"}
    ]
};

// 添加第三个键时重复上述逻辑
lastkey = Object.keys(myObject)[Object.keys(myObject).length - 1];
myObject[parseInt(lastkey)+1] = {
    keyframes: [
        {"posX": "0", "posY": "0"},
        {"posX": "400", "posY": "0"},
        {"posX": "100", "posY": "0"}
    ]
};

方案2：深拷贝已有对象

如果需要复用example_keyframes的结构，通过深拷贝生成独立对象，避免引用共享。对于嵌套对象，最简便的方法是利用JSON序列化：

// 添加第二个键
let lastkey = Object.keys(myObject)[Object.keys(myObject).length - 1];
myObject[parseInt(lastkey)+1] = JSON.parse(JSON.stringify(example_keyframes));

// 添加第三个键时同样使用深拷贝
lastkey = Object.keys(myObject)[Object.keys(myObject).length - 1];
myObject[parseInt(lastkey)+1] = JSON.parse(JSON.stringify(example_keyframes));

方案3：展开运算符实现嵌套拷贝

针对层级不深的对象，可通过展开运算符逐层拷贝，确保每个嵌套的引用类型都独立：

myObject[parseInt(lastkey)+1] = {
    keyframes: [...example_keyframes.keyframes.map(item => ({...item}))]
};

修改后再运行代码，修改myObject[3]的属性时就不会影响myObject[2]了。

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