theme: smartblue # Markdown 主题,默认值:juejin
highlight: juejin # 代码高亮主题,默认值:theme 中指定,没有则默认为 juejin
JavaScript 中有多种循环 Array 的形式,你是否经常分不清他们的细微差别,和实用场景。本文将具体梳理各间的优缺点,整顿成表以便比照。
循环 | 可拜访 element | 可拜访 index | 可迭代 property | 反对中断 | 反对 await | 反对任意地位开始 |
---|---|---|---|---|---|---|
for | √ | √ | × | √ | √ | √ |
for in | √ | × | √ | √ | √ | × |
forEach | √ | √ | × | × | × | × |
for of | √ | √ | × | √ | √ | × |
示例地址
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
示例地址