forEach、map、reduce和promise那点事
通过此文，您可以学到：
- forEach、map、reduce 后面能不能带 async 函数？
- 怎么实现多个 promise 同步执行，不管有没有抛出错误，都把结果收集起来？
forEach 后面能不能带async函数？
首先我们来模拟一个异步函数：
const fetch = (forceTrue) => new Promise((resolve, reject) => {
if (Math.random() > 0.2 || forceTrue) {
resolve('success');
} else {
reject('error');
}
});
然后我们来试试使用 forEach 来执行多个async函数：
const result = [];
[0,1,2].forEach(async () => {
const value = await fetch(true);
result.push(value);
});
console.log(result); // 返回 []
可以看到，我们预期使用 await 获取 fetch 的结果后存入 result 里面去，但是后面打印出来的却是「空数组」。
我们使用 for 试一试：
const result = [];
for (let i = 0; i < 3; ++i) {
const value = await fetch(true);
result.push(value);
}
console.log(result); // 返回['success', 'success', 'success']
可以看到，使用 for 的时候「按预期返回」了。那么为什么用 forEach 就不行呢？我们看一看mdn上面forEach的polyfill源码：
// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(' this is null or not defined');
}
// 1. Let O be the result of calling toObject() passing the
// |this| value as the argument.
var O = Object(this);
// 2. Let lenValue be the result of calling the Get() internal
// method of O with the argument "length".
// 3. Let len be toUint32(lenValue).
var len = O.length >>> 0;
// 4. If isCallable(callback) is false, throw a TypeError exception.
// See: http://es5.github.com/#x9.11
if (typeof callback !== "function") {
throw new TypeError(callback + ' is not a function');
}
// 5. If thisArg was supplied, let T be thisArg; else let
// T be undefined.
if (arguments.length > 1) {
T = thisArg;
}
// 6. Let k be 0
k = 0;
// 7. Repeat, while k < len
while (k < len) {
var kValue;
// a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator
// b. Let kPresent be the result of calling the HasProperty
// internal method of O with argument Pk.
// This step can be combined with c
// c. If kPresent is true, then
if (k in O) {
// i. Let kValue be the result of calling the Get internal
// method of O with argument Pk.
kValue = O[k];
// ii. Call the Call internal method of callback with T as
// the this value and argument list containing kValue, k, and O.
callback.call(T, kValue, k, O);
}
// d. Increase k by 1.
k++;
}
// 8. return undefined
};
}
可以看到，里面是通过 while 循环里面多次调用callback.call(T, kValue, k, O);来实现的，由于它前面没有 await，所以每次循环执行到这里的时候并没有等待它执行完，最后打印 result 的时候就是空数组了。
map 和 reduce 后面能不能带async函数？
我们再来看一看 map 和 reduce 的 demo：
// map
const mapResult = [0,1,2].map(async () => await fetch(true));
console.log(mapResult); // 返回 [Promise, Promise, Promise]
// reduce
const reduceResult = [0,1,2].reduce(async (accu) => {
const value = await fetch(true);
accu.push(value);
console.log('accu=====', typeof accu);
return accu;
}, []); // 报错 Uncaught (in promise) TypeError: accu.push is not a function
console.log(reduceResult);
可以看到，两个都没有正常返回，我们先来看一看mdn上面map的polyfill源码：
// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {
Array.prototype.map = function(callback/*, thisArg*/) {
var T, A, k;
if (this == null) {
throw new TypeError('this is null or not defined');
}
// 1. Let O be the result of calling ToObject passing the |this|
// value as the argument.
var O = Object(this);
// 2. Let lenValue be the result of calling the Get internal
// method of O with the argument "length".
// 3. Let len be ToUint32(lenValue).
var len = O.length >>> 0;
// 4. If IsCallable(callback) is false, throw a TypeError exception.
// See: http://es5.github.com/#x9.11
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function');
}
// 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
if (arguments.length > 1) {
T = arguments[1];
}
// 6. Let A be a new array created as if by the expression new Array(len)
// where Array is the standard built-in constructor with that name and
// len is the value of len.
A = new Array(len);
// 7. Let k be 0
k = 0;
// 8. Repeat, while k < len
while (k < len) {
var kValue, mappedValue;
// a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator
// b. Let kPresent be the result of calling the HasProperty internal
// method of O with argument Pk.
// This step can be combined with c
// c. If kPresent is true, then
if (k in O) {
// i. Let kValue be the result of calling the Get internal
// method of O with argument Pk.
kValue = O[k];
// ii. Let mappedValue be the result of calling the Call internal
// method of callback with T as the this value and argument
// list containing kValue, k, and O.
mappedValue = callback.call(T, kValue, k, O);
// iii. Call the DefineOwnProperty internal method of A with arguments
// Pk, Property Descriptor
// { Value: mappedValue,
// Writable: true,
// Enumerable: true,
// Configurable: true },
// and false.
// In browsers that support Object.defineProperty, use the following:
// Object.defineProperty(A, k, {
// value: mappedValue,
// writable: true,
// enumerable: true,
// configurable: true
// });
// For best browser support, use the following:
A[k] = mappedValue;
}
// d. Increase k by 1.
k++;
}
// 9. return A
return A;
};
}
可以看到，源码里面「每次 while 循环把 callback 返回的结果赋值给 mappedValue」，而 callback 在调用的时候也没有使用 await，所以结果数组的每一个值都是一个 promise。
我们再看一看mdn上面reduce的polyfill源码：
// Production steps of ECMA-262, Edition 5, 15.4.4.21
// Reference: http://es5.github.io/#x15.4.4.21
// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
if (!Array.prototype.reduce) {
Object.defineProperty(Array.prototype, 'reduce', {
value: function(callback /*, initialValue*/) {
if (this === null) {
throw new TypeError( 'Array.prototype.reduce ' +
'called on null or undefined' );
}
if (typeof callback !== 'function') {
throw new TypeError( callback +
' is not a function');
}
// 1. Let O be ? ToObject(this value).
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// Steps 3, 4, 5, 6, 7
var k = 0;
var value;
if (arguments.length >= 2) {
value = arguments[1];
} else {
while (k < len && !(k in o)) {
k++;
}
// 3. If len is 0 and initialValue is not present,
// throw a TypeError exception.
if (k >= len) {
throw new TypeError( 'Reduce of empty array ' +
'with no initial value' );
}
value = o[k++];
}
// 8. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kPresent be ? HasProperty(O, Pk).
// c. If kPresent is true, then
// i. Let kValue be ? Get(O, Pk).
// ii. Let accumulator be ? Call(
// callbackfn, undefined,
// « accumulator, kValue, k, O »).
if (k in o) {
value = callback(value, o[k], k, o);
}
// d. Increase k by 1.
k++;
}
// 9. Return accumulator.
return value;
}
});
}
可以看到，源码里面「每次循环的时候也是把 callback 的值赋给累计器 accu，而 callback 是一个 async 函数」，所以这里 accu 其实「是一个 promise 而不是数组」，它没有数组方法，所以报错了。
解决方案
老实说，forEach、map、reduce、filter 这些方法本意都是「针对同步函数」的，不太适合异步的场景。在异步的场景，「建议使用 for 和 for of 方法」。
但是虽然他们都是针对同步函数的，还是有「一些 hack 方法」可以让它们对异步函数也生效，比如 reduce 的 hack 代码如下所示：
(async function () {
const fetch = (forceTrue) => new Promise((resolve, reject) => {
if (Math.random() > 0.2 || forceTrue) {
resolve('success');
} else {
reject('error');
}
});
const reduceResult = await [0,1,2].reduce(async (accu) => {
const value = await fetch(true);
const resolvedAccu = await accu;
resolvedAccu.push(value);
return resolvedAccu;
}, []);
console.log('====', reduceResult);
})()
上面的代码有这些需要注意的地方：
- 由于累计器 accu 是 async 回调函数的返回值 promise，所以我们「使用 await 让它得出结果」。
- 由于最后的结果也是 promise，所以我们在前面加上了 await，但是「await 只能在 async 函数里面使用」，所以我们在匿名函数那里加上了 async。
promise
上面让我想起了 promise 的一种使用场景：我们知道 promise.all 可以获得同步的 promise 结果，但是它有一个缺点，就是只要一个 reject 就直接返回了，不会等待其它 promise 了。那么怎么「实现多个 promise 同步执行，不管有没有抛出错误，都把结果收集起来」？
一般来说可以使用 for 循环解决，示例如下：
Promise.myAll = function (promiseArr) {
const len = promiseArr.length;
const result = [];
let count = 0;
return new Promise((resolve, reject) => {
for (let i = 0; i < len; ++i) {
promiseArr[i].then((res) => {
result[i] = res;
++count;
if (count >= len) {
resolve(result);
}
}, (err) => {
result[i] = err;
++count;
if (count >= len) {
resolve(result);
}
});
}
});
}
// test
const fetch = (forceTrue) => new Promise((resolve, reject) => {
if (Math.random() > 0.2 || forceTrue) {
resolve('success');
} else {
reject('error');
}
});
Promise.myAll([fetch(), fetch(), fetch()])
.then(res => console.log(res)); // ["success", "success", "error"]
但是如果注意到 promise 的「then 方法和 catch 方法都会返回一个 promise」的话，就可以用下面的简单方法：
Promise.myAll = function (promiseArr) {
// 就这一行代码！
return Promise.all(promiseArr.map(item => item.catch(err => err)));
}
// test
const fetch = (forceTrue) => new Promise((resolve, reject) => {
if (Math.random() > 0.2 || forceTrue) {
resolve('success');
} else {
reject('error');
}
});
Promise.myAll([fetch(), fetch(), fetch()])
.then(res => console.log(res)); // ["error", "error", "success"]
点击咨询 