js深拷贝和浅拷贝的方法（js深度拷贝和浅拷贝）



栈与堆

在 JavaScript 中也会将基本类型与对象类型称为值类型与引用类型。这个是因为基本类型中存储的是数据完整的值，而在引用类型中存储的仅是指向数据的一个地址。

在大部分编程语言中，变量会被存放在两个地方，栈（stack）和堆（heap）。在 JavaScript 中栈存放的就是值类型的数据和引用类型的地址，而引用类型真正的数据被存放在堆中。

当我们定义以下变量时，它们在内存中的栈堆中的存在如图所示：

深拷贝与浅拷贝

这导致对于值类型与引用类型复制时会产生不一样的结果，值类型的复制是完全拷贝同一份值，而引用类型是拷贝引用地址。

对于引用（对象）类型来说，这种只是复制对象引用地址被称为浅拷贝（shallow copy），与之对应的，如果在堆中拷贝了一模一样的数据则被称为深拷贝（deep copy）。

将对象数据保存在堆中能大大节省内存空间，如果整个中国的名单保存在变量中，使用栈来保存则每次复制会拷贝整个数据（每次调用函数传参也属于执行了一次复制），内存会根本不够用。

保存在堆中的数据每次复制只是复制一个引用地址，会大大节省内存的使用。

浅拷贝

当我们修改浅拷贝对象内数据时，会造成多个指向此数据地址的变量都受到影响。注意有时这个特性会造成意料之外的问题。

数组也是对象，因此同样存在浅拷贝的特性。

浅拷贝只是一个特性，它也存在好的一面与坏的一面。

假设我们有一个人的对象在代码中有多处使用，这个人改了一个名字，那么其他地方使用这个人的名字时会使用的是新的名字，我们不用修改每个对象的名字。

这是很符合生活场景的，具有现实意义。

深拷贝

深拷贝就是将数据在堆中进行了拷贝的结果，这样对复制过后的对象的操作便不会影响到原对象。

我们再修改 person2，也不会对 person 有任何影响了。

深拷贝一般有以下几种方法：

解构赋值

解构赋值有个问题，只能复制对象内第一层的值，更深一层便无能为力了。

Object.create

Object.create 使用现有的对象来创建一个新的对象。同样的，也只能解决第一层的复制。

详情参考 Object.create - MDN。

注意：Object.create 对于数组的深拷贝不理想。

JSON.parse 和 JSON.stringify

先用 JSON.stringify 将对象序列化成字符串，再用 JSON.parse 解析回来，可以达到深拷贝的效果，并且对于多层对象同样有效。

注意：JSON.parse 和 JSON.stringify 依旧不是完美的，像一些方法或用户自定义的类型则不能有效的拷贝。

structuredClone

structuredClone 是内置的一个方法，对于多层对象也能很好地执行拷贝，但同样对方法或自定义对象无力。

详情请参考 structuredClone - MDN。

对于方法或自定义对象无力无能为力。

自己实现

自己实现的灵活度就很高，根据代码实现不同达到的效果与运行效率也会有所不同。

以下是三眼鸭通过递归实现的一个深拷贝函数，经测试能正确拷贝常见的多层对象、数组、方法。

使用 lodash

lodash 是一个扩展了 JavaScript 中多个类型的功能的一个第三方库。

引用官方介绍：

Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.Lodash’s modular methods are great for:

更多详情参考 lodash 官方文档。

引入 lodash 的方法有很多，以下使用外部链接的方法引入。

总结

使用浅拷贝和深拷贝要取决于当时的场景，三眼鸭总结了以下三个要点：

每日名言

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler 菜鸟写机器能理解的代码，大佬写人能理解的代码。 – Martin Fowler

谢谢你的点赞，三眼鸭祝你编程学习顺利。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/67636.html