一行代码实现纯数据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 相关文章推荐
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
JavaScript判断浏览器版本的方法
Nov 03 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
Python中无限元素列表的实现方法
2014/08/18 Python
Python爬取读者并制作成PDF
2015/03/10 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
生物化工专业个人自荐信
2013/09/26 职场文书
培训专员岗位职责
2014/02/26 职场文书
法人代表委托书
2014/04/04 职场文书
结婚保证书范文
2014/04/29 职场文书
党员承诺践诺书
2014/05/20 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
Redis性能监控的实现
2021/07/09 Redis
实操Python爬取觅知网素材图片示例
2021/11/27 Python