前言

在开发过程中，我们经常会遇到需要复制一个对象或数组的情况。在 JavaScript 中，我们可以使用浅拷贝或深拷贝来实现复制功能。浅拷贝只会复制对象或数组的第一层属性，如果属性的值还是对象或数组，那么它们之间的引用关系并不会改变。相反，深拷贝会完全复制对象或数组的所有属性，并创建新的引用关系。 在什么情况下需要使用深拷贝呢？通常来说，当我们希望对象或数组的改变不影响原对象或数组时，就需要使用深拷贝。例如，我们可能希望在处理数据的过程中保留原始数据的副本，或者在修改一个对象的属性时不影响原对象。

定义

在 JavaScript 中，对象和数组都是引用类型，它们的值是存储在内存中的地址，而不是实际的值。当我们复制一个对象或数组时，如果我们只是复制它们的地址，那么原来的对象或数组和新的对象或数组都指向同一个地址，对其中一个对象或数组的修改会影响另一个对象或数组。这种复制方式称为浅拷贝。为了避免这种情况，我们需要进行深拷贝，即复制对象或数组的值，而不是复制地址。

实现

深拷贝的方法有很多种，常见的方法包括使用 `JSON.parse` 和 `JSON.stringify`、使用 lodash 等。

1.使用 JSON.parse 和 JSON.stringify 进行深拷贝的方法非常简单，只需要先将要拷贝的对象或数组使用 JSON.stringify 转化为字符串，然后再使用 JSON.parse 将字符串转回原来的对象或数组即可。

下面是一个简单的示例，展示了如何使用 JSON.parse 和 JSON.stringify 进行深拷贝


const original = { a: 1, b: { c: 2 } };

// 使用 JSON.stringify 将对象转化为字符串，再使用 JSON.parse 将字符串转回对象
const copy = JSON.parse(JSON.stringify(original));

console.log(original === copy); // false
console.log(original.b === copy.b); // false
这个示例中，我们先定义了一个包含嵌套对象的对象 original，然后使用 JSON.parse 和 JSON.stringify 进行深拷贝，得到了新的对象 copy。最后，我们使用 === 运算符比较了两个对象是否相等，以及两个对象的嵌套对象是否相等，发现了两个对象和两个嵌套对象都不相等，说明进行了深拷贝。

 

浅拷贝的实现

浅拷贝是指在复制对象或数组时，只复制它的第一层属性，而不会复制它的属性的值（如果属性的值还是对象或数组的话）。因此，浅拷贝得到的新对象或数组与原对象或数组之间仍然存在引用关系。

在 JavaScript 中，我们可以使用下面几种方法来实现浅拷贝：

  • 使用展开运算符（...）：let newArray = [...oldArray]，let newObject = {...oldObject}
  • 使用 Object.assign() 函数：let newObject = Object.assign({}, oldObject)
  • 使用数组的 slice() 函数或对象的 Object.keys() 函数：let newArray = oldArray.slice()，let newObject = Object.keys(oldObject).reduce((acc, key) => ({...acc, [key]: oldObject[key]}), {})

浅拷贝的实现方法

使用展开运算符（...）：

function shallowClone(obj) { return {...obj}; }

使用 Object.assign() 函数：

function shallowClone(obj) {
  return Object.assign({}, obj);
}

永远年轻，永远热泪盈眶。