一行代码实现纯数据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 URL参数判断,确定菜单样式
May 31 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
PHP实现八皇后算法
2019/05/06 PHP
jQuery live
2009/05/15 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
微信小程序实现美团菜单
2018/06/06 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python正则表达式使用经典实例
2016/06/21 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
行政办公室岗位职责
2014/03/18 职场文书
中学生评语大全
2014/04/18 职场文书
低碳环保口号
2014/06/12 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python