JavaScript —— 如何深浅拷贝数组

这两天遇到了一个问题，如何复制数组，因此就从各个地方找了不少的解决办法。算是整理一下，这样以便于本身之后的学习：

目录

• 浅拷贝数组
• 深拷贝数组
  • 1.使用数组遍历赋值
    • 原理
    • 代码实现
  • 2.返回新数组方法
    • 2.1 使用slice方法
      • 原理
      • 代码实现
    • 2.2 使用数组map方法
    • 2.3 使用concat方法
  • 3.ES6语法实现深拷贝
  • 4.for-in连原型链也一并复制的方法
  • 5.多维数组的复制

浅拷贝数组

首先第一个复制数组咱们都想到的是定义一个数组直接相等就能够了：

var arr1 = [1,2,3];
  var arr2 = arr1;
  arr1[0] = 2;
  console.log(arr1[0]);  //2
复制代码

出现这个的缘由就是由于，数组是用堆去保存的，栈中保存的是真正存储数据的内存地址，相等的时候只是拷贝了存放内存地址的栈，两个栈仍是同时指向了同一个内存地址，因此在改变其中一个的值，其余的也跟着改变了，这就是所谓的浅拷贝。

因此如何深拷贝一个数组呢？

深拷贝数组

1.使用数组遍历赋值

原理

这个是最原始的办法，就是把每一个值取出来到另外一个数组中。

代码实现

var arr1 = [1,2,3];
  var arr2 = [];
  arr1.forEach(function(value,index){
    arr2[index] = value;
  }) 
  console.log(arr2);
//这个时候改变arr1[0] = 3;那么输出arr2[0]仍是等于1

复制代码

2. 返回新数组方法

2.1 使用slice方法

原理

数组的slice方法是截取数组的意思，在以前的数组总结中也有提过。 slice(0)指的是从0开始到末尾截取数组，而后返回一个新的数组，这样就不会影响到原来的数组了。

代码实现

var arr1 = [1,2,3];
  var arr2 = arr1.slice(0);
  console.log(arr2); //[1,2,3]
//这个时候改变arr1[2] = 5,那么输出arr2[2]仍是等于3
复制代码

顺着这种方法是否是获得了思惟的开阔，来看看还有哪些是返回新数组的？

2.2使用数组map方法

使用map方法遍历数组而后返回新的数组，里面的值不变

var arr1 = [2,3,4];
  var arr2 = arr1.map(function(value){
    return value;  
  })
  console.log(arr2);  //[2,3,4]
复制代码

2.3使用concat方法

链接数组，若是链接的是一个空，那么也是返回了新的自己的数组

var arr1 = [3,4,5];
  var arr2 = arr1.concat();
  console.log(arr2);   //[3,4,5]
复制代码

3.ES6语法实现深拷贝

ES6扩展运算符实现数组的深拷贝，目前是最简单的。

var arr = [1,2,3,4,5];
  var [ ... arr2 ] = arr;
  console.log(arr); //[1,2,3,4,5]
  console.log(arr2); //[1,2,3,4,5]
复制代码

4.for-in连原型链也一并复制的方法

这种办法，不只复制的值，还会把属性也进行拷贝。

var arr = [1,2,3,4,5];
arr.prototype = 5;
var arr2 = [];
for(var a in arr){
  arr2[a] = arr[a];
}
console.log(arr2); // [1,2,3,4,5]
console.log(arr2.prototype); // 5
//以前的方法中新数组的prototype都是undefined

复制代码

5.多维数组的复制

原理

多维数组转化为字符串会成为一维数组。

var arr = [[1,2],3,4,[5,6]];
  var arr1 = arr.toString().split(",")
  var arr2 = arr.join().split(",")
  console.log(arr1) //[1,2,3,4,5,6]
  console.log(arr2) //[1,2,3,4,5,6]
复制代码

可是怎么能够保持那种二维数组的状态呢？须要下面的代码

代码实现

var arr = [[1,2],3,4,[5,6]];
  var arr3 = JSON.parse(JSON.stringify(arr));  
  console.log(arr3) // [[1,2],3,4,[5,6]]
复制代码

若是你有新的方法欢迎留言？若是我找到新的方法会不按期更新...

©burning_韵七七