theme: smartblue # Markdown 主题,默认值:juejinjavascript
JavaScript中有多种循环Array的方式,你是否经常分不清他们的细微差异,和适用场景。本文将详细梳理各间的优缺点,整理成表以便对比。java
循环 | 可访问element | 可访问index | 可迭代property | 支持中断 | 支持await | 支持任意位置开始 |
---|---|---|---|---|---|---|
for | √ | √ | × | √ | √ | √ |
for in | √ | × | √ | √ | √ | × |
forEach | √ | √ | × | × | × | × |
for of | √ | √ | × | √ | √ | × |
示例地址数组
这个循环方式历史悠久,从ECMAScript 1就被支持。app
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
循环方式通用,迭代过程能够访问元素和当前元素下标索引,可是语法上略显冗长。async
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
用来循环数组不是一个合适的选择。oop
key
是字符串,迭代出的元素索引是 string
,不是 number
.若是你想获取一个对象全部的可枚举属性(包含原型链上的),那么 for in
却是能够胜任,若仅仅是对象自身声明的属性,那 Object.keys
更合适。测试
鉴于 for
和 for-in
都不特别适合在 Arrays
上循环,所以在ECMAScript 5中引入了辅助方法:Array.prototype.forEach
.ui
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中引入)使该方法在语法上更加优雅。prototype
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
是 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
语法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
,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