JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析


Posted in Javascript onMarch 06, 2019

本文实例讲述了JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能。分享给大家供大家参考,具体如下:

根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系。

测试例子:

var test={
  a:"ss",
  b:"dd",
  c:[
    {dd:"css",ee:"cdd"},
    {mm:"ff",nn:"ee"}
  ]
};
var test1 = JSON.parse(JSON.stringify(test));//拷贝数组,注意这行的拷贝方法
console.log(test);
console.log(test1);
test1.c[0].dd="change"; //改变test1的c属性对象的d属性
console.log(test); //不影响test
console.log(test1);

测试结果:

JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

根据测试结果,我们可以看到,test1已经从test复制一份,并且test1改变其中属性的值时,对原来的对象test没有造成影响。

JSON.parse(),JSON.stringify()兼容性问题

可以通过为IE7以及IE7以下版本的IE浏览器引入json2.js,使用json2.js来解决JSON的兼容性问题

<!--[if lt IE 7]>
<script src="具体放路径/json2.js"></script> 
<![endif]-->

json2.js的github地址为:https://github.com/douglascrockford/JSON-js

好了,到这里就实现了,使用JSON.parse(),JSON.stringify()对对象的深拷贝~~

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
详解javascript遍历方式
Nov 11 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 #Javascript
JS实现数组深拷贝的方法分析
Mar 06 #Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 #Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 #Javascript
微信小程序性能优化之checkSession的使用
Mar 06 #Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 #Javascript
You might like
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
简单了解python的break、continue、pass
2019/07/08 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
python模拟斗地主发牌
2020/04/22 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
《燕子》教学反思
2014/02/18 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
校运会班级霸气口号
2015/12/24 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Go语言并发编程 sync.Once
2021/10/16 Golang