入夏的杭州， 出门热浪扑面而来，敲代码困意十足。马路上一条条大白腿，琳琅满目，参差不齐。没错，又到了减肥的好时候。（吹牛逼不能超过两句）

进入本文的正题

ES7引入了async、await方法，来处理非同步操作。关于这俩方法的使用，不再赘述，网上的文章多如牛毛，又写一篇入门，未免废话连篇。今天要分享的内容是在js的一些循环方法中，async 和 await 的表现是如何的。

for循环

在for循环中，async 和 await 表现的还是令人满意。现在假设一个场景，设置一个变数，爸妈我三个人的体重，求和

const family = {
"dad": 150,
"mom": 100,
"son": 200
}
const familyToGet = ["dad", "mom", "son"]

// 写一个sleep方法
const sleep = ms => {
return new Promise(resolve => setTimeout(resolve, ms))
}
// 假设获取体重数据的过程是一个请求介面的非同步过程
const getFamilyWeight = person => {
return sleep(2000).then(() => family[person])
}

const loop_for = async () => {
console.log(start)
let result = 0
for(let i = 0; i < familyToGet.length; i++) {
const person = familyToGet[i]
const weight = await getFamilyWeight(person)
result += weight
}
console.log(result:, result)
console.log(end)
}

loop_for()
// 运行结果
// start
// 150
// 100
// 200
// result: 450
// end

按照上述代码的列印结果分析，for循环内的代码，每一次都会等当前的 getFamilyWeight 方法返回了内容之后，才会继续下一个循环，循环全部结束的时候，才会跑for循环下面的代码，这是我们想要的结果，nice。

forEach循环

在forEach中，async和 await 表现的差强人意，具体原因，还应归结于forEach中的回调函数，具体看看代码的表现

const family = {
"dad": 150,
"mom": 100,
"son": 200
}
const familyToGet = ["dad", "mom", "son"]

// 写一个sleep方法
const sleep = ms => {
return new Promise(resolve => setTimeout(resolve, ms))
}
// 假设获取体重数据的过程是一个请求介面的非同步过程
const getFamilyWeight = person => {
return sleep(2000).then(() => family[person])
}

const loop_forEach = () => {
console.log(start)
let result = 0
// 在回调函数中，非同步是不好控制的
familyToGet.forEach(async person => {
const num = await getFamilyWeight(person)
console.log(num)
result += num
})
console.log(result, result)
console.log(end)
}

loop_forEach()

// 运行结果
// start
// result 0
// end
// 150
// 100
// 200

从运行结果中，可以看出，代码没有等待forEach方法执行结束，而是直接继续往后执行了。回调函数传进去之后，2秒钟之后才会返回数据，这不是我们想要的结果，我现在是希望它能顺序的执行。

那么我们分析一下forEach内部大致的原理

Array.prototype.forEach = function(cb) {
// this 为当前调用该函数的变数
for(let i=0; i < this.length; i++) {
cb(this[i], i);
}
}


且看上面的简易forEach重写，其实内部也是一个for循环，那么为什么不能表现的和for循环一样的运行结果呢？

我们的回调函数进入 forEach 之后，又被单独的以 cb() 这种形式执行了一次，相当于在内部又创建了一个 async await 形式的方法，当forEach函数执行完的时候，相当于创建了3个方法，这3个方法需要等待2秒钟，数据才会返回，而forEach外面的代码是不会等这3个函数返回内容再执行，而是一意孤行的管自己走了，所以才会造成这样的局面。返回问题的根本，我现在的需求是想要代码能顺序执行，且最后能算出一家人体重之和，下面我们来修改一下代码

const family = {
"dad": 150,
"mom": 100,
"son": 200
}
const familyToGet = ["dad", "mom", "son"]

// 写一个sleep方法
const sleep = ms => {
return new Promise(resolve => setTimeout(resolve, ms))
}
// 假设获取体重数据的过程是一个请求介面的非同步过程
const getFamilyWeight = person => {
return sleep(2000).then(() => family[person])
}

const loop_forEach = async () => {
console.log(start)
let promise = []
// 在回调函数中，非同步是不好控制的
familyToGet.forEach(person => {
const num = getFamilyWeight(person)
promise.push(num)
})
const result = await Promise.all(promise)
console.log(result, result)
const weight = result.reduce((sum, personWeight) => sum + personWeight)
console.log(weight, weight)
console.log(end)
}
loop_forEach()
// 运行结果
// start
// result [150, 100, 200]
// weight 450
// end

在forEach的回调函数内，直接把 getFamilyWeight 方法返回的promise对象push到promise这个数组变数内，通过 Promise.all 来做一层等待的非同步处理。

map遍历

在map中，直接返回一个promise数组

const family = {
"dad": 150,
"mom": 100,
"son": 200
}
const familyToGet = ["dad", "mom", "son"]

// 写一个sleep方法
const sleep = ms => {
return new Promise(resolve => setTimeout(resolve, ms))
}
// 假设获取体重数据的过程是一个请求介面的非同步过程
const getFamilyWeight = person => {
return sleep(2000).then(() => family[person])
}

const loop_map = async () => {
console.log(start)
// map中返回的是一个promise数组，需要通过Promise.all处理
const promise = familyToGet.map(async person => {
const num = await getFamilyWeight(person)
return num;
})
console.log(promise, promise)
// 等待promise里的内容全部返回，才会继续往下执行
const result = await Promise.all(promise)
console.log(result, result)
const weight = result.reduce((sum, personWeight) => sum + personWeight)
console.log(weight, weight)
console.log(end)
}

loop_map()

// 运行结果
// start
// promise [Promise, Promise, Promise]
// result [150, 100, 200]
// weight 450
// end

大家应该能感觉到其实这个和上面改版后的forEach差不多，没错，正如你所料，只不过map方法能返回新的数组罢了，forEach则不能返回数组。

在这里把map的简单实现写一下，方便理解

Array.prototype.map = function(cb) {
// this 为当前调用该函数的变数
var o = [];
for(let i=0; i < this.length; i++) {
var temp = cb(this[i], i);
o.push(temp);
}
return o;
}


如上述代码，在外面通过 o 这个变数收集 cb() 回调函数的返回值，再到外面统一处理。真是妙啊，大家可以细细品味一番，能吾出很多新的对象。

总结

1、for循环内使用async和await还是可以的，稳如老狗??

2、不要在forEach方法内使用async、await，尽量避免这种写法，坑啊。。。

推荐阅读：

相关文章