theme: smartblue # Markdown 主题，默认值：juejin

highlight: juejin # 代码高亮主题，默认值：theme 中指定，没有则默认为 juejin

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

示例地址