問題發生的場景：頁面渲染時，會加載一個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循環就能解決這一問題呢？