問題發(fā)生的場景：頁面渲染時，會加載一個n行的列表，列表每一行對應(yīng)一組數(shù)據(jù)，一組數(shù)據(jù)由一個請求獲得。我們需要將請求獲取到的數(shù)據(jù)按照一定順序顯示到頁面上

下面先看一下數(shù)據(jù)大致的請求與存儲方式：

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

getData = (dataSource) => {

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

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

    // 請求數(shù)據(jù)
    await getBasicPlans(title, item.id).then(data => {

      // 將數(shù)據(jù)按照請求時的順序保存進(jìn)數(shù)組（optionsArr是一個數(shù)組，里面保存著option中的一條條數(shù)據(jù)）
      selectArr.splice(index, 0, data.optionsArr);

      this.setState({ selectArr });
    })

  })

}

可以看到，我們將數(shù)據(jù)存儲進(jìn)數(shù)組時，使用了遍歷時的index，并且還有await進(jìn)行同步化的處理。按理來說，請求完了第一條數(shù)據(jù)才會請求請求第二條數(shù)據(jù)，這樣一來，splice中的index就是從0→1→2...依次增大，那么selectArr中存儲的數(shù)據(jù)就是有序的

但結(jié)果確是selectArr中存儲的數(shù)據(jù)是無序的

我們在.then中打印index來看一下：

可以看到，并沒有按照我們預(yù)想的那樣按照順序?qū)ndex打印出來

1. 也就是說map種使用的await并沒有生效，為什么呢？
2. 看到很多博主說for...of使用了迭代器，可以解決這一問題，但是組內(nèi)有個前輩僅僅將上面的map換成了最基本的for循環(huán)就實現(xiàn)了，為什么最基本的for循環(huán)就能解決這一問題呢？