嗨，大家好！这里是道长王jj~ 🎩🧙♂️
前端团队在对接各类接口的时候，80%的时间都在处理类似于下面的数组对象：
[{
name: 'name01',
age: '18',
...
}, {
name: 'name02',
age: '18',
...
}{
name: 'name03',
age: '18',
...
}, {
name: 'name04',
age: '18',
...
}]
而JavaScript的高级函数中就自带forEach这个遍历处理数组的方法。所以我们前端团队成员习惯性的会大量采用此方法对来源数据进行二次处理。
🏢 某天，我正在审查团队成员小明的代码时，发现了一个常见的问题：他在使用forEach方法处理异步操作时，并没有考虑到 forEach 不能保证异步任务执行顺序的问题。这给项目带来了潜在的风险和不可预测的结果。
❗review问题：forEach不能胜任异步任务！
小明在后台管理系统的开发中负责处理不同权限角色的功能。
为了快速实现不同角色的功能，他使用了forEach方法遍历角色列表并执行异步操作。然而，这种做法并不能保证异步任务按照预期的顺序执行。
下面是小明的代码片段：
async function processRoles() {
let roles = ['admin', 'editor', 'employee'];
roles.forEach(async role => {
const result = await performTask(role);
console.log(result);
});
console.log('任务处理完成');
}
function performTask(role) {
return new Promise((resolve, reject) => {
// 模拟异步操作
setTimeout(() => {
resolve(`已处理角色：${
role}`);
}, Math.random() * 1000);
});
}
processRoles();
小明期望的输出结果是：
已处理角色：admin
已处理角色：editor
已处理角色：employee
任务处理完成
然而，实际的输出结果却是不确定的，可能会类似于以下情况：
任务处理完成
已处理角色：employee
已处理角色：admin
已处理角色：editor
😕 那有没有办法教教它乖乖排队呢？让我们看看该如何处理。
🧐问题溯源：forEach凭啥“随心所欲”
要理解这个问题的原因，我们需要了解forEach方法的底层实现方式。
forEach方法的核心逻辑如下：
for (var i = 0; i < length; i++) {
if (i in array) {
var element = array[i];
callback(element, i, array);
}
}
forEach方法直接遍历数组并执行回调函数，无法保证异步任务的执行顺序。如果后面的任务执行时间较短，就可能在前面的任务之前完成执行。
这就像在公司里，新同事按照名字的字母顺序逐个拜访每个同事，但每个同事的工作任务都不一样。如果某个同事恰好很快就完成了工作，而其他同事还在忙碌，那么新同事就会跟着顺序走，没有办法按照预期的顺序与同事们进行交流。
😔 这可让人头疼了！那有没有解决方案呢？
📌解决方案：for...of才能保证任务排队稳稳哒
为了解决这个问题，我们可以采用更可靠的方法，即使用for...of循环来确保异步任务按照预期顺序执行。
以下是改进后的代码示例：
async function processRoles() {
let roles = ['admin', 'editor', 'employee'];
for (const role of roles) {
const result = await performTask(role);
console.log(result);
}
console.log('任务处理完成');
}
通过使用for...of循环，我们可以确保异步任务按照预期顺序执行，避免了不确定性。
🚀 现在问题解决了！他重构了代码，使用了for...of循环来确保异步任务按照预期顺序执行。我们重新审查了他的代码，这次一切都按照预期运行，没有出现任何问题。💡
📖解决原理：迭代器出马，让任务听话
for...of循环实际上是基于迭代器（Iterator）的遍历方式。对于数组来说，它是一种可迭代对象，可以通过迭代器进行遍历。
我们可以通过以下方式获取数组的迭代器：
let roles = ['admin', 'editor', 'employee'];
let iterator = roles[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
迭代器返回的结果具有value和done属性，这使得我们可以使用迭代器来确保异步任务的顺序执行。
因此，我们的代码可以用迭代器进行如下组织：
async function processRoles() {
let roles = ['admin', 'editor', 'employee'];
let iterator = roles[Symbol.iterator]();
let res = iterator.next();
while(!res.done) {
let value = res.value;
console.log(value);
console.log(await performTask(value));
res = iterator.next();
}
console.log('任务处理完成');
}
processRoles()
输出结果如下：
admin
已处理角色：admin
editor
已处理角色：editor
employee
已处理角色：employee
任务处理完成
通过以上例子重新认识生成器（Generator）作为迭代器的特性，我们可以更深入地理解了for...of循环的原理和工作方式。
🎉 希望本文能够帮助你解决异步代码中按顺序执行的问题。如果你有任何疑问或者想进一步讨论相关话题，请随时告诉我。🚀✨
