IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 关于JavaScript的深浅拷贝详解 -> 正文阅读

[JavaScript知识库]关于JavaScript的深浅拷贝详解

关于JavaScript的深浅拷贝详解

关于浅拷贝的方法:
方法一:object.assign
下述JavaScript的代码使用object.assign来简单理解一下浅拷贝:

let obj1 = {a:{b:1},sym:Symbol(1)};
Object.defineProperty(obj1,'innumerable',{
	value:'不可枚举属性',
	enumerable:false
});
let obj2 = {};
Object.assign(obj2,obj1)
obj1.a.b = 2;
console.log('obj1',obj1);
console.log('obj2',obj2);

上述代码块就是先使用了let方法创建了obj1数组和Symbol类型的变量,然后使用Object.defineProperty方法,通俗来说这个方法就是修改obj1中的量,然后命名了一个obj2的空数组,使用object.assign来实现obj1对obj2的拷贝操作。这是上述代码的含义。并且可以理解到上述代码中前者的属性值改变后者也会跟着改变。
然后打印之后在控制台得到的结果如下:
在这里插入图片描述
第二种方法为扩展运算符方法:
语法为:let.cloneobj { …obj};
演示代码如下:
在这里插入图片描述
第三个方法:concat

在这里插入图片描述
第四个方法:slice拷贝数组(仅仅针对数组类型)
语法为:arr.slice(begin,end);

从上述代码可以看出浅拷贝的一些弊端,如:再多层嵌套中只能浅拷贝第一层。
下面是自己动手实践一个浅拷贝的内容:代码如下:
在这里插入图片描述
深拷贝的原理与实现:
将一个对象完整的从内存中拷贝出来给新的对象,并从内存中开辟一个新的空间来存放新的对象且新的对象进行修改不会修改元对象的值,二者实现真正的分离

深拷贝的实现1:JSON.stringfy这是开发过程中最简单的一种深拷贝方法
下列是代码实现:
在这里插入图片描述
使用JSON.stringfy所需要注意的一些问题:
在这里插入图片描述
你可以尝试亲自动手执行一遍
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
执行结果如上:
第二种深拷贝复制(手写递归):
在这里插入图片描述
在这里插入图片描述
三点隐含的问题:
在这里插入图片描述
针对能够遍历对象的不可枚举类型以及Symbol类型我们可以使用Reflect.ownkeys方法
利用weakmap 类型作为hash表,因为weakmap是弱引用类型可以有效防止内存泄漏,作为检测循环引用很有帮助,如果存在循环,则引用直接返回weakmap存储的值。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-07 13:45:45  更:2021-10-07 13:47:29 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/19 2:03:40-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码