一行代码实现纯数据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表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
React Native登录之指纹登录篇的示例代码
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
PHP 中的类
2006/10/09 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
手把手教你如何编译打包video.js
2020/12/09 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
python基础教程项目二之画幅好画
2018/04/02 Python
TensorFlow损失函数专题详解
2018/04/26 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python3 批量扫描端口的例子
2019/07/25 Python
python系列 文件操作的代码
2019/10/06 Python
virtualenv介绍及简明教程
2020/06/23 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
岗位职责的定义
2013/11/10 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
大雁塔英文导游词
2015/02/10 职场文书
公司承诺书格式范文
2015/04/28 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js