前端必会——对象的深浅拷贝

2023-12-05 03:42:02

各位前端工程师们，对象拷贝相信大家都不会陌生，但你真的了解对象的深浅拷贝吗？今天，我将带你深入理解对象的深浅拷贝，让你在实际开发中游刃有余。

在JavaScript中，对象是一种复杂的数据结构，可以包含各种各样的数据类型，包括基本数据类型（如字符串、数字、布尔值）和引用数据类型（如数组、对象、函数）。引用数据类型的值并不是直接存储在变量中，而是存储在堆内存中，变量中存储的是引用这个值的指针。因此，当对引用数据类型进行拷贝时，拷贝的只是这个指针，而不会拷贝实际的数据值。

浅拷贝

浅拷贝是指只拷贝对象的第一层属性值，而不会拷贝子对象的属性值。浅拷贝可以通过直接赋值或使用Object.assign()方法来实现。

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

const obj2 = obj1; // 直接赋值

const obj3 = Object.assign({}, obj1); // 使用Object.assign()方法

在上面的例子中，obj2和obj3都是obj1的浅拷贝。obj2和obj3的属性值与obj1的属性值相同，但是obj2和obj3的address属性指向的是同一个对象。因此，对obj2或obj3的address属性进行修改，都会影响到obj1的address属性。

深拷贝

深拷贝是指拷贝对象的所有属性值，包括子对象的属性值。深拷贝可以通过递归遍历对象来实现。

const deepCopy = (obj) => {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map(deepCopy);
  }

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