JS对象的深浅复制：剖析精髓，轻松掌握难点

2023-10-26 04:34:40

JavaScript对象是强大且灵活的数据结构，用于存储和组织数据。当涉及到对象复制时，就有深浅复制和浅复制之分。本文将深入剖析JS对象的深浅复制，带领你轻松掌握这个编程难点，让你对JS对象的理解更上一层楼。

深入浅出，理解深浅复制精髓

深浅复制是JavaScript中非常重要的概念，理解其精髓对于编码至关重要。

1. 浅复制：一层之隔，值传递

浅复制是指复制对象中第一层属性的值，而这些属性的值可能是基本数据类型，也可能是引用类型。当对引用类型的属性进行浅复制时，它只复制引用，而不是复制引用类型属性本身。

const obj1 = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    street: "Main Street"
  }
};

const obj2 = {...obj1};

console.log(obj2); // { name: 'John', age: 30, address: { city: 'New York', street: 'Main Street' } }

obj2.address.city = "Los Angeles";

console.log(obj1); // { name: 'John', age: 30, address: { city: 'Los Angeles', street: 'Main Street' } }

在这个例子中，obj2是obj1的浅拷贝。当修改obj2的address属性的city值时，obj1的address属性的city值也随之改变，这是因为address属性是引用类型，浅复制只复制引用，而不是复制对象本身。

2. 深复制：一层之深，引用传递

深复制是指复制对象的所有属性，包括基本数据类型属性和引用类型属性。当对引用类型的属性进行深复制时，它复制引用类型属性本身，而不是复制引用。

const obj1 = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    street: "Main Street"
  }
};

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

console.log(obj2); // { name: 'John', age: 30, address: { city: 'New York', street: 'Main Street' } }

obj2.address.city = "Los Angeles";

console.log(obj1); // { name: 'John', age: 30, address: { city: 'New York', street: 'Main Street' } }