在前端开发中，经常需要对 JavaScript 对象进行拷贝，以便于对其进行修改或传递给其他组件。然而，对于复杂嵌套的对象，浅拷贝只会拷贝最外层的对象，内部嵌套的对象仍然是引用类型，一旦修改其中一个嵌套对象，所有相关联对象都会受到影响。为了避免这种副作用，我们可以使用 ES6 中的解构赋值和展开运算符来实现深度拷贝。
解构赋值
ES6 中新增的解构赋值语法，通过简洁的语法将对象或数组的属性或元素提取出来并赋值给变量。在深度拷贝中，我们可以通过解构赋值来实现对嵌套对象的拷贝。
首先，定义一个嵌套对象：
const originalObj = { firstName: 'John', lastName: 'Doe', address: { city: 'New York', state: 'NY' } };
接着，可以通过以下方式对该对象进行深度拷贝：
const copiedObj = { ...originalObj, address: {...originalObj.address} };
可以看到，通过展开运算符实现了该对象的浅拷贝，而通过在拷贝过程中使用解构赋值，我们也实现了地址对象的深度拷贝，避免了对象的嵌套引用问题。
console.log(copiedObj.address === originalObj.address); // false
展开运算符
展开运算符（Spread Operator）是一种新的运算符，用于将数组或对象的元素展开为独立的参数传递到函数中。我们可以使用展开运算符来合并两个对象，并实现深度拷贝。
比如，定义两个嵌套对象：
-- -------------------- ---- ------- ----- ---- - - -- -- -- - -- - - -- ----- ---- - - -- -- -- - -- - - --展开代码
通过以下方式可以实现这两个对象的深度拷贝：
const mergedObj = { ...obj1, ...obj2, b: {...obj1.b}, e: {...obj2.e} };
可以看到，使用展开运算符将两个对象合并成一个新的对象，并同时对嵌套对象进行深度拷贝。此时，修改其中一个对象不会对其他对象产生影响。
mergedObj.b.c = 5; console.log(obj1.b.c); // 2 console.log(mergedObj.b.c); // 5
注意事项
在使用解构赋值和展开运算符实现深度拷贝时，有一些需要注意的事项：
- 对象必须是可迭代的，否则可能会导致运行时错误
- 对于嵌套很深的对象，如何实现真正意义上的深度拷贝需要特别注意，并结合项目大小和效率进行权衡。
结论
ES6 中的解构赋值和展开运算符为实现深度拷贝提供了简洁而强大的方法。深度拷贝是在前端开发中十分重要的一个基本技能，掌握该技能可以对项目开发、debug等工作产生巨大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729d27e2e7021665e25c23f
