一行代码实现纯数据json对象的深度克隆实现思路


Posted in Javascript onJanuary 09, 2013
var dataObjCloned=JSON.parse(JSON.stringify( dataObj ))

这是昨天晚上从大城小胖的微博上看到的,当时很感兴趣,就mark了下。
今天整理了下资料,分析下为什么一句话可以实现纯数据json对象的深度克隆。
1.JSON.stringify函数
将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串。 
JSON.stringify(value [, replacer] [, space]) 
参数 
value 
必需。 要转换的 JavaScript 值(通常为对象或数组)。 
replacer 
可选。 转换结果的函数或数组。 
如果 replacer 为一个函数,则 JSON.stringify 会调用该函数,并传入每个成员的键和值。 使用返回值而不是原始值。 如果此函数返回 undefined,则排除成员。 根对象的键是一个空字符串:""。 
如果 replacer 为一个数组,则仅转换该数组中具有键值的成员。 成员的转换顺序与键在数组中的顺序一样。 当 value 参数也为数组时,将忽略 replacer 数组。 
space 
可选。 向返回值 JSON 文本添加缩进、空白和换行符以使其更易于读取。 
如果省略 space,则将生成返回值文本,而没有任何额外空白。 
如果 space 为一个数字,则返回值文本在每个级别缩进指定数目的空格。 如果 space 大于 10,则文本缩进 10 个空格。 
如果 space 是非空字符串(例如“\t”),则返回值文本在每个级别中缩进字符串中的字符数。 
如果 space 是长度大于 10 个字符的字符串,则使用前 10 个字符。 
返回值 
一个包含 JSON 文本的字符串。

从上面的介绍可以看出这个函数把一个对象或数组转换成了一个json字符串。
2.JSON.parse函数
将 JavaScript 对象表示法 (Json) 字符串转换为对象。 
JSON.parse(text [, reviver]) 
参数 
text 
必需。 一个有效的 JSON 字符串。 
reviver 
可选。 一个转换结果的函数。 将为对象的每个成员调用此函数。 如果成员包含嵌套对象,则先于父对象转换嵌套对象。 对于每个成员,会发生以下情况: 
•如果 reviver 返回一个有效值,则成员值将替换为转换后的值。 
•如果 reviver 返回它接收的相同值,则不修改成员值。 
•如果 reviver 返回 null 或 undefined,则删除成员。 
返回值 
一个对象或数组。

从上面的介绍可以看出这个函数把一个json字符串转换成了一个对象或数组。
3.示例
数组的克隆:
var obj = [1,2,[3,4,5]]; 
var objCloned = JSON.parse(JSON.stringify(obj)); 
console.log(obj); 
console.log(JSON.stringify(obj)); 
console.log(objCloned); 
objCloned[0] = 6; 
console.log(obj); 
console.log(objCloned);

实验结果
一行代码实现纯数据json对象的深度克隆实现思路
从上面的结果中我们发现,确实深度克隆了一个数组。
对象的克隆
var obj = {name:'rey',info:{location:'beijing',age:'28'}}; 
var objCloned = JSON.parse(JSON.stringify(obj)); 
console.log(obj); 
console.log(JSON.stringify(obj)); 
console.log(objCloned); 
console.log(JSON.stringify(objCloned)); 
objCloned.name = 'luopan'; 
console.log(obj); 
console.log(JSON.stringify(obj)); 
console.log(objCloned); 
console.log(JSON.stringify(objCloned));

实验结果
一行代码实现纯数据json对象的深度克隆实现思路 
从上面的实验我们发现,这样的方法也可以克隆对象。
4.但是上面所有的实验都是针对纯数据的,就是说,这种方法只在纯数据的数组或者对象克隆中有效。
非纯数据的实验
var obj = {name:'rey',info:{location:'beijing',age:'28'},hello:function(){console.log('hello world!');}}; 
var objCloned = JSON.parse(JSON.stringify(obj)); 
console.log(obj); 
console.log(JSON.stringify(obj)); 
console.log(objCloned); 
console.log(JSON.stringify(objCloned)); 
objCloned.name = 'luopan'; 
console.log(obj); 
console.log(JSON.stringify(obj)); 
console.log(objCloned); 
console.log(JSON.stringify(objCloned));

实验结果
一行代码实现纯数据json对象的深度克隆实现思路 
从上面的实验结果中可以看出,非纯数据的函数不能参与到转换中,它被“鄙视”了。
所以,这种一句话深度克隆的方法只针对于纯数据,这个是开发中需要注意的地方。
Javascript 相关文章推荐
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
JS检测图片大小的实例
Aug 21 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
如何编写jquery插件
Mar 29 jQuery
vue项目常用组件和框架结构介绍
Dec 24 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 #Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 #Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 #Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 #Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 #Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 #Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 #Javascript
You might like
桌面中心(三)修改数据库
2006/10/09 PHP
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP数组实例详解
2016/06/26 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
Java基础知识面试题
2014/03/25 面试题
实习自荐信
2013/10/13 职场文书
医院后勤自我鉴定
2013/10/13 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
保险内勤岗位职责
2014/04/05 职场文书
求职教师自荐书
2014/06/19 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
工程部经理岗位职责
2015/02/02 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android