js复制数组的问题（浅复制和深复制）

男娘i 2021-09-24 17:22 307阅读 0赞

首先说两个概念：

浅度克隆：原始类型为值传递，对象类型仍为引用传递。

深度克隆：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。

这里又引出两个概念，值传递，引用传递。这里可以参考Java的基本类型和对象类型的使用，Java基本类型复制时可直接复制，副本变量的改变并不会改变被复制的变量，这时复制的是值，而对象简单的复制时，修改副本变量会影响到被复制的变量，这时复制的是对象的引用，js和Java也类似，值传递，引用传递也是如此。

先看代码：

1.引用传递，复制的是a的引用，修改b会影响a

//引用传递，复制的是a的引用，修改b会影响a
    var a = [1,2,3];
    var b = a;
    b[0] = 2;
    console.log(a);    //[ 2, 2, 3 ]
    console.log(b);    //[ 2, 2, 3 ]

2.浅复制，这时修改b，并不会影响到a。(concat函数返回一个全新的数组)

//浅复制，这时修改b，并不会影响到a。
    var a = [1,2,3];
    var b = [].concat(a);
    b[0] = 2;
    console.log(a);    //[ 1, 2, 3 ]
    console.log(b);    //[ 2, 2, 3 ]

3.浅复制存在的问题，使用concat()不在起作用，由于concat()复制时只复制了数组中所含对象的引用，所以复制的对象实际是一个对象，因为从本质上讲，a和b是两个独立的数组，但是，这时数组中的对象却是同一个对象

//浅复制存在的问题
    var a = [{id:1,name:'a'},'array a'];
    var b = [].concat(a);
    b[0].id = '2';
    b[0].name = 'b';
    b[1] = 'array b';
    console.log(a);    //[{ id: "2", name: "b" }, "array a" ]
    console.log(b);    //[{ id: "2", name: "b" }, "array b" ]

4.深度复制来解决问题！

方法一：使用JSON来解决问题，原理很简单，先转化为字符串，在转换成数组，经过这样的转换，自然变为了两个完全独立的数组

//使用JSON来解决问题，原理很简单，先转化为字符串，在转换成数组，经过这样的转换，自然变为了两个完全独立的数组！
    var a = [{id:1,name:'a'},'array a'];
    var b = JSON.parse(JSON.stringify(a));
    b[0].id = '2';
    b[0].name = 'b';
    b[1] = 'array b';
    console.log(a);    //[{ id: "1", name: "a" }, "array a" ]
    console.log(b);    //[{ id: "2", name: "b" }, "array b" ]

方法二：使用jQuery的$.extend()方法，深度复制数组！   其中，第一个参数表示是否使用深度复制，默认false，第二个-第n个参数表示需要合并的对象，合并后的值存储在第二参数内！参数合并可以是数组也可以是对象。

//使用jQuery的$.extend()方法，深度复制数组！
    var a = [{id:1,name:'a'},'array a'];
    var b = $.extend(true,[],a);
    b[0].id = '2';
    b[0].name = 'b';
    b[1] = 'array b';
    console.log(a);    //[{ id: "1", name: "a" }, "array a" ]
    console.log(b);    //[{ id: "2", name: "b" }, "array b" ]

知道了原理，你也可以手动实现！方法有多种，我推荐$.extend()，因为$.extend()是jQuery所提供的方法，已经可以达到深度复制的目的，而且相对而言，这种方法更符合深度复制的概念。

后记：

在写项目的时候遇到一个很无语的bug，思来想去，调试来调试去，终于发现了问题所在！使用数组时没有进行深度复制！

遂写一篇博客，以此纪念笔者垃圾的js基础。