一行代码实现纯数据json对象的深度克隆实现思路


  本文标签:纯数据,json对象,克隆

复制代码 代码如下:

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);

实验结果

从上面的结果中我们发现,确实深度克隆了一个数组 。
对象的克隆
复制代码 代码如下:

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));

实验结果
 
从上面的实验我们发现,这样的方法也可以克隆对象 。
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));

实验结果
 
从上面的实验结果中可以看出,非纯数据的函数不能参与到转换中,它被“鄙视”了 。
所以,这种一句话深度克隆的方法只针对于纯数据,这个是开发中需要注意的地方 。