javaScript深拷贝和浅拷贝的简单介绍

在了解深拷贝和浅拷贝之前，我们先梳理一下：

JavaScript中，分为基本数据类型（原始值）和复杂类型（对象），同时它们各自的数据类型细分下又有好几种数据类型

基本数据类型

数字Number 字符串String 布尔Boolean Null Undefined Symbols BigInt

基本数据类型在内存当中，是存储在栈Stack

在数据结构当中

• 栈在内存上的分配的空间生命周期很短，当变量使用完毕，方法执行完成就被释放掉，因此在js当中，变量使用完毕之后，基本就被回收了，
• 有一个场景比较例外，闭包的情况下，变量是始终存在内存当中不被释放.
• 栈存储具有先进后出，后进先出的特点: 1，2，3，4，5，6 => 6,5,4,3,2,1

引用数据类型

日期Dete，对象Object，数组Array,方法Function, 正则regex,带键的集合：Maps, Sets, WeakMaps, WeakSets

引用数据类型与堆内存heap的一些关系

• 在JavaScript中，不允许直接访问堆内存中的位置，不能直接操作对象的堆内存空间。
• 对象的引用地址是存在栈内存中，在我们的日常编码过程中，操作对象的时候，读取对象的存在栈内存的引用地址而不是在堆中的对象，引用类型的值都是通过引用访问。

JavaScript中堆内存和栈内存简易示意图例

下面对于对象的操作，都可以参照上图进行思考

浅拷贝-深拷贝

浅拷贝

只是拷贝了某一层的属性，或者某一层，没有全部拷贝到另外的对象上

let userInfo = {
  name: "zhangsan",
  age: "29",
  say: function () {
    console.log("hello");
  },
  child: [
    {
      name: "zhangsan01",
    },
  ],
};

对象解构,只能拷贝第一层对象

// 对象解构...
let info = { ...userInfo };
info.name = "lisi";
info.child.name = "lisi001";
info.say();

console.log("userInfo", userInfo);
console.log("info", info);

userInfo和info中的child.name都改成了---->"lisi001"

Object.assign() 第一层是深拷贝，二级属性后就是浅拷贝

let info = {};
Object.assign(info, userInfo);
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);

JSON.parse(JSON.stringify());

对象可以复制，但是当属性是function时，没有复制到新的对象上，因此在日常的开发过程中，涉及到数组对象，使用JSON.parse(JSON.stringify());还是没问题的

let info = JSON.parse(JSON.stringify(userInfo));
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);

for in，第一层可以拷贝，第二层在修改的时候，还是使用的引用地址，前后的对象都发生了更改

let info = {};
for (let key in userInfo) {
  info[key] = userInfo[key];
}
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);

浅拷贝小结

以上浅拷贝方法，有些拷贝只能拷贝第一层，有些可以拷贝多层，

但是当属性类型是方法时，还是浅拷贝，

因此我们在开发中，使用浅拷贝，需要注意，同时，出了拷贝function，类似正则，date等数据类型没有一一列举，感兴趣的同学可以自己写一些demo，去校验更为复杂和数据类型更丰富的数据。

深拷贝

所有的属性都拷贝到新的对象上

使用递归遍历每一个属性，在递归遍历的时候，针对每一种数据类型处理和拷贝

lodash深拷贝方法，感兴趣的同学，可以去阅读lodash深拷贝的实现源码

文档地址：深拷贝cloneDeep https://www.lodashjs.com/docs/lodash.cloneDeep

更多方法，有待补充

结尾

当我们操作复杂数据类型的时候，都是在操作栈内存Stack的内存地址，指针指向对象在堆内存heap的数据。

传入的对象是使用对象字面量{}创建的对象还是由构造函数生成的对象

如果对象是由构造函数创建出来的，那么是否要拷贝原型链上的属性

如果要拷贝原型链上的属性，那么如果原型链上存在多个同名的属性，保留哪个

针对的数据类型，属性的数据类型，各自的缺陷，适用的业务场景，自己造轮子or使用原生方法，工具类

到此这篇关于javaScript深拷贝和浅拷贝的文章就介绍到这了,更多相关js深拷贝和浅拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

源码地址

码云 https://gitee.com/lewyon/vue-note

githup https://github.com/akari16/vue-note

最新评论