理解JS对象：浅拷贝与深拷贝的奥妙

2023-12-22 22:02:23

浅尝辄止：浅拷贝的奥秘
浅拷贝，顾名思义，是一种复制对象属性值到新对象的方法，但它只复制一层。也就是说，如果对象属性是基本数据类型（如字符串、数字、布尔值等），则直接复制其值；如果属性是引用数据类型（如数组、对象等），则只复制它们的内存地址，而不是实际的内容。

举个例子，如果我们有一个对象person，它包含两个属性：name和age，其中name是一个字符串，age是一个数字。我们使用浅拷贝创建一个新的对象person2，那么person2也会包含两个属性：name和age，它们的值与person中的完全相同。

const person = {
  name: "John Doe",
  age: 30
};

const person2 = {...person};

console.log(person2.name); // "John Doe"
console.log(person2.age); // 30

但需要注意的是，如果person中的属性是一个引用数据类型，如数组，那么浅拷贝只会复制数组的内存地址，而不是数组的实际内容。因此，对person2中的数组进行修改，也会影响到person中的数组，因为它们指向的是同一个数组。

const person = {
  name: "John Doe",
  age: 30,
  hobbies: ["reading", "coding"]
};

const person2 = {...person};

person2.hobbies.push("traveling");

console.log(person.hobbies); // ["reading", "coding", "traveling"]
console.log(person2.hobbies); // ["reading", "coding", "traveling"]

深入探究：深拷贝的精髓
深拷贝，相比浅拷贝，会复制对象的所有属性值，包括基本数据类型和引用数据类型。也就是说，新对象中的属性值与原对象中的属性值完全独立，对新对象进行修改不会影响原对象。

实现深拷贝的方法有很多，最常见的一种是使用递归。我们可以使用递归函数遍历对象的所有属性，并将每个属性值复制到新对象中。如果属性值是引用数据类型，则递归地复制该引用数据类型的所有属性。

function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  const newObj = {};

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }

  return newObj;
}

const person = {
  name: "John Doe",
  age: 30,
  hobbies: ["reading", "coding"]
};

const person2 = deepCopy(person);

person2.hobbies.push("traveling");

console.log(person.hobbies); // ["reading", "coding"]
console.log(person2.hobbies); // ["reading", "coding", "traveling"]