对象的复制方式：浅合并、深合并、浅拷贝、深拷贝

前端

2023-12-13 07:00:02

引言

在 JavaScript 中，对象是一种强大的数据结构，可用于存储和组织复杂数据。理解对象的复制方式对于编写健壮且高效的应用程序至关重要。本文将深入探讨对象的浅合并、深合并、浅拷贝和深拷贝之间的差异，并提供清晰的示例来说明每种方法。

JavaScript 中的对象复制

浅拷贝

浅拷贝会创建原始对象的副本，但只复制对象的顶层属性。这意味着更改副本中的属性不会影响原始对象，反之亦然。

深拷贝

与浅拷贝不同，深拷贝会递归地复制原始对象及其所有嵌套属性。更改副本中的属性不会影响原始对象，反之亦然。

浅合并

浅合并将两个或多个对象的顶层属性合并到一个新对象中。与浅拷贝类似，更改新对象中的属性不会影响原始对象，反之亦然。

深合并

深合并会递归地合并两个或多个对象的属性，包括嵌套属性。更改新对象中的属性不会影响原始对象，反之亦然。

示例

为了更好地理解这些概念，让我们考虑以下示例：

const originalObject = {
  name: 'John',
  address: {
    street: '123 Main Street',
  },
};

const shallowCopy = Object.assign({}, originalObject);
const deepCopy = JSON.parse(JSON.stringify(originalObject));

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

console.log(originalObject);
// { name: 'John', address: { street: '123 Main Street' } }
console.log(shallowCopy);
// { name: 'Jane', address: { street: '123 Main Street' } }
console.log(deepCopy);
// { name: 'John', address: { street: '456 Elm Street' } }