JavaScript 中的浅拷贝和深拷贝

作为 JavaScript 开发者，了解浅拷贝和深拷贝的区别是非常重要的概念。

首先，让我们讨论一下 JavaScript 中的对象是如何工作的。

对象是一种动态数据类型，可以包含键值对的集合，其中每个键对应一个属性，每个值表示属性关联的数据。

对象可以包含各种数据类型，包括数字、字符串、布尔值、数组、其他对象，甚至是函数。

浅拷贝：

浅拷贝是指拷贝的对象与源对象共享相同的引用。简单来说，这两个对象指向内存中的相同地址。因此，当你更改源对象或拷贝时，可能会导致另一个对象也发生变化。

const sourceObj = { name: "Jane", surname: "Doe" }
const copyObj = sourceObj

copyObj.name = "Joe"

console.log(sourceObj) // {name: "Joe", surname: "Doe"}

深拷贝：

相反，深拷贝是指拷贝的对象与源对象不共享相同的引用。因此，源对象的所有属性都将存在于拷贝对象中，但新对象将指向内存中的不同地址。这样，在修改时，两个对象是相互独立的。在 JavaScript 中，我们可以使用 JSON.parse() 和 JSON.stringify() 方法实现深拷贝。

const sourceObj = { name: "Jane", surname: "Doe" }
const copyObj = JSON.parse(JSON.stringify(sourceObj))

copyObj.name = "Joe"

console.log(sourceObj) // {name: "Jane", surname: "Doe"}
console.log(copyObj) // {name: "Joe", surname: "Doe"}

需要注意的是，使用 JSON.parse() 和 JSON.stringify() 进行深拷贝的方法对于包含函数或特殊对象（如 Date）的更复杂对象可能存在一些限制，因此在处理更复杂的数据结构时，开发者通常会使用像 Lodash 这样的专门库或自定义函数来实现深拷贝。

额外注意事项：

1. 不可变性： 浅拷贝和深拷贝通常与不可变性的概念相关联。不可变性有助于在处理数据结构时避免意外的副作用，因为直接修改对象或数组可能导致意外行为。
2. 性能考虑： 深拷贝，特别是使用 JSON.parse() 和 JSON.stringify() 进行深拷贝，在处理大型和复杂对象时可能不如浅拷贝高效。在这种情况下，开发者可能会在性能和深拷贝需求之间进行谨慎平衡。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！