在 JavaScript 中，深拷贝和浅拷贝是非常重要的概念。深拷贝指的是将一个对象完全复制到一个新的变量中，而浅拷贝则是只复制对象的引用。当我们需要对一个对象进行修改时，深拷贝和浅拷贝的区别就体现出来了。本文将介绍使用 ECMAScript 2017 实现深拷贝和浅拷贝的方式，并提供示例代码。
浅拷贝
在 JavaScript 中，浅拷贝通常使用 Object.assign() 方法实现。该方法将源对象的所有可枚举属性复制到目标对象中，并返回目标对象。
示例代码：
let obj1 = { a: 1, b: 2 };
let obj2 = Object.assign({}, obj1);
console.log(obj2); // { a: 1, b: 2 }在上面的示例中，Object.assign() 方法将 obj1 对象的所有属性复制到了一个新的空对象中，并将该对象赋值给了 obj2 变量。
需要注意的是，Object.assign() 方法只能复制对象的一级属性。如果对象的属性值是一个对象，那么复制的只是该对象的引用，而不是该对象本身。
示例代码：
let obj1 = { a: { b: 1 } };
let obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
console.log(obj2.a.b); // 2在上面的示例中，obj1 对象的属性 a 是一个对象，obj2 对象的属性 a 复制的是 obj1.a 的引用。因此，当修改 obj1.a.b 的值时，obj2.a.b 的值也会被修改。
深拷贝
深拷贝需要复制对象及其所有嵌套的子对象。在 JavaScript 中，实现深拷贝有多种方式，包括使用递归函数、使用 JSON 序列化和反序列化等。
递归函数
递归函数是实现深拷贝的一种常见方式。该方法通过递归遍历对象及其嵌套的子对象，并复制它们的值来实现深拷贝。
示例代码：
-- -------------------- ---- -------
-------- -------------- -
-- ------- --- --- -------- -- --- --- ----- -
------ ----
-
--- ------ - ------------------ - -- - ---
--- ---- --- -- ---- -
----------- - --------------------
-
------ -------
-
--- ---- - - -- - -- - - --
--- ---- - ----------------
-------- - --
---------------------- -- -在上面的示例中，deepClone() 函数递归遍历对象及其嵌套的子对象，并复制它们的值。由于深拷贝会复制对象的所有属性，因此修改 obj1.a.b 的值不会影响 obj2.a.b 的值。
需要注意的是，递归函数对于循环引用的对象可能会导致无限递归，因此需要特殊处理。
JSON 序列化和反序列化
使用 JSON 序列化和反序列化也是实现深拷贝的一种方式。该方法通过将对象序列化为 JSON 字符串，再将 JSON 字符串反序列化为对象来实现深拷贝。
示例代码：
let obj1 = { a: { b: 1 } };
let obj2 = JSON.parse(JSON.stringify(obj1));
obj1.a.b = 2;
console.log(obj2.a.b); // 1在上面的示例中，JSON.stringify() 方法将 obj1 对象序列化为 JSON 字符串，JSON.parse() 方法将 JSON 字符串反序列化为对象，并将该对象赋值给了 obj2 变量。由于深拷贝会复制对象的所有属性，因此修改 obj1.a.b 的值不会影响 obj2.a.b 的值。
需要注意的是，该方法不能序列化函数、RegExp 对象等特殊对象，因此对于这些特殊对象需要使用其他方式实现深拷贝。
总结
本文介绍了使用 ECMAScript 2017 实现深拷贝和浅拷贝的方式，并提供了示例代码。浅拷贝通常使用 Object.assign() 方法实现，而深拷贝可以使用递归函数或者 JSON 序列化和反序列化实现。在实际开发中，需要根据具体情况选择合适的方式实现深拷贝和浅拷贝。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6586e283d2f5e1655d1332fd