一行代码实现纯数据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之水平横向滚动歌词同步的应用
May 07 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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 Session 变量的使用方法详解与实例代码
2013/09/11 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python如何统计序列中元素
2020/07/31 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python常用函数与用法示例
2019/07/02 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
优秀求职信范文分享
2013/12/19 职场文书
新年寄语大全
2014/04/12 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
工作报告范文
2019/06/20 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL