引言
在 JavaScript 中，对象的拷贝是一个常见的需求。通常我们会使用 Object.assign() 或者 JSON.parse(JSON.stringify(object)) 来实现对象的浅拷贝和深拷贝。然而，ES9 中引入了 rest/spread 操作符，使得对象深拷贝和浅拷贝更加方便和高效。本文将介绍如何使用 rest/spread 操作符来实现对象的深拷贝和浅拷贝。
浅拷贝
浅拷贝是指只复制对象的一层属性，如果属性值是对象，则只复制引用。这意味着，如果修改了被拷贝对象的属性值，那么拷贝后的对象也会受到影响。
使用 rest/spread 操作符来实现对象的浅拷贝非常简单：
const obj = { a: 1, b: { c: 2 } };
const copy = { ...obj };在上面的代码中，我们使用 rest/spread 操作符 ... 来复制对象 obj，并将其赋值给变量 copy。此时，copy 中的属性值与 obj 中的属性值相同，但是它们是两个不同的对象。
obj.a = 3; console.log(copy.a); // 1
在上面的代码中，我们修改了 obj 中的属性 a 的值，并打印了 copy.a 的值。由于 copy 是一个新的对象，因此它的属性值不会受到修改的影响。
深拷贝
深拷贝是指复制对象的全部属性，包括嵌套对象。这意味着，如果修改了被拷贝对象的属性值，那么拷贝后的对象不会受到影响。
使用 rest/spread 操作符来实现对象的深拷贝稍微有点复杂。我们需要使用递归函数来复制嵌套对象。下面是一个使用 rest/spread 操作符来实现对象的深拷贝的示例代码：
// javascriptcn.com 代码示例
function deepCopy(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
const copy = Array.isArray(obj) ? [] : {};
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
copy[key] = deepCopy(obj[key]);
}
}
return copy;
}
const obj = { a: 1, b: { c: 2 } };
const copy = deepCopy(obj);在上面的代码中，我们定义了一个名为 deepCopy 的递归函数，它将对象作为参数，并返回对象的深拷贝。在函数中，我们首先判断对象是否为一个对象或者 null，如果不是，则返回原始值。接着，我们创建一个新的对象 copy，用于存储深拷贝后的对象。如果对象是一个数组，则创建一个空数组；如果对象是一个普通对象，则创建一个空对象。
接着，我们使用 for...in 循环遍历对象的所有属性，并递归调用 deepCopy 函数来复制嵌套对象。最后，我们返回深拷贝后的对象。
obj.b.c = 3; console.log(copy.b.c); // 2
在上面的代码中，我们修改了 obj.b.c 的值，并打印了 copy.b.c 的值。由于我们使用了深拷贝，因此 copy 中的属性值不会受到修改的影响。
总结
使用 rest/spread 操作符来实现对象的浅拷贝和深拷贝非常方便和高效。浅拷贝只需要使用 ... 操作符即可，而深拷贝需要使用递归函数来复制嵌套对象。在实际开发中，我们需要根据具体的需求选择合适的拷贝方式，以避免出现意外的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65556e23d2f5e1655df93367