对象深拷贝和浅拷贝解析

前端

2023-10-18 15:55:08

对象拷贝概述

在 JavaScript 中，对象是一种数据类型，用于存储一组键值对。对象可以包含各种数据类型的值，包括字符串、数字、布尔值、数组和对象本身。

对象拷贝是创建新对象并将其值设置为另一个对象的副本的过程。有两种主要类型的对象拷贝：浅拷贝和深拷贝。

浅拷贝

浅拷贝是创建一个新对象，并将其值设置为另一个对象的引用。这意味着新对象和原始对象指向相同的内存位置。对新对象所做的任何更改都会反映在原始对象上，反之亦然。

深拷贝

深拷贝是创建一个新对象，并将其值设置为另一个对象的副本。这意味着新对象和原始对象指向不同的内存位置。对新对象所做的任何更改都不会反映在原始对象上，反之亦然。

如何实现深拷贝和浅拷贝

在 JavaScript 中，有几种方法可以实现深拷贝和浅拷贝。最常见的方法是使用 Object.assign() 方法和 JSON.parse() 方法。

使用 `Object.assign()` 方法实现浅拷贝

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

const shallowCopy = Object.assign({}, originalObject);

shallowCopy.name = 'Jane Doe';
shallowCopy.address.street = '456 Elm Street';

console.log(originalObject);
// { name: 'John Doe', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }

console.log(shallowCopy);
// { name: 'Jane Doe', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }

在上面的示例中，我们使用 Object.assign() 方法将 originalObject 的所有属性复制到 shallowCopy 对象中。这创建了 originalObject 的浅拷贝，这意味着 shallowCopy 对象和 originalObject 对象指向相同的内存位置。对 shallowCopy 对象所做的任何更改都会反映在 originalObject 对象上，反之亦然。

使用 `JSON.parse()` 方法实现深拷贝

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

const deepCopy = JSON.parse(JSON.stringify(originalObject));

deepCopy.name = 'Jane Doe';
deepCopy.address.street = '456 Elm Street';

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

console.log(deepCopy);
// { name: 'Jane Doe', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }

在上面的示例中，我们使用 JSON.stringify() 方法将 originalObject 对象转换为 JSON 字符串。然后，我们使用 JSON.parse() 方法将 JSON 字符串解析回一个 JavaScript 对象。这创建了 originalObject 的深拷贝，这意味着 deepCopy 对象和 originalObject 对象指向不同的内存位置。对 deepCopy 对象所做的任何更改都不会反映在 originalObject 对象上，反之亦然。