正文

揭秘JavaScript数值传递：深拷贝与浅拷贝的区别与实战应用

/0 浏览量
0916

在JavaScript中，理解深拷贝和浅拷贝的概念对于开发者来说至关重要。这两种拷贝方式决定了在复制对象时，是否以及如何复制对象内部的属性。下面，我们将深入探讨深拷贝与浅拷贝的区别，并通过实战案例来展示它们的应用。

深拷贝与浅拷贝的基本概念

浅拷贝（Shallow Copy）

浅拷贝指的是创建一个新对象，然后复制原始对象内部的引用类型属性（如数组、对象）的指针到新对象上。简单来说，浅拷贝只复制了对象的最外层属性，对于嵌套的对象，它不会递归复制，而是复制了指向嵌套对象的引用。

深拷贝（Deep Copy）

深拷贝则是创建一个新对象，然后递归复制原始对象的所有属性（包括嵌套属性）。这意味着，在深拷贝过程中，所有对象都会被复制，而不是仅仅复制引用。

深拷贝与浅拷贝的区别

  1. 复制方式：浅拷贝只复制最外层属性，深拷贝会递归复制所有属性。
  2. 复制深度：浅拷贝复制的是引用，深拷贝复制的是实际值。
  3. 性能：深拷贝通常比浅拷贝更耗费性能，因为它需要递归复制所有属性。

实战应用

浅拷贝示例

let original = {
    number: 1,
    array: [1, 2, 3]
};

let shallowCopy = Object.assign({}, original);

original.number = 2;
original.array[0] = 4;

console.log(shallowCopy); // { number: 1, array: [4, 2, 3] }

在上面的例子中，shallowCopy 中的 number 和 array 属性并没有被正确复制，因为它们只是原始对象属性的引用。

深拷贝示例

let original = {
    number: 1,
    array: [1, 2, 3]
};

let deepCopy = JSON.parse(JSON.stringify(original));

original.number = 2;
original.array[0] = 4;

console.log(deepCopy); // { number: 1, array: [1, 2, 3] }

在这个例子中，deepCopy 中的 number 和 array 属性都被正确复制了，因为 JSON.parse(JSON.stringify(original)) 实现了深拷贝。

总结

深拷贝与浅拷贝在JavaScript中有着广泛的应用。了解它们的区别和适用场景，可以帮助开发者避免在对象复制过程中出现的问题。在实际开发中，应根据具体需求选择合适的拷贝方式。

-- 展开阅读全文 --