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个applegrapepear

示例地址