`JSON.parse(JSON.stringfy())`进行深拷贝方法小结

2019年5月23日 156次阅读

《`JSON.parse(JSON.stringfy())`进行深拷贝方法小结》 TopGear经典画面

浅拷贝与深拷贝

  • 针对对象

深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的，String,Number等简单类型不存在深拷贝。

  • 浅拷贝

因为浅拷贝只会将对象的各个属性进行依次复制，并不会进行递归复制。在JavaScript中，对于Object和Array这类引用类型值，当从一个变量向另一个变量复制引用类型值时，这个值的副本其实是一个指针，两个变量指向同一个堆对象，改变其中一个变量，另一个也会受到影响。所以浅拷贝会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址，当修改obj.arr的值时，shallowObj.arr的值同样会被修改，大概的示意图如下：

《`JSON.parse(JSON.stringfy())`进行深拷贝方法小结》

  • 深拷贝

而深拷贝则不同，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。当修改obj.arr的值时，shallowObj.arr的值不会被修改，仍然为原值，如下图：

《`JSON.parse(JSON.stringfy())`进行深拷贝方法小结》

JSON.parse()和JSON.stringfy()

  • JSON.parse()就是将JSON字符串解析成字符串描述的JavaScript值或对象，例如：
JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
  • JSON.stringfy()是JSON.parse()的反义，就是将一个JavaScript值(对象或者数组)转换为一个JSON字符串，例如：
JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'

JSON.parse()官方解释
JSON.stringfy()官方解释

深拷贝方法——JSON.parse(JSON.stringfy())

  • 用法

JOSN对象中的stringify可以把一个js对象序列化为一个JSON字符串，parse可以把JSON字符串反序列化为一个js对象，通过这两个方法，也可以实现对象的深复制。

function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });
  • 弊端

用法简单，然而使用这种方法会有一些隐藏的坑：因为在序列化JavaScript对象时，所有函数和原型成员会被有意忽略。
通俗点说，JSON.parse(JSON.stringfy(X))，其中X只能是Number, String, Boolean, Array, 扁平对象，即那些能够被 JSON 直接表示的数据结构。

深拷贝其他方法文章拓展

THE END

点赞