碎片时间学编程「14」：如何在 JavaScript 中克隆对象？

大家好，欢迎来到IT知识分享网。

JavaScript 的原始数据类型，例如数字、字符串、null、未定义和布尔值是不可变的，这意味着它们的值一旦创建就不能改变。但是，对象和数组是可变的，允许在创建后更改它们的值。这在实践中意味着原语是按值传递的，而对象和数组是通过引用传递的。考虑以下示例：

let str = ‘Hello’;

let copy = str;

copy = ‘Hi’;

// str = ‘Hello’, copy = ‘Hi’

let obj = { a: 1, b: 2 };

let objCopy = obj;

objCopy.b = 4;

// obj = { a: 1, b: 4}, objCopy = { a: 1, b: 4 }

在 of 中发生是对象通过引用传递给 obj的objCopy，因此更改其中一个变量的值也会影响另一个。objCopy实际上是引用同一对象的别名。我们可以通过克隆对象来解决这个问题，可以使用各种技术克隆，例如扩展运算符 ( …) 或Object.assign()使用空对象：

let obj = { a: 1, b: 2};

let clone = { …obj };

clone.b = 4;

// obj = { a: 1, b: 2}, clone = { a: 1, b: 4 }

let otherClone = Object.assign({}, obj);

otherClone.b = 6;

clone.b = 4;

// obj = { a: 1, b: 2}, otherClone = { a: 1, b: 6 }

这两种解决方案都展示了浅克隆的示例，因为它们适用于外部（浅）对象，但如果我们有嵌套（深）对象，最终将通过引用传递则失败。像往常一样，有一些方法可以解决这个问题，其中更简单的是使用JSON.stringify()和JSON.parse()处理这种情况：

let obj = { a: 1, b: { c: 2 } };

let clone = JSON.parse(JSON.stringify(obj));

clone.b.c = 4;

// obj = { a: 1, b: { c: 2 }}, clone = { a: 1, b: { c: 4 } }

虽然上面的示例有效，但它必须对整个对象进行序列化和反序列化，这会明显影响代码的性能，因此它可能不适合较大的对象或性能很重要的项目。

或者，您可以使用递归函数来深度克隆对象，此方案速度更快，例如 deepClone 片段中的那个。同样，如果您想要一个现成的浅克隆功能，您可以在后面 shallowClone 的文章中找到一个。