Javascript – 数组遍历方式总结
1 Javascript数组遍历方法
Javascript中共有以下几种数组遍历方法:
上述四种方法都可以对数组进行遍历,下文简单总结这四种方法的使用以及优缺点。
1.1 for
示例代码:
for (let index=0; index < array.length; index++) {
const elem = array[index];
}
在Javascript中,for循环遍历数组array中每一个元素的索引和值,其在ECMAScript 1中就已经存在。
当我们不想从第一个数组元素开始遍历,则for循环很有用,其他三个方法很难做到。但是相比其它三个方法,写起来比较复杂。
1.2 for-in
示例代码:
for (const key in array) {
console.log(key);
}
for-in和for一样,在ECMAScript 1中就已经存在。
但是for-in不是遍历数组的好方法,首先它访问的是key而不是value,而且key是字符串而不是数字。
1.3 forEach
示例代码:
array.forEach((elem, index) => {
console.log(elem, index);
});
由于for和for-in都不适合遍历数组,在ECMAScript 5引入了.forEach
方法,其语法比较优雅,并且可以同时访问数组索引和数组元素。但是其缺点也很明显:
- 不能在它的循环体中使用
await
- 不能提前退出
.forEach()
循环。而在for
循环中可以使用break
1.4 for-of
示例代码:
for (const elem of array) {
console.log(elem);
}
在ECMAScript 6开始推出for-of
方法,首先其可以遍历数组元素,也可以结合array.entries()
方法返回一个可以迭代的[index,value]
数据对,然后使用for-of
进行遍历,比如
const array = ['a', 'b', 'c'];
for (const [index, elem] of array.entries()) {
console.log(index, elem);
}
for-of
方法除了可以遍历数组之外,还可以用于遍历对象,比如遍历Map,
const temp_map = new Map()
.set('zhangsan', 19)
.set('lisi', 20)
;
for (const [key, value] of temp_map) {
console.log(key, value);
}
2 总结
简单的说,for-of
是遍历数组最可靠的方式,该方法比for
方法简单,并且没有for-in
和forEach
那么多的使用限制。除了取数组索引值不方便以及无法从不是首元素进行数组遍历之外,其他方面都是比较简单实用的。
参考链接
本文作者:StubbornHuang
版权声明:本文为站长原创文章,如果转载请注明原文链接!
原文标题:Javascript – 数组遍历方式总结
原文链接:https://www.stubbornhuang.com/2743/
发布于:2023年08月07日 17:13:55
修改于:2023年08月07日 17:14:24
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论
51