使用for/of，则可以直接访问数组的元素值：
for (const v of arr) {
console.log(v);
}使用forEach()，则可以同时访问数组的下标与元素值：
arr.forEach((v, i) => console.log(v));
非数字属性
Javascript 的数组就是 Object，这就意味着我们可以给数组添加字符串属性：
const arr = ["a", "b", "c"];
typeof arr; // &＃39;object&＃39;
arr.test = "bad"; // 添加非数字属性
arr.test; // &＃39;abc&＃39;
arr[1] === arr["1"]; // true, Javascript数组只是特殊的Object
4 种循环语法，只有for/in不会忽略非数字属性：
const arr = ["a", "b", "c"];
arr.test = "bad";
for (let i in arr) {
console.log(arr[i]); // 打印"a, b, c, bad"
}正因为如此，使用for/in遍历数组并不好。
其他 3 种循环语法，都会忽略非数字属性：
const arr = ["a", "b", "c"];
arr.test = "abc";
// 打印 "a, b, c"
for (let i = 0; i console.log(i, el));
// 打印 "a, b, c"
for (const el of arr) {
console.log(el);
}
要点： 避免使用for/in来遍历数组，除非你真的要想要遍历非数字属性。可以使用 ESLint 的guard-for-in规则来禁止使用for/in。
数组的空元素
Javascript 数组可以有空元素。以下代码语法是正确的，且数组长度为 3：
const arr = ["a", , "c"];
arr.length; // 3
让人更加不解的一点是，循环语句处理[&＃39;a&＃39;,, &＃39;c&＃39;]与[&＃39;a&＃39;, undefined, &＃39;c&＃39;]的方式并不相同。
对于[&＃39;a&＃39;,, &＃39;c&＃39;]，for/in与forEach会跳过空元素，而for与for/of则不会跳过。
// 打印"a, undefined, c"
for (let i = 0; i console.log(v));
// 打印"a, c"
for (let i in arr) {
console.log(arr[i]);
}
// 打印"a, undefined, c"
for (const v of arr) {
console.log(v);
}
对于[&＃39;a&＃39;, undefined, &＃39;c&＃39;]，4 种循环语法一致，打印的都是"a, undefined, c"。
还有一种添加空元素的方式：
// 等价于`[&＃39;a&＃39;, &＃39;b&＃39;, &＃39;c&＃39;,, &＃39;e&＃39;]`
const arr = ["a", "b", "c"];
arr[5] = "e";
还有一点，JSON 也不支持空元素：
JSON.parse(&＃39;{"arr":["a","b","c"]}&＃39;);
// { arr: [ &＃39;a&＃39;, &＃39;b&＃39;, &＃39;c&＃39; ] }
JSON.parse(&＃39;{"arr":["a",null,"c"]}&＃39;);
// { arr: [ &＃39;a&＃39;, null, &＃39;c&＃39; ] }
JSON.parse(&＃39;{"arr":["a",,"c"]}&＃39;);
// SyntaxError: Unexpected token , in JSON at position 12要点： for/in与forEach会跳过空元素，数组中的空元素被称为"holes"。如果你想避免这个问题，可以考虑禁用forEach:
parserOptions:
ecmaVersion: 2018
rules:
no-restricted-syntax:
- error
- selector: CallExpression[callee.property.name="forEach"]
message: Do not use `forEach()`, use `for/of` instead函数的 this
for，for/in与for/of会保留外部作用域的this。
对于forEach， 除非使用箭头函数，它的回调函数的 this 将会变化。
使用 Node v11.8.0 测试下面的代码，结果如下：
"use strict";
const arr = ["a"];
arr.forEach(function() {
console.log(this); // 打印undefined
});
arr.forEach(() => {
console.log(this); // 打印{}
});要点： 使用 ESLint 的no-arrow-callback规则要求所有回调函数必须使用箭头函数。
Async/Await 与 Generators
还有一点，forEach()不能与 Async/Await 及 Generators 很好的"合作"。
不能在forEach回调函数中使用 await：
async function run() {
const arr = [&＃39;a&＃39;, &＃39;b&＃39;, &＃39;c&＃39;];
arr.forEach(el => {
// SyntaxError
await new Promise(resolve => setTimeout(resolve, 1000));
console.log(el);
});
}不能在forEach回调函数中使用 yield：
function run() {
const arr = [&＃39;a&＃39;, &＃39;b&＃39;, &＃39;c&＃39;];
arr.forEach(el => {
// SyntaxError
yield new Promise(resolve => setTimeout(resolve, 1000));
console.log(el);
});
}对于for/of来说，则没有这个问题:
async function asyncFn() {
const arr = ["a", "b", "c"];
for (const el of arr) {
await new Promise(resolve => setTimeout(resolve, 1000));
console.log(el);
}
}
function* generatorFn() {
const arr = ["a", "b", "c"];
for (const el of arr) {
yield new Promise(resolve => setTimeout(resolve, 1000));
console.log(el);
}
}当然，你如果将forEach()的回调函数定义为 async 函数就不会报错了，但是，如果你想让forEach按照顺序执行，则会比较头疼。
下面的代码会按照从大到小打印 0-9：
async function print(n) {
// 打印0之前等待1秒，打印1之前等待0.9秒
await new Promise(resolve => setTimeout(() => resolve(), 1000 - n * 100));
console.log(n);
}
async function test() {
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(print);
}
test();要点： 尽量不要在forEach中使用 aysnc/await 以及 generators。
结论
简单地说，for/of是遍历数组最可靠的方式，它比for循环简洁，并且没有for/in和forEach()那么多奇怪的特例。for/of的缺点是我们取索引值不方便，而且不能这样链式调用forEach(). forEach()。
使用for/of获取数组索引，可以这样写：
for (const [i, v] of arr.entries()) {
console.log(i, v);
}参考
本文采用意译，版权归原作者所有
原文：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）的区别的详细内容，更多请关注 第一PHP社区 其它相关文章！
京公网安备 11010802041100号