巧用深浅拷贝，轻松掌控JavaScript对象的世界

2024-01-05 09:52:14

深入浅出，理解深拷贝和浅拷贝

在JavaScript中，对象是一种复杂的数据类型，它可以存储各种各样的数据，包括基本数据类型（如字符串、数字等）和引用类型（如数组、对象等）。当您对一个对象进行赋值时，JavaScript会根据对象的类型决定是进行深拷贝还是浅拷贝。

浅拷贝： 当您对一个对象进行浅拷贝时，JavaScript只会复制该对象的属性值，而不会复制属性值所指向的对象。这意味着，如果属性值是一个对象，浅拷贝后的对象将与原始对象共享该属性值所指向的对象。

深拷贝： 当您对一个对象进行深拷贝时，JavaScript会复制该对象的属性值以及所有属性值所指向的对象。这意味着，深拷贝后的对象将完全独立于原始对象，不会共享任何属性值所指向的对象。

JavaScript中深拷贝的实现

JavaScript中有多种方法可以实现深拷贝，最常用的方法是使用JSON.parse()和JSON.stringify()。

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'New York',
    state: 'NY',
  },
};

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

在上面的代码中，我们首先使用JSON.stringify()将原始对象转换为JSON字符串。然后，我们使用JSON.parse()将JSON字符串解析为一个新的对象。这个新的对象就是原始对象的深拷贝。

JavaScript中浅拷贝的实现

JavaScript中有多种方法可以实现浅拷贝，最常用的方法是使用对象扩展运算符（...）。

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'New York',
    state: 'NY',
  },
};

const shallowCopyObject = { ...originalObject };

在上面的代码中，我们使用对象扩展运算符将原始对象的属性值复制到一个新的对象中。这个新的对象就是原始对象的浅拷贝。