一行代码实现纯数据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设置按钮的disabled属性的实现代码
Nov 28 Javascript
Javascript调用C#代码
Jan 17 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
React实现动效弹窗组件
Jun 21 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
德生9700DX电路分析
2021/03/02 无线电
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python编程嵌套函数实例代码
2018/02/11 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
自学python的建议和周期预算
2019/01/30 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
关于python多重赋值的小问题
2019/04/17 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
简约控的天堂:The Undone
2016/12/21 全球购物
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
JAVA和C++的区别
2013/10/06 面试题
Linux的文件类型
2012/03/07 面试题
实习生自荐信范文
2013/11/13 职场文书
推荐信模板
2014/05/09 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang