本文共 1085 字，大约阅读时间需要 3 分钟。

面试中遇到了一道关于Promise数组循环执行的题目，看起来还真难呢！让我好好理清楚思路。

题目描述

我们有一个函数 fn，它返回一个Promise。函数会在500毫秒后执行，并输出当前的索引。现在有一个数组 arr1 = [1, 2, 3]，需要用 reduce 方法将Promise数组循环执行。同时，还有一个loop函数，使用async和await来实现同样的效果，我们需要比较这两种方法的实现方式。

方法一：使用 reduce 进行处理

const fn = function (i) {  return new Promise((resolve, reject) => {    setTimeout(() => {      console.log(i);      resolve();    }, 500);  });};var arr1 = [1, 2, 3];arr1.reduce((pre, next) => {  return pre.then(() => fn(next));}, Promise.resolve());

这种写法的关键在于将 reduce 变成一个 then 链，将每个 next 对应的 fn 放进去。但这样做是否真的能完全实现并行执行呢？其实这只是将每个 fn 放在一个单独的 then 链上执行，虽然不会等待每个 fn 完成，但不会形成并行的方式。

方法二：使用 async 和 await

const loop = async function(arr) {  for (let i = 0; i < arr.length; i++) {    await fn(arr[i]);  }};loop(arr1);

这种写法显然更直观，通过 await 关键字，我们可以直接在循环中等待每个 fn 的完成。这样每个操作都会依次执行，并且等待前一个完成才执行下一个，整体的执行顺序很清楚。

对比两种方法

从代码实现来看，第二种方法更加直观和直接，容易让开发者理解和维护。而第一种用 reduce 的方式，虽然也能实现类似的效果，但对 async/await 的理解不足的情况下，容易造成混淆。

在实际应用中，选择哪种方法取决于具体的需求。如果需要保持原有的 reduce 结构，或者想展示对 higher-order functions 的掌握，可以选择第一种方法。但如果更关注代码的可读性和简洁性，第二种方法明显更优。

总之，面试中看到这两种实现方式，应该能够结合实际场景，清晰地表达自己的理解，以及对代码的优劣之评。

转载地址：http://irkcz.baihongyu.com/