javascript复制数组的三种方式

简介: 在前端开发中,复制数组是经常用到的功能。现在老K为大家总结一下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规范新加的一种运算符,它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。我们可以利用扩展运算符的特性来快速复制数组。代码如下:

 

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

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

console.log(arr,arr2);

 

输出:

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


查看公众号文章


欢迎关注个人公众号,查看更多好文。1.gif

3c9443f5671a70732ca1e6ee8cdd027439c92725

相关文章
|
14天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
15 2
|
18天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
17 3
|
19天前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
33 4
|
18天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
24 1
|
21天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
22 5
|
25天前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
15 3
|
24天前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
28 1
|
26天前
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
17 0
|
1月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
23 3
|
18天前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
11 0