返回

揭开深浅拷贝的面纱:深入浅出的理解与实践

前端

在广阔的 JavaScript 王国中,深浅拷贝是两柄锋利的双刃剑,它们在塑造数据的命运和确保代码的可靠性方面发挥着至关重要的作用。本文将深入浅出地探讨深浅拷贝的概念,为您提供一个清晰且引人入胜的理解框架,让您在实践中游刃有余。

认识深浅拷贝

  • 浅拷贝: 浅拷贝只复制原始对象的第一层属性,而嵌套对象仍指向原始对象。
  • 深拷贝: 深拷贝复制原始对象的所有属性,包括嵌套对象,创建完全独立的副本。

差异与比较

特征 浅拷贝 深拷贝
属性复制 仅复制第一层属性 复制所有属性
嵌套对象 指向原始对象 创建独立副本
内存占用 通常较低 通常较高
修改影响 修改副本不会影响原始对象 修改副本不会影响原始对象

何时选择深浅拷贝?

选择深浅拷贝取决于您的具体需求:

  • 浅拷贝 适用于需要创建独立副本但不需要复制嵌套对象的场景,例如创建 UI 组件的副本或传递数据。
  • 深拷贝 适用于需要完全独立副本,确保对副本的修改不会影响原始对象的场景,例如存储敏感数据或处理复杂对象。

实际应用

浅拷贝

const obj1 = { name: "John", age: 30 };
const obj2 = Object.assign({}, obj1);

obj2.name = "Mary"; // 不会影响 obj1

console.log(obj1); // 输出:{ name: "John", age: 30 }
console.log(obj2); // 输出:{ name: "Mary", age: 30 }

深拷贝

const obj1 = { name: "John", age: 30, address: { city: "Boston" } };
const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.name = "Mary"; // 不会影响 obj1
obj2.address.city = "New York"; // 不会影响 obj1

console.log(obj1); // 输出:{ name: "John", age: 30, address: { city: "Boston" } }
console.log(obj2); // 输出:{ name: "Mary", age: 30, address: { city: "New York" } }