在 ES8 中，async/await 已经成为了管理异步操作的一种非常便捷的方式。然而，在使用 await 时，有时会遇到 range 边界问题，导致程序出错或出现未预期的结果。本文将详细介绍 range 边界问题的原因及如何解决。
range 边界问题的产生原因
在 ES8 中，await 可以和 Promise.all 配合使用，将多个 Promise 封装成一个 Promise 对象，然后通过 await 等待所有异步操作完成后再返回执行结果。
然而，Promise.all 接收的参数是一个数组，如果数组中的元素数量过大，就会造成过度消耗内存的问题。为了避免这种情况，我们通常会使用 range 的方式将数组分割成多个小数组，然后依次将每个小数组传给 Promise.all 进行处理，如下所示：
// javascriptcn.com 代码示例
const arr = Array.from({length: 10000}, (_, i) => i);
async function handle(arr) {
const limit = 1000;
const tempArr = [];
for (let i = 0, j = arr.length; i < j; i += limit) {
tempArr.push(arr.slice(i, i + limit))
}
const result = await Promise.all(tempArr.map(item => {
return new Promise(resolve => {
resolve(item.reduce((a, b) => a + b));
})
}));
return result.reduce((a, b) => a + b);
}
handle(arr).then(console.log); // 49995000在上面的代码中，我们使用了 Array.from 创建了一个长度为 10000 的数组，并通过 handle 函数依次将数组分割成每 1000 个元素的小数组，然后计算小数组的和，并将结果传给 Promise.all。最终，我们得到了期望的结果 49995000。
但是，如果我们将 limit 设为 3000，就会出现错误，代码如下所示：
// javascriptcn.com 代码示例
const arr = Array.from({length: 10000}, (_, i) => i);
async function handle(arr) {
const limit = 3000;
const tempArr = [];
for (let i = 0, j = arr.length; i < j; i += limit) {
tempArr.push(arr.slice(i, i + limit))
}
const result = await Promise.all(tempArr.map(item => {
return new Promise(resolve => {
resolve(item.reduce((a, b) => a + b));
})
}));
return result.reduce((a, b) => a + b);
}
handle(arr).then(console.log); // NaN在上面的代码中，我们将 limit 设为 3000，而数组中的元素数量为 10000，因此最后一个小数组中的元素数量只有 10000 - 9000 = 1000 个。在计算最后一个小数组的和时，由于只有 1000 个元素，而我们却将其与另一个长度为 3000 的小数组相加，导致结果出现了错误。
解决 range 边界问题的方法
要解决 range 边界问题，我们需要在计算小数组的和时，对数组中元素数量不足 limit 的小数组单独处理。具体而言，我们可以通过判断当前小数组中元素数量是否等于 limit 将其分为两类，代码如下所示：
// javascriptcn.com 代码示例
const arr = Array.from({length: 10000}, (_, i) => i);
async function handle(arr) {
const limit = 3000;
const tempArr = [];
for (let i = 0, j = arr.length; i < j; i += limit) {
if (j - i < limit) {
tempArr.push(arr.slice(i));
} else {
tempArr.push(arr.slice(i, i + limit));
}
}
const result = await Promise.all(tempArr.map(item => {
return new Promise(resolve => {
resolve(item.reduce((a, b) => a + b));
})
}));
return result.reduce((a, b) => a + b);
}
handle(arr).then(console.log); // 49995000在上面的代码中，我们判断当前小数组中元素数量是否等于 limit，如果小于 limit，就使用 arr.slice(i) 获取从 i 开始到数组末尾的所有元素，否则就使用 arr.slice(i, i + limit) 获取当前小数组的元素。通过这种方式，我们就可以避免出现 range 边界问题，得到正确的结果。
总结
range 边界问题在使用 async/await 和 Promise.all 处理大数组时很容易出现，但通过对数组中元素数量不足 limit 的小数组进行特殊处理，我们就可以避免这种问题的发生。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6530a28c7d4982a6eb234dd8