本文摘自PHP中文网,作者青灯夜游,侵删。
我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑。Airbnb 编码风格禁止使用 for/in 与 for/of,你知道为什么吗?
这篇文章将详细介绍以下 4 种循环语法的区别:
for (let i = 0; i < arr.length; ++i)
arr.forEach((v, i) => { /* ... */ })
for (let i in arr)
for (const v of arr)
语法
使用for
和for/in
,我们可以访问数组的下标,而不是实际的数组元素值:
1 2 3 4 5 6 7 |
|
使用for/of
,则可以直接访问数组的元素值:
1 2 3 |
|
使用forEach()
,则可以同时访问数组的下标与元素值:
1 |
|
非数字属性
JavaScript 的数组就是 Object,这就意味着我们可以给数组添加字符串属性:
1 2 3 4 5 6 7 8 |
|
4 种循环语法,只有for/in
不会忽略非数字属性:
1 2 3 4 5 6 |
|
正因为如此,使用for/in
遍历数组并不好。
其他 3 种循环语法,都会忽略非数字属性:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
要点: 避免使用for/in
来遍历数组,除非你真的要想要遍历非数字属性。可以使用 ESLint 的guard-for-in规则来禁止使用for/in
。
数组的空元素
JavaScript 数组可以有空元素。以下代码语法是正确的,且数组长度为 3:
1 2 3 |
|
让人更加不解的一点是,循环语句处理['a',, 'c']
与['a', undefined, 'c']
的方式并不相同。
对于['a',, 'c']
,for/in
与forEach
会跳过空元素,而for
与for/of
则不会跳过。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
对于['a', undefined, 'c']
,4 种循环语法一致,打印的都是"a, undefined, c"。
还有一种添加空元素的方式:
1 2 3 |
|
还有一点,JSON 也不支持空元素:
1 2 3 4 5 6 7 8 |
|
要点: for/in
与forEach
会跳过空元素,数组中的空元素被称为"holes"。如果你想避免这个问题,可以考虑禁用forEach
:
1 2 3 4 5 6 7 |
|
函数的 this
for
,for/in
与for/of
会保留外部作用域的this
。
对于forEach
, 除非使用箭头函数,它的回调函数的 this 将会变化。
使用 Node v11.8.0 测试下面的代码,结果如下:
1 2 3 4 5 6 7 8 9 10 11 |
|
要点: 使用 ESLint 的no-arrow-callback
规则要求所有回调函数必须使用箭头函数。
Async/Await 与 Generators
还有一点,forEach()
不能与 Async/Await 及 Generators 很好的"合作"。
不能在forEach
回调函数中使用 await:
1 2 3 4 5 6 7 8 |
|
不能在forEach
回调函数中使用 yield:
1 2 3 4 5 6 7 8 |
|
对于for/of
来说,则没有这个问题:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
当然,你如果将forEach()
的回调函数定义为 async 函数就不会报错了,但是,如果你想让forEach
按照顺序执行,则会比较头疼。
下面的代码会按照从大到小打印 0-9:
1 2 3 4 5 6 7 8 9 10 11 |
|
要点: 尽量不要在forEach
中使用 aysnc/await 以及 generators。
结论
简单地说,for/of
是遍历数组最可靠的方式,它比for
循环简洁,并且没有for/in
和forEach()
那么多奇怪的特例。for/of
的缺点是我们取索引值不方便,而且不能这样链式调用forEach()
. forEach()
。
使用for/of
获取数组索引,可以这样写:
1 2 3 |
|
参考
For-each over an array in JavaScript?
- Why is using “for…in” with array iteration a bad idea?
Array iteration and holes in JavaScrip
本文采用意译,版权归原作者所有
原文:http://thecodebarbarian.com/for-vs-for-each-vs-for-in-vs-for-of-in-javascript.html
相关免费学习推荐:js视频教程
更多编程相关知识,请访问:编程入门!!
以上就是JS中4种数组遍历方法( for 、forEach() 、for/in、for/of)的区别的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者