JS中循环遍历数组的四种方式总结

2023-07-06 10:44:03 278
本文比较并总结遍历数组的四种方式：
for循环：
for(letindex=0;index
for-in循环：
for(constkeyinsomeArray){
console.log(key);
}

数组方法.forEach()：
someArray.forEach((elem,index)=>{
console.log(elem,index);
});

for-of循环：
for(constelemofsomeArray){
console.log(elem);
}

for-of通常是最佳选择。我们会明白原因。
for循环[ES1]


JavaScript中的for循环很古老，它在ECMAScript1中就已经存在了。for循环记录arr每个元素的索引和值：
constarr=['a','b','c'];
arr.prop='propertyvalue';

for(letindex=0;index
for循环的优缺点是什么？

它用途广泛，但是当我们要遍历数组时也很麻烦。
如果我们不想从第一个数组元素开始循环时它仍然很有用，用其他的循环机制很难做到这一点。



for-in循环[ES1]


for-in循环与for循环一样古老，同样在ECMAScript1中就存在了。下面的代码用for-in循环输出arr的key：
constarr=['a','b','c'];
arr.prop='propertyvalue';

for(constkeyinarr){
console.log(key);
}

//Output:
//'0'
//'1'
//'2'
//'prop'


for-in不是循环遍历数组的好方法：

它访问的是属性键，而不是值。
作为属性键，数组元素的索引是字符串，而不是数字。
它访问的是所有可枚举的属性键（自己的和继承的），而不仅仅是Array元素的那些。



for-in访问继承属性的实际用途是：遍历对象的所有可枚举属性。
数组方法.forEach()[ES5]


鉴于for和for-in都不特别适合在数组上循环，因此在ECMAScript5中引入了一个辅助方法：Array.prototype.forEach()：
constarr=['a','b','c'];
arr.prop='propertyvalue';

arr.forEach((elem,index)=>{
console.log(elem,index);
});

//Output:
//'a',0
//'b',1
//'c',2


这种方法确实很方便：它使我们无需执行大量操作就能够可访问数组元素和索引。如果用箭头函数（在ES6中引入）的话，在语法上会更加优雅。
.forEach()的主要缺点是：

不能在它的循环体中使用await。
不能提前退出.forEach()循环。而在for循环中可以使用break。



中止.forEach()的解决方法


如果想要中止.forEach()之类的循环，有一种解决方法：.some()还会循环遍历所有数组元素，并在其回调返回真值时停止。
constarr=['red','green','blue'];
arr.some((elem,index)=>{
if(index>=2){
returntrue;//中止循环
}
console.log(elem);
//此回调隐式返回`undefined`，这
//是一个伪值。因此，循环继续。
});

//Output:
//'red'
//'green'


可以说这是对.some()的滥用，与for-of和break比起来，要理解这段代码并不容易。
for-of循环[ES6]


for-of循环在ECMAScript6开始支持：
constarr=['a','b','c'];
arr.prop='propertyvalue';

for(constelemofarr){
console.log(elem);
}
//Output:
//'a'
//'b'
//'c'


for-of在循环遍历数组时非常有效：
用来遍历数组元素。
可以使用await

如果有需要，可以轻松地迁移到for-await-of。



甚至可以将break和continue用于外部作用域。
for-of和可迭代对象


for-of不仅可以遍历数组，还可以遍历可迭代对象，例如遍历Map：
constmyMap=newMap()
.set(false,'no')
.set(true,'yes')
;
for(const[key,value]ofmyMap){
console.log(key,value);
}

//Output:
//false,'no'
//true,'yes'


遍历myMap会生成[键，值]对，可以通过对其进行解构来直接访问每一对数据。
for-of和数组索引


数组方法.entries()返回一个可迭代的[index，value]对。如果使用for-of并使用此方法进行解构，可以很方便地访问数组索引：
constarr=['chocolate','vanilla','strawberry'];

for(const[index,elem]ofarr.entries()){
console.log(index,elem);
}
//Output:
//0,'chocolate'
//1,'vanilla'
//2,'strawberry'


总结


for-of循环的的可用性比for，for-in和.forEach()更好。
通常四种循环机制之间的性能差异应该是无关紧要。如果你要做一些运算量很大的事，还是切换到WebAssembly更好一些。
到此这篇关于JS中循环遍历数组的四种方式总结的文章就介绍到这了,更多相关JS循环遍历数组内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
JS中循环遍历数组的四种方式总结

for循环[ES1]

for-in循环[ES1]

数组方法.forEach()[ES5]

中止.forEach()的解决方法

for-of循环[ES6]

for-of和可迭代对象

for-of和数组索引

总结

热门推荐

随机推荐
