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 相关文章推荐
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
Vue vee-validate插件的简单使用
Jun 22 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
学习PHP session的传递方式
2016/06/15 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
js 页面输出值
2008/11/30 Javascript
一句话JavaScript表单验证代码
2009/08/02 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
Python单例模式实例分析
2015/01/14 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python中kmeans聚类实现代码
2018/02/23 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
应届生自荐信
2014/06/30 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL