Rumah > hujung hadapan web > tutorial js > 关于JS数组遍历方法的总结

关于JS数组遍历方法的总结

零到壹度
Lepaskan: 2018-04-21 15:24:17
asal
1631 orang telah melayarinya

JS的数组遍历是项目中必须用到的,为了写出优雅的代码,将方法用在对的地方,在这里将几种方法做个对比,这里用es6的方式展示出来,需要搭建转换es5环境,这不是这篇的重点,下一篇可以写这个。

一、for循环

使用频率最高,前端都会用,表示自己一开始只会用for循环。。。

let arr = [&#39;123&#39;, &#39;456&#39;, &#39;789&#39;];for (let i = 0; i < arr.length; i ++) {
    console.log(arr[i]);
}
Salin selepas log masuk

最常用,但是有优化空间:

for (let i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
}
Salin selepas log masuk

使用临时变量,将length值存起来,避免重复获取数组长度。

二、for…of循环

es6新增的循环方式,比es5的for循环更简单且高效,它还提供三个新方法:

  1. key()是对键名的遍历;

  2. value()是对键值的遍历;

  3. entries()是对键值对的遍历;

let arr = [&#39;科大讯飞&#39;, &#39;政法BG&#39;, &#39;前端开发&#39;];
for (let item of arr) {  
  console.log(item);
}
// 输出数组索引
for (let item of arr.keys()) {  
  console.log(item);
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {  
  console.log(item + &#39;:&#39; + val);
}
Salin selepas log masuk

三、foreach循环

数组的foreach方法使用频率较高,但性能比for循环还弱。它有个优点,可以自动省略为空的数组元素,相当于自动筛空。

let arr = [&#39;科大讯飞&#39;, ,  &#39;政法BG&#39;, , &#39;前端开发&#39;];
arr.forEach((val,index)=>console.log(index,val));
Salin selepas log masuk

四、filter循环

有循环的功能,主要用于过滤数组,接收一个方法,它会返回符合函数的元素集合。

let arr = [{
    label: &#39;科大讯飞&#39;,    
    value: 1
}, {
    label: &#39;政法BG&#39;,    value: 2
}, {
    label: &#39;前端开发&#39;,    value: 3
}];

const arr1 = arr.filter(list => list.value === 1);
console.log(arr1);
Salin selepas log masuk

五、some循环

和filter功能相同,不同的是,它返回boolean值,用于检查数组中是否存在某对象。

if (arr.some(list => list.value === 1)) {
    console.log(&#39;执行了!&#39;)
}
Salin selepas log masuk

所以它常用在if里。

六、map循环

替换的作用,它会返回一个由原数组中每个元素调用回调函数后返回值的集合。

let arr = [1, 2, 3, 4];
onst arr1 = arr.map(list => list * 2);
console.log(arr1);
Salin selepas log masuk

以上就是常用的数组遍历的方法,以后可以按照实际情况使用一种方法,不要所有地方用的都是for循环。


相关推荐:

遍历数组的常用方法

list集合的遍历3种方法

Java8的HashMap详解(存储结构,功能实现,扩容优化,线程安全,遍历方法)

重温数据结构:二叉树的常见方法及三种遍历方式 Java 实现


Atas ialah kandungan terperinci 关于JS数组遍历方法的总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan