JS对象浅拷贝和深拷贝详解

在JavaScript中，对象是非常重要的数据类型，它允许我们用键值对的形式来表示和存储数据。当我们需要复制一个对象时，需要了解什么是浅拷贝和什么是深拷贝。本文将详细解释这两种拷贝方式，并提供实例进行说明。

什么是浅拷贝

浅拷贝是指复制出来的新对象的属性是源对象的引用，而不是属性值的拷贝。也就是说，当源对象属性的值为对象或数组时，新对象中该属性仍然是一个指向该对象或数组的引用。简单来说，浅拷贝只拷贝对象的一层属性，而不拷贝对象中的子对象。

下面是一个浅拷贝的示例：

let obj1 = { name: "John", age: 30, hobbies: ["reading", "drawing"] };
let obj2 = Object.assign({}, obj1); // 使用Object.assign()方法进行浅拷贝

console.log(obj1.hobbies === obj2.hobbies); // true，说明hobbies属性是通过引用复制的

在上述示例中，我们使用了Object.assign()方法进行了浅拷贝。可以看到，obj2中的hobbies属性和obj1中的hobbies属性是同一个数组，这表明浅拷贝只是复制了定义在最外层的属性和属性值，而不是其中的子对象。

什么是深拷贝

深拷贝是指复制对象的所有属性及其子属性，复制后的对象与原对象完全独立，不会出现相互引用的情况。

下面是一个深拷贝的示例：

let obj1 = { name: "John", age: 30, hobbies: ["reading", "drawing"] };
let obj2 = JSON.parse(JSON.stringify(obj1)); // 使用JSON.parse和JSON.stringify方法进行深拷贝

console.log(obj1.hobbies === obj2.hobbies); // false，说明hobbies属性是通过值复制的

在上述示例中，我们使用了JSON.parse和JSON.stringify方法完成了深拷贝。可以看到，obj2中的hobbies属性已经不再是原来的数组了，而是一个新的数组，这表明深拷贝已经完全复制了对象及其所有子对象。

需要注意的是，使用以上的方法进行深拷贝，存在一些限制，例如无法复制函数，同时存在性能问题等。

如何选择合适的拷贝方式

在实际开发中，我们需要根据需要选择合适的拷贝方式。

如果对于拷贝的对象及其子对象没有修改的需求，那么使用浅拷贝就足够了。浅拷贝的效率更高，拷贝出来的对象更轻量级。例如，我们在从服务器获取数据并展示时，通常只需要浅拷贝一份数据。

如果需要对拷贝的对象及其子对象进行修改，那么使用深拷贝。深拷贝可以有效地避免修改原对象及其子对象的副作用，保证操作的安全性。

总结

本文详细讲解了JS对象浅拷贝和深拷贝的概念及区别，并提供了相应的示例进行说明。同时，也给出了选择合适拷贝方式的建议，希望对读者有所帮助。