剖析 JavaScript 数据结构与算法的灵魂：浅拷贝与深拷贝的本质之别

2023-12-25 09:22:19

在大千世界里，理解 JavaScript 数据结构与算法之美，不可忽视浅拷贝和深拷贝的存在。栈内存和堆内存的管理，复杂的数据类型复制，这些都是 JavaScript 程序员修炼内功必经的关卡。而对于它们的使用，知其然更要知其所以然。

浅拷贝，不求全求快

浅拷贝是 JavaScript 中的常用操作，浅拷贝与深拷贝的不同之处在于浅拷贝只复制对象本身，而非对象所引用的值。简而言之，浅拷贝只复制对象的首层属性，而深拷贝会递归复制对象的所有属性，无论属性是简单类型还是复杂类型。

浅拷贝实现起来较为简单，通常使用 Object.assign() 方法或扩展运算符 (...)。Object.assign() 方法会把一个或多个源对象的属性复制到目标对象，而扩展运算符则会将一个对象展开成一组键值对。

const obj1 = { name: 'John', age: 30, skills: ['JavaScript', 'React', 'Node.js'] };
const obj2 = Object.assign({}, obj1);

obj2.name = 'Mary';
obj2.skills.push('Python');

console.log(obj1); // { name: 'John', age: 30, skills: ['JavaScript', 'React', 'Node.js', 'Python'] }
console.log(obj2); // { name: 'Mary', age: 30, skills: ['JavaScript', 'React', 'Node.js', 'Python'] }

上例中，obj1 和 obj2 是两个独立的对象，obj2 是对 obj1 的浅拷贝。当我们修改 obj2 的属性值时，obj1 的属性值也会被修改，因为两个对象共享对 skills 数组的引用。

深拷贝，一脉相承

深拷贝是一种更彻底的复制方式，它会递归复制对象的所有属性，包括引用类型的属性。这样一来，两个对象之间就没有任何关联，修改其中一个对象不会影响另一个对象。

实现深拷贝的方法有很多，最常见的方法是使用 JSON.parse() 和 JSON.stringify() 方法。JSON.stringify() 方法将一个对象转换为 JSON 字符串，而 JSON.parse() 方法则将 JSON 字符串转换为对象。

const obj1 = { name: 'John', age: 30, skills: ['JavaScript', 'React', 'Node.js'] };
const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.name = 'Mary';
obj2.skills.push('Python');

console.log(obj1); // { name: 'John', age: 30, skills: ['JavaScript', 'React', 'Node.js'] }
console.log(obj2); // { name: 'Mary', age: 30, skills: ['JavaScript', 'React', 'Node.js', 'Python'] }