javascript复制数组的三种方式 javascript复制粘贴

在前端开发中，复制数组是经常用到的功能。现在老K为大家总结一下javascript中复制数组的三种方式。

1.普通的for循环

这是一种使用最普遍的方式。利用js的for循环再生成一个相同的数组。代码如下：

var arr=[1,2,3];

var arr2=[];

for(var i=0; i<arr.length; i++){
 arr2[i]=arr[i];
}

console.log(arr,arr2);

输出：

[1,2,3] [1,2,3]

为了验证arr2不是简单的类型引用，我们可以对arr2进行一个小操作，验证arr2确实是arr1的复制品。代码如下：

var arr=[1,2,3];

var arr2=[];

for(var i=0; i<arr.length; i++){
 arr2[i]=arr[i];
}

arr2.pop(); //将arr2的最后一项删掉

console.log(arr,arr2);

输出：

[1,2,3] [1,2]

对arr2进行操作，不影响arr1。由此验证，arr2是arr1的复制品。当然这种方式比较繁琐。

2.ES6的Array.from()

ES6的Array.from 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。我们可以利用这个特性来快速复制数组。代码如下：

var arr = [1,2,3];

var arr2 = Array.from(arr); //利用ES6的Array.from生成一个新数组

arr2.pop(); //将arr2的最后一项删掉，验证arr和arr2属于两个不同的数组

console.log(arr,arr2);

输出：

[1,2,3] [1,2]

3.ES6的扩展运算符(...)

这是ES6规范新加的一种运算符，可以将某些数据结构转化为数组。我们可以利用扩展运算符的特性来快速复制数组。代码如下：

var arr = [1,2,3];

var arr2 = [...arr]; //利用ES6的扩展运算符生成一个新数组

arr2.pop(); //将arr2的最后一项删掉，验证arr和arr2属于两个不同的数组

console.log(arr,arr2);

输出：

[1,2,3] [1,2]

本文为原创内容，若转载请注明出处，转发感激不尽。