一行代码实现纯数据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 相关文章推荐
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python实现合并两个排序的链表
2019/03/03 Python
Python中的类与类型示例详解
2019/07/10 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
植物选择:Botanic Choice
2017/02/15 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014年关工委工作总结
2014/11/17 职场文书
先进党员事迹材料
2014/12/24 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android