一行代码实现纯数据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 当前日期加(天、周、月、年)
Aug 09 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
js运动事件函数详解
Oct 21 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 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
php 调用远程url的六种方法小结
2009/11/02 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
Node.js模块加载详解
2014/08/16 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
详解python的argpare和click模块小结
2019/03/31 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python内置加密模块用法解析
2019/11/25 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
幼儿园大班教学反思
2014/02/10 职场文书
保安公司服务承诺书
2014/05/28 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
教学质量月活动总结
2015/05/11 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
大队委员竞选稿
2015/11/20 职场文书
python tkinter实现定时关机
2021/04/21 Python
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python