JS实现Deep Copy避免共享内存引用的方法详解

2023-11-14 17:49:16

引言

在JavaScript中，当您将一个对象分配给另一个变量时，您实际上只是创建了对该对象的引用。这意味着如果您对该对象进行任何更改，这些更改将反映在引用该对象的任何变量中。这被称为浅拷贝。

有时，您可能希望创建一个对象的副本，以便您可以对副本进行更改，而不会影响原始对象。这称为深度拷贝。

使用JavaScript实现Deep Copy

在JavaScript中实现深度拷贝有几种方法。一种方法是使用JSON.parse()和JSON.stringify()方法。

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

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

copyObject.name = 'Jane';
copyObject.address.city = 'New York';

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

console.log(copyObject);
// 输出：{ name: 'Jane', age: 30, address: { street: '123 Main Street', city: 'New York', state: 'CA' } }

此方法将创建一个原始对象的深度副本。这意味着副本中的任何更改都不会影响原始对象。

避免共享内存引用的方法

在某些情况下，您可能希望创建一个对象的副本，但仍希望共享原始对象中数组或对象的内存引用。这可以通过使用Object.assign()方法来实现。

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

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

copyObject.name = 'Jane';
copyObject.address.city = 'New York';

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

console.log(copyObject);
// 输出：{ name: 'Jane', age: 30, address: { street: '123 Main Street', city: 'New York', state: 'CA' } }