如何实现数组的深拷贝和浅拷贝?

2018-03-26 本文已影响9人风流司郎中

1.背景介绍

1.深复制和浅复制

在JavaScript中，对于Object和Array这类引用类型值，他的复制有两种情况：深复制、浅复制。

浅复制：浅复制是复制引用，复制后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响
深复制：深复制不是简单的复制引用，而是在堆中重新分配内存，并且把源对象实例的所有属性都进行新建复制，以保证深复制的对象的引用图不包含任何原有对象或对象图上的任何对象，复制后的对象与原来的对象是完全隔离的

image.png

2.知识剖析

浅拷贝

Js的数据类型分为两种，基本类型和引用类型
基本类型:是指Number、String、Boolean、null、undefined
引用类型:是指对象、数组等，就是像这样的东西
{ name: 'Larry', skill: 'Node.js' }
引用类型跟基本类型型別最大的区别就在于他们的传值方式

基本类型是传 VALUE，像是这样：

    var a = 10;
    var b = a;
    b = 20;

    console.log(a); // 10
    console.log(b); // 20

在修改b时并不会改到a

但引用类型不同，引用类型传的是引用指针

      var array1 = [0,1,2,3];
      var array2 = array1;
      array2[0] = 100;

      console.log(array1); // [100,1,2,3] <-- 数组第一位 被改到了
      console.log(array2); // [100,1,2,3]

复制一份array1叫做array2
然後把array2[0]改成100
但卻不小心改到array1[0]
因为他们根本就是同一个对象
这就是所谓的浅复制

为了避免这种错误发生就要写成这样：

 var array1 = [0,1,2,3];
 var array2 = [array1[0],array1[1],array1[2],array1[3]];
 array2[0] = 100;

 console.log(array1); // [0,1,2,3] <-- 数组第一位没被改到了
 console.log(array2); // [100,1,2,3]

这就是深拷贝，改变复制后的值并不会影响之前的值

image.png

如何实现数组的深拷贝？

一、Object.assign

    var array1 = [0,1,2,3];
    var array2 = Object.assign([], array1);
    array2[0] = 100;

    console.log(array1); // [0,1,2,3] <-- 沒被改到
    console.log(array2); // [100,1,2,3]

Object.assign是 ES6 的新函式可以实现跟上面一样的效果

Object.assign([], obj1)的意思是先建议一个对象（数组）[] 接著把array1中所有的属性复制过去所以array2会长得跟array1一样，这时候再修改array2[0]也不會影响array[1] 因为Object.assign跟我们手动复制的效果相同所以一样只能处理深度只有一层的对象沒办法做到真正的 Deep Copy 不过如果要复制的对象只有一层的話可以考虑使用他。

二、Jq的$.map和$.extend

     var x = [{b:0},1,2,3];
     var b=Object.assign([],x);
     b[0].b=2;
     console.log(x[0].b);
     console.log(b[0].b);

     var y = $.map(x,function (obj) {
           return $.extend(true,{},obj)//深复制
      });
     y[0].b=1;
     console.log(x[0].b);
     console.log(y[0].b);

使用jq的方法可以实现深复制，无论数组里面嵌套了几层都可以深复制出来

3.常见问题

除了以上方法还有其他深复制数组的方法吗？

4.解决办法

JSON转换的方法

 var x = [{b:0},1,2,3];
 function jsonClone(obj) {
       return JSON.parse(JSON.stringify(obj));
 }
 var clone = jsonClone(x);
 clone[0].b=2
 console.log(x[0].b)
 console.log(clone[0].b)

5.编码实战

6.扩展思考

使用JSON深复制数组的方法有哪些缺点？
答：Json方法深复制的缺点：Json的方法只能用于引用类型中的Number, String, Boolean, Array, 扁平对象，对于像function这种对象无法复制

7.参考文献：

参考一： [Javascript] 關於 JS 中的淺拷貝和深拷貝

参考二：深入剖析 JavaScript 的深复制