一行代码实现纯数据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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
5 cool javascript apps
2007/03/24 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
React中this丢失的四种解决方法
2019/03/12 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Python实现12306火车票抢票系统
2019/07/04 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
妇科医生自荐信
2013/11/05 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
2014年体育教学工作总结
2014/12/09 职场文书