一行代码实现纯数据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的倒计时实现代码
May 30 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python回调函数中使用多线程的方法
2017/12/25 Python
用Eclipse写python程序
2018/02/10 Python
Python3中的json模块使用详解
2018/05/05 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
keras中的backend.clip用法
2020/05/22 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
尼克松手表官网:Nixon手表
2019/03/17 全球购物
学校三八妇女节活动情况总结
2014/03/09 职场文书
货车司机岗位职责
2014/03/18 职场文书
师范生求职自荐信
2014/06/14 职场文书
工作失职检讨书
2015/01/26 职场文书
消费者理赔投诉书
2015/07/02 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL