深浅拷贝不同实现方式解析

2023-10-12 09:19:04

数据克隆：浅拷贝与深拷贝的详解

导语

在现代网络开发中，JavaScript 应用程序无处不在，随之而来的数据克隆需求也日益迫切。数据克隆是指复制一个对象并创建一个新的对象，其中包含原始对象的副本。对于复杂的应用程序，选择正确的克隆方法至关重要，它直接影响对象的独立性和性能。本文将深入探讨浅拷贝和深拷贝两种数据克隆方法，帮助开发人员根据实际情况做出明智的选择。

浅拷贝

浅拷贝顾名思义，只克隆对象的引用。这意味着新创建的对象指向与原始对象相同的内存位置。浅拷贝的过程快速且简单，但它存在局限性。

实现方法：

Object.assign() 方法： 该方法可以将一个或多个源对象的属性复制到目标对象。例如：

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

扩展运算符 (...)： 该运算符可以将一个数组或对象的元素展开成单个元素。例如：

const obj1 = { name: "John Doe", age: 30 };
const obj2 = { ...obj1 };

特点：

速度快： 浅拷贝只需要复制对象的引用，因此效率较高。
不独立： 浅拷贝的对象与原始对象共享内存位置，修改其中一个对象也会影响另一个对象。

应用场景：

克隆简单的对象（如字符串、数字和布尔值）
克隆不包含引用类型属性的对象（如数组或其他对象）

深拷贝

深拷贝与浅拷贝不同，它克隆对象及其所有属性，包括引用类型属性。这样创建的新对象与原始对象完全独立，不会相互影响。

实现方法：

JSON.parse(JSON.stringify()) 方法： 该方法将对象转换为 JSON 字符串，然后将其解析回对象。例如：

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

递归函数： 该方法通过递归遍历对象，为每个属性创建副本。例如：

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }
  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
}