在编写 ES7 代码时，我们常常会遇到对象不响应 duplication 的问题，这种问题一般被称为对象浅拷贝。今天，我想分享一下我在解决这种问题时的经验和所学到的解决方案。
什么是对象不响应 duplication？
对象不响应 duplication 的问题通常发生在 JavaScript 中操作对象的代码中。这种问题出现的原因是因为 JavaScript 中对象是引用类型，所以在拷贝对象时，我们只是拷贝了其引用地址，而非拷贝对象本身，所以如果在拷贝后修改了对象原型上的属性，那么所有引用该对象的地方都会发生改变。
比如以下代码：
const object1 = { name: 'John', age: 25 };
const object2 = object1;
object2.name = 'Mike';
console.log(object1.name); // 'Mike'
console.log(object2.name); // 'Mike'在上面的代码中，我们初始化了一个对象 object1，然后又把 object1 赋值给了 object2。我们修改了 object2 的 name 属性，但 object1 的 name 属性也会跟着一起改变，这就是对象不响应 duplication 的问题。
解决方案
Object.assign()
Object.assign()方法可以拷贝一个或多个源对象的值到一个目标对象中。该方法会返回目标对象，可以将多个对象的属性合并到一个对象中：
const object1 = { name: 'John', age: 25 };
const object2 = Object.assign({}, object1);
object2.name = 'Mike';
console.log(object1.name); // 'John'
console.log(object2.name); // 'Mike'在这个示例中，我们使用 Object.assign() 方法将 object1 的值拷贝到了一个新对象中，即 object2，然后我们修改了 object2 的 name 属性，但 object1 的 name 属性不会跟着改变。
Spread 运算符
Spread 运算符是 ES6 新增的一个运算符，它可以将一个数组或对象展开，使其元素为独立的值：
const object1 = { name: 'John', age: 25 };
const object2 = { ...object1 };
object2.name = 'Mike';
console.log(object1.name); // 'John'
console.log(object2.name); // 'Mike'在这个示例中，我们使用 Spread 运算符将 object1 的值展开到了一个新对象中，即 object2。这样我们修改了 object2 的 name 属性，但 object1 的 name 属性不会跟着改变。
JSON.parse() 和 JSON.stringify()
使用 JSON.parse() 和 JSON.stringify() 方法也可以解决这个问题：
const object1 = { name: 'John', age: 25 };
const object2 = JSON.parse(JSON.stringify(object1));
object2.name = 'Mike';
console.log(object1.name); // 'John'
console.log(object2.name); // 'Mike'在这个示例中，我们首先使用 JSON.stringify() 将 object1 转换为字符串，再使用 JSON.parse() 将其转换为一个新的对象。这样我们修改了 object2 的 name 属性，但 object1 的 name 属性不会跟着改变。
总结
在 ES7 开发中，掌握对象不响应 duplication 的解决方法是非常必要的，因为这能够帮我们避免出现莫名其妙的问题。我分享的解决方案有 Object.assign()、Spread 运算符、JSON.parse() 和 JSON.stringify()，你可以根据自己的需求和场景选择适合自己的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f98343f6b2d6eab310113f