浅析手写 JS 浅拷贝与深拷贝

2023-09-14 09:22:36

绪论：浅拷贝与深拷贝概述

在 JavaScript 中，变量存储的不是实际值，而是对实际值的引用。这意味着当您将一个对象或数组赋值给另一个变量时，您实际上是在将对该对象的引用赋值给新变量。如果对其中一个变量进行更改，则对另一个变量进行的更改也会反映出来。

浅拷贝只复制对象的引用，这意味着对原始对象所做的更改也会反映在浅拷贝对象中。深拷贝复制对象的整个结构，包括属性和嵌套对象。这意味着对原始对象所做的更改不会反映在深拷贝对象中。

一、浅拷贝实现

浅拷贝实现方法有很多种，但最常见的方法是使用 Object.assign() 方法。该方法接受两个参数：目标对象和源对象。它将源对象的所有属性复制到目标对象中，并返回目标对象。

const obj1 = {
  name: 'John',
  age: 30
};

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

obj2.name = 'Mary';

console.log(obj1); // { name: 'John', age: 30 }
console.log(obj2); // { name: 'Mary', age: 30 }

在上面的示例中，我们创建了一个名为 obj1 的对象。然后，我们使用 Object.assign() 方法创建了一个新对象 obj2，并将 obj1 作为源对象。这会将 obj1 的所有属性复制到 obj2 中。然后，我们更改了 obj2 的 name 属性。您可以看到，这不会影响 obj1 的 name 属性。

二、深拷贝实现

深拷贝实现起来比浅拷贝复杂一些。一种常见的方法是使用 JSON.stringify() 和 JSON.parse() 方法。该方法将对象转换为 JSON 字符串，然后将 JSON 字符串解析回对象。

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

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

obj2.name = 'Mary';
obj2.address.street = '456 Elm Street';

console.log(obj1); // { name: 'John', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA', zip: '12345' } }
console.log(obj2); // { name: 'Mary', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }

在上面的示例中，我们创建了一个名为 obj1 的对象。然后，我们使用 JSON.stringify() 方法将 obj1 转换为 JSON 字符串。然后，我们使用 JSON.parse() 方法将 JSON 字符串解析回对象 obj2。这会创建一个 obj1 的深拷贝。然后，我们更改了 obj2 的 name 属性和 address.street 属性。您可以看到，这不会影响 obj1 的 name 属性和 address.street 属性。