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
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论
72