一行代码实现纯数据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获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
js返回顶部实例分享
Dec 21 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
JS验证码实现代码
Sep 14 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
js实现弹框效果
Mar 24 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
javascript 日期常用的方法
2009/11/11 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
javascript实现时钟动画
2020/12/03 Javascript
详解python中requirements.txt的一切
2017/03/03 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
python匿名函数用法实例分析
2019/08/03 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
教师申诉制度
2014/01/29 职场文书
《日月潭》教学反思
2014/02/28 职场文书
出生公证委托书
2014/04/03 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
音乐教师求职信范文
2015/03/20 职场文书
葬礼主持词
2015/07/02 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
Elasticsearch 数据类型及管理
2022/04/19 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python