深入理解 JavaScript 中的浅拷贝和深拷贝

在 JavaScript 中，拷贝对象是一项常见的操作。然而，拷贝并不总是简单的复制操作。在 JavaScript 中，我们通常区分两种类型的拷贝：浅拷贝和深拷贝。本文将深入探讨 JavaScript 中的浅拷贝和深拷贝，帮助读者更好地理解它们的含义、区别以及如何实现。

1. 浅拷贝（Shallow Copy）

浅拷贝是指创建一个新的对象，新对象中包含了原始对象的属性值。然而，如果属性值本身是对象，那么浅拷贝只会复制其引用，而不会复制其内部的值。这意味着修改新对象中的属性值可能会影响原始对象中的属性值。

示例

const originalObj = {
    name: 'Alice',
    age: 30,
    hobbies: ['reading', 'traveling']
};

const shallowCopyObj = Object.assign({}, originalObj);

shallowCopyObj.name = 'Bob';
shallowCopyObj.hobbies.push('coding');

console.log(originalObj); // { name: 'Alice', age: 30, hobbies: ['reading', 'traveling', 'coding'] }
console.log(shallowCopyObj); // { name: 'Bob', age: 30, hobbies: ['reading', 'traveling', 'coding'] }

在这个例子中，我们使用 Object.assign() 方法进行浅拷贝。尽管 shallowCopyObj 中的 name 属性值发生了变化，但原始对象 originalObj 中的 name 属性值并未受到影响。然而，由于 hobbies 属性值是一个数组，浅拷贝只复制了其引用，因此修改 shallowCopyObj 中的 hobbies 属性值也会影响到原始对象中的 hobbies 属性值。

2. 深拷贝（Deep Copy）

深拷贝是指创建一个新的对象，新对象中包含了原始对象的属性值。不仅如此，如果属性值本身是对象，深拷贝会递归地复制其内部的值，而不仅仅是复制其引用。这意味着修改新对象中的属性值不会影响原始对象中的属性值。

示例

const originalObj = {
    name: 'Alice',
    age: 30,
    hobbies: ['reading', 'traveling']
};

const deepCopyObj = JSON.parse(JSON.stringify(originalObj));

deepCopyObj.name = 'Bob';
deepCopyObj.hobbies.push('coding');

console.log(originalObj); // { name: 'Alice', age: 30, hobbies: ['reading', 'traveling'] }
console.log(deepCopyObj); // { name: 'Bob', age: 30, hobbies: ['reading', 'traveling', 'coding'] }

在这个例子中，我们使用 JSON.stringify() 方法将原始对象转换为 JSON 字符串，然后再使用 JSON.parse() 方法将 JSON 字符串转换回对象，从而实现深拷贝。由于 JSON.stringify() 方法会递归地复制对象的属性值，因此 deepCopyObj 是原始对象的深拷贝，修改它的属性值不会影响原始对象。

3. 总结

浅拷贝和深拷贝是 JavaScript 中常见的两种拷贝方式，它们之间的区别在于对于属性值为对象的处理方式不同。浅拷贝只复制对象的引用，而深拷贝会递归地复制对象的内部值。在实际开发中，根据需求选择合适的拷贝方式非常重要。

原文链接：https://juejin.cn/post/7343863800146100287 作者：丁丶知了