揭秘JavaScript深拷贝与浅拷贝的奥秘

2024-01-08 02:31:14

深度剖析 JavaScript 中的深拷贝和浅拷贝：影响变量的秘密

JavaScript 世界中的赋值操作看起来似乎轻而易举，但深入探究其底层机制，你就会发现两个至关重要的概念：深拷贝和浅拷贝。这两个看似简单的赋值方式，却隐藏着截然不同的拷贝机制，影响着变量的存储和引用方式，并决定着变量值的改变是否会波及到其他变量。

深入理解深拷贝与浅拷贝

JavaScript 中的变量值可以归为两大类型：值类型和引用类型。值类型变量（如字符串、数字、布尔值等）在赋值操作时，会直接将变量的值复制到新变量中。这意味着新变量拥有自己独立的内存空间，与原变量的值完全独立，互不影响。

引用类型变量（如数组、对象、函数等）在赋值操作时，不会直接复制变量的值，而是复制指向该值内存地址的引用。这意味着新变量与原变量共享同一个内存空间，指向同一块内存地址。因此，当其中一个变量的值发生改变时，另一个变量的值也会随之改变。

深拷贝与浅拷贝的区别就在于：

深拷贝： 将引用类型变量的值完全复制到新变量中，生成一个新的内存地址，两个变量互不影响。
浅拷贝： 只复制引用类型变量的引用，新变量与原变量共享同一个内存地址，互相影响。

深拷贝与浅拷贝的应用场景

深拷贝： 通常用于需要创建独立对象，并确保其值不会受到原对象的影响的场景。例如，当你需要将一个对象传递给另一个函数，但不想让该函数对对象的值进行修改时，可以使用深拷贝来创建一个该对象的副本，然后将副本传递给函数。
浅拷贝： 通常用于需要共享对象引用，并希望对对象进行修改时，所有引用该对象的变量的值都会随之改变。例如，当你想创建一个数组，并希望多个函数都能对该数组进行修改时，可以使用浅拷贝来创建数组的副本，然后将副本传递给各个函数。

如何在 JavaScript 中实现深拷贝和浅拷贝

JavaScript 中有多种方法可以实现深拷贝和浅拷贝。

深拷贝：

JSON.parse(JSON.stringify(obj))： 将对象转换成 JSON 字符串，然后再解析回对象，即可实现深拷贝。
Object.assign({}, obj)： 使用 Object.assign() 方法可以将一个对象的所有属性复制到另一个对象中，但仅限于浅拷贝。
_.cloneDeep(obj)： 使用 lodash 库的 cloneDeep() 方法可以实现深拷贝。

浅拷贝：

obj1 = obj2： 直接将一个对象的引用赋值给另一个对象，实现浅拷贝。
Object.assign(obj1, obj2)： 使用 Object.assign() 方法可以将一个对象的所有属性复制到另一个对象中，实现浅拷贝。
展开运算符： 使用展开运算符 (...) 可以将一个数组或对象展开为另一个数组或对象，实现浅拷贝。

代码示例：

// 浅拷贝
const shallowCopy = { foo: 'bar' };
const otherShallowCopy = shallowCopy;
shallowCopy.foo = 'baz';
console.log(otherShallowCopy); // { foo: 'baz' }

// 深拷贝
const deepCopy = JSON.parse(JSON.stringify({ foo: 'bar' }));
deepCopy.foo = 'baz';
console.log(deepCopy); // { foo: 'baz' }