深拷贝总结

JSON.parse(JSON.stringify(obj))

这行代码的运行过程,就是利用 JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反序列化(还原)js对象;序列化的作用是存储和传输。(对象本身存储的是一个地址映射,如果断电,对象将不存在,所以要将对象的内容转换成字符串的形式再保存在磁盘上)
不过,这种实现深拷贝的方法有局限性,它只适用于一般数据的拷贝(对象、数组),有以下情况需要注意:

1.如果json里面有时间对象,则序列化结果:时间对象=>字符串的形式;

{let obj = {age: 18,date: new Date()};let objCopy = JSON.parse(JSON.stringify(obj));console.log('obj', obj);console.log('objCopy', objCopy);console.log(typeof obj.date); // objectconsole.log(typeof objCopy.date); // string
}

image.png

2.如果json里有RegExp、Error对象,则序列化的结果将只得到空对象 RegExp、Error => {};

{let obj = {age: 18,reg: new RegExp('\w+'),err: new Error('error message')};let objCopy = JSON.parse(JSON.stringify(obj));console.log('obj', obj);console.log('objCopy', objCopy);
}

image.png

3.如果json里有 function,undefined,则序列化的结果会把 function,undefined 丢失;

{let obj = {age: 18,fn: function () {console.log('fn');},hh: undefined};let objCopy = JSON.parse(JSON.stringify(obj));console.log('obj', obj);console.log('objCopy', objCopy);
}

image.png

4.如果json里有NaN、Infinity和-Infinity,则序列化的结果会变成null;

{let obj = {age: 18,hh: NaN,isInfinite: 1.7976931348623157E+10308,minusInfinity: -1.7976931348623157E+10308};let objCopy = JSON.parse(JSON.stringify(obj));console.log('obj', obj);console.log('objCopy', objCopy);
}

image.png

5.如果json里有对象是由构造函数生成的,则序列化的结果会丢弃对象的 constructor;

{function Person(name) {this.name = name;}let obj = {age: 18,p1: new Person('lxcan')};let objCopy = JSON.parse(JSON.stringify(obj));console.log('obj', obj);console.log('objCopy', objCopy);console.log(obj.p1.__proto__.constructor === Person); // trueconsole.log(objCopy.p1.__proto__.constructor === Object); // true
}

image.png

6.如果对象中存在循环引用的情况也无法实现深拷贝

{let obj = {age: 18};obj.obj = obj;let objCopy = JSON.parse(JSON.stringify(obj));console.log('obj', obj);console.log('objCopy', objCopy);
}

image.png

以上,如果拷贝的对象不涉及上面的情况,可以使用 JSON.parse(JSON.stringify(obj)) 实现深拷贝。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/618177.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

InnoDB的使用限制有哪些

InnoDB的使用限制有哪些 以下是一些使用InnoDB在使用中的限制,包含InnoDb表,索引,表空间,和InnoDB存储引擎其他方面的各种限制。 一个表最多包含1017列字段,虚拟生成的列也包含在这个限制中。 每个表的元数据需要在…

Python求利率

要求 编写程序计算在给定利率、指定年数的情况下投资的未来值。这个计算公式如下。 使用文本域输入投资额、年份和利率。当用户单击“calculate”按钮时,在文本域中显示未来的投资值,如图所示。 代码实现 import tkinter as tkdef calculate():amou…

Vol.46 一个在线小游戏网站,每个月50万访问量

大家好,我是欧维Ove,今天要给大家分享的网站是:小霸王,这是一个可以在线玩小霸王游戏的网站,网址是:小霸王,其樂無窮。紅白機,FC線上遊戲,街機遊戲,街機線上&…

全栈的自我修养 ———— react实现滑动验证

实现滑动验证 展示依赖实现不借助create-puzzle借助create-puzzle 展示 依赖 npm install rc-slider-captcha npm install create-puzzleapi地址 实现 不借助create-puzzle 需要准备两张图片一个是核验图形,一个是原图------> 这个方法小编试了后感觉比较麻烦…

Transformer - 注意⼒机制 Attention 中的 Q, K, V 解释(2)

Transformer - 注意⼒机制 Attention 中的 Q, K, V 解释(2) flyfish Transformer - 注意⼒机制 Scaled Dot-Product Attention 计算过程 Transformer - 注意⼒机制 代码实现 Transformer - 注意⼒机制 Scaled Dot-Product Attention不同的代码比较 Tran…

CSS快速入门

目录 一、CSS介绍 1、什么是CSS? ​编辑2、基本语法规范 3、引入方式 4、规范 二、CSS选择器 1、标签选择器 2、类(class)选择器 3、id选择器 4、通配符选择器 5、复合选择器 三、常用CSS 1、color 2、font-size 3、border 4…

WPS基础使用

个人笔记(整理不易,有帮助,收藏点赞评论,爱你们!!!你的支持是我写作的动力) 笔记目录:学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔…

前端知识学习笔记-六(vue)

简介 Vue是前端优秀框架是一套用于构建用户界面的渐进式框架 Vue优点 Vue是目前前端最火的框架之一 Vue是目前企业技术栈中要求的知识点 vue可以提升开发体验 Vue学习难度较低 Vue开发前准备 一、nodejs环境 Nodejs简介 Nodejs诞生于2009年,主攻服务器方向&#x…

【Spring Boot】深入解密Spring Boot日志:最佳实践与策略解析

💓 博客主页:从零开始的-CodeNinja之路 ⏩ 收录文章:【Spring Boot】深入解密Spring Boot日志:最佳实践与策略解析 🎉欢迎大家点赞👍评论📝收藏⭐文章 目录 Spring Boot 日志一. 日志的概念?…

2024年少儿编程赛事时间表整理

01 信息学奥赛路线比赛 来源:https://www.noi.cn/ 首先,信息学奥赛是升学最有帮助的一个赛事了,从CSP-J/P开始到NOIP再到最后的NOI,对科技特长生、高考加分都有较大裨益,但相对难度也是最大的。 小学可以参加的是CSP-J比赛,但是和初中生一起考试,不占优势,胜在早入门…

【matlab】如何解决打开缓慢问题(如何让matlab在十几秒内打开)

【matlab】如何解决打开缓慢问题(如何让matlab在十几秒内打开) 找到我们解压缩时Crack中的license_standalone.lic文件,将其拷贝 在安装matlab的路径下新建一个文件,粘贴上面的license_standalone.lic文件 在桌面鼠标移动到matl…

如何使用setup封装表格组件(Vue 3 + Element Plus)

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…