不懂就问：map中使用await为什么会失效？

问题发生的场景：页面渲染时，会加载一个n行的列表，列表每一行对应一组数据，一组数据由一个请求获得。我们需要将请求获取到的数据按照一定顺序显示到页面上

下面先看一下数据大致的请求与存储方式：

dataSource = [obj1, obj2, ...];

getData = (dataSource) => {

  let selectArr = [];
  let { title } = this.props;

  _.map(dataSource, async (item, index) => {

    // 请求数据
    await getBasicPlans(title, item.id).then(data => {

      // 将数据按照请求时的顺序保存进数组（optionsArr是一个数组，里面保存着option中的一条条数据）
      selectArr.splice(index, 0, data.optionsArr);

      this.setState({ selectArr });
    })

  })

}

可以看到，我们将数据存储进数组时，使用了遍历时的index，并且还有await进行同步化的处理。按理来说，请求完了第一条数据才会请求请求第二条数据，这样一来，splice中的index就是从0→1→2...依次增大，那么selectArr中存储的数据就是有序的

但结果确是selectArr中存储的数据是无序的

我们在.then中打印index来看一下：

可以看到，并没有按照我们预想的那样按照顺序将index打印出来

1. 也就是说map种使用的await并没有生效，为什么呢？
2. 看到很多博主说for...of使用了迭代器，可以解决这一问题，但是组内有个前辈仅仅将上面的map换成了最基本的for循环就实现了，为什么最基本的for循环就能解决这一问题呢？