JavaScript中有多种循环Array的方式，你是否常常分不清他们的细微差别，和适用场景。本文将详细梳理各间的优缺点，整理成表以便对比。

示例地址

for （ES1)

这个循环方式历史悠久，从ECMAScript 1就被支持。

const arr = ['a', 'b', 'c']; arr.prop = 'property value';  for (let index=0; index < arr.length; index++) {   const elem = arr[index];   console.log(index, elem); }  // Output: // 0, 'a' // 1, 'b' // 2, 'c' 

for循环方式通用，迭代过程可以访问元素和当前元素下标索引，但是语法上略显冗长。

for in (ES1)

for in 的历史同for一样悠久。

const arr = ['a', 'b', 'c']; arr.prop = 'property value';  for (const key in arr) {   console.log(key); }  // Output: // '0' // '1' // '2' // 'prop' 

for in 用来循环数组不是一个合适的选择。

• 迭代的是属性key，不是值
• 由于属性 key 是字符串，迭代出的元素索引是 string,不是 number.
• 迭代的是数组实例上所有可枚举的属性key,而不是数组内元素。

如果你想获取一个对象所有的可枚举属性(包含原型链上的)，那么 for in 倒是可以胜任，若仅仅是对象自身声明的属性，那 Object.keys 更合适。

forEach (ES5)

鉴于 for 和 for-in 都不特别适合在 Arrays 上循环，因此在ECMAScript 5中引入了辅助方法：Array.prototype.forEach.

const arr = ['a', 'b', 'c']; arr.prop = 'property value';  arr.forEach((elem, index) => {   console.log(elem, index); });  // Output: // 'a', 0 // 'b', 1 // 'c', 2 

这个方法很方便,它让我们可以访问数组元素和数组元素下标，而不需要做太多的事情。箭头函数(在ES6中引入)使该方法在语法上更加优雅。

forEach 主要确定是：

• 循环内部不支持 await 操作。
• 即使找到你想要的元素，也无法中断循环。

要实现中断循环，可以使用同期引入的 Array.prototype.same 方法。some 循环遍历所有 Array 元素，并在其回调返回一个真值时停止。

const arr = ['red', 'green', 'blue']; arr.some((elem, index) => {   if (index >= 2) {     return true; //结束循环   }   console.log(elem);   // 隐式返回假值 undefined，继续循环 });  // Output: // 'red' // 'green' 

for of (ES6)

for of 是 ECMAScript 6 新引入的语法。

const arr = ['a', 'b', 'c']; arr.prop = 'property value';  for (const elem of arr) {   console.log(elem); } // Output: // 'a' // 'b' // 'c' 

for of 很适合遍历数组：

• 迭代所有数组元素
• 内部支持 await，甚至是 ES2018 中引入的 for-await-of 语法
• 可以使用 break 和 continue 跳出循环

for-of 的另一个好处是，我们不仅可以遍历数组，还可以遍历任何可迭代对象(例如map)

const myMap = new Map()   .set(false, 'no')   .set(true, 'yes') ; for (const [key, value] of myMap) {   console.log(key, value); }  // Output: // false, 'no' // true, 'yes' 

遍历 myMap 会生成[key, value]对，对其进行解构方便直接访问。

如果你在循环中需要感知当前元素索引，可以通过 Array 方法 entries 返回可迭代的 [index，value]对。 和map一样的解构直接访问index、value：

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

循环体内 await 测试

准备如下代码用于测试循环体内 await，getFruit 模拟远程服务延迟返回。

const fruits = ["apple", "grape", "pear"];  const sleep = (ms) => {   return new Promise((resolve) => setTimeout(resolve, ms)); };  const getFruit = (fruit) => {   return sleep(2000).then((v) => fruit); }; 

先看 for of, 元素之间会按预期间隔输出。

(async function(){     console.log('start');     for (fruit of fruits) {         const element = await getFruit(fruit);         console.log(element);     }     console.log('start'); })();  //3个元素 间隔2s输出 "start" "apple" "grape" "pear" "end" 

再看 forEach， 注意 forEach 调用后直接返回输出 loop end, 间隔2s 后同时输出了后面结果，并没有按预期各个间隔输出。

(async function () {    console.log("foreach loop start ....");   fruits.forEach(async value => {     const element = await getFruit(value);     console.log(element);   });   console.log("foreach loop end ....");  })();  //同时输出 foreach loop start .... foreach loop end .... //间隔2s 后同时输出下面3个 apple grape pear 

示例地址