浅拷贝与深拷贝的全面理解与精准实践指南

前端

2024-02-17 19:13:35

浅拷贝与深拷贝：概念与区别

在计算机科学中，复制（Copy）是一种基本的操作，通常用于创建数据的副本。在 JavaScript 中，有两种常见的复制方式：浅拷贝和深拷贝。

浅拷贝

浅拷贝只复制对象的引用，而不是对象本身。这意味着，当我们对浅拷贝的对象进行修改时，原始对象也会受到影响。这是因为两个对象指向同一个内存地址。

深拷贝

深拷贝则复制对象及其所有属性，创建一个全新的对象。这意味着，即使我们对深拷贝的对象进行修改，原始对象也不会受到影响。这是因为深拷贝的对象拥有自己的内存地址。

何时使用浅拷贝与深拷贝

浅拷贝和深拷贝各有其优缺点。一般来说，浅拷贝速度更快，占用内存更少。而深拷贝则更安全，可以确保原始对象不受修改。

在以下情况下，可以使用浅拷贝：

当对象是不可变的，或者不会被修改时。
当对象是简单的数据结构，如数字、字符串或布尔值时。
当对象是引用类型，但其属性都是不可变时。

在以下情况下，可以使用深拷贝：

当对象是可变的，或者可能会被修改时。
当对象是复杂的数据结构，如数组或对象时。
当对象是引用类型，且其属性可能被修改时。

浅拷贝与深拷贝的实现

在 JavaScript 中，可以使用多种方法实现浅拷贝和深拷贝。

浅拷贝的实现

以下是一些实现浅拷贝的常见方法：

使用 Object.assign() 方法：

const obj1 = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
  },
};

const obj2 = Object.assign({}, obj1);

obj2.name = 'Jane Doe';

console.log(obj1); // { name: 'John Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA' } }
console.log(obj2); // { name: 'Jane Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA' } }

使用 spread 操作符：

const obj1 = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
  },
};

const obj2 = {...obj1};

obj2.name = 'Jane Doe';

console.log(obj1); // { name: 'John Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA' } }
console.log(obj2); // { name: 'Jane Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA' } }

深拷贝的实现

以下是一些实现深拷贝的常见方法：

使用 JSON.parse() 和 JSON.stringify() 方法：

const obj1 = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
  },
};

const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.name = 'Jane Doe';

console.log(obj1); // { name: 'John Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA' } }
console.log(obj2); // { name: 'Jane Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA' } }

使用递归函数：

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;
}

const obj1 = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
  },
};

const obj2 = deepCopy(obj1);

obj2.name = 'Jane Doe';

console.log(obj1); // { name: 'John Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA' } }
console.log(obj2); // { name: 'Jane Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA' } }