一行代码实现纯数据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 相关文章推荐
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
Javascript闭包实例详解
Nov 29 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 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面向对象 字段的声明与使用
2012/06/14 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
python提取字典key列表的方法
2015/07/11 Python
Python ftp上传文件
2016/02/13 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Python Django view 两种return的实现方式
2020/03/16 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
化妆品活动策划方案
2014/05/23 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
小学班主任工作随笔
2015/08/15 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
python 如何在list中找Topk的数值和索引
2021/05/20 Python
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers