陣列的遍歷你都會用了，那Promise版本的呢

這裡指的遍歷方法包括：map、reduce、reduceRight、forEach、filter、some、every。因為最近要進行了一些資料彙總，node版本已經是8.11.1了，所以直接寫了個async/await的指令碼。但是在對陣列進行一些遍歷操作時，發現有些遍歷方法對Promise的反饋並不是我們想要的結果。

　　當然，有些嚴格來講並不能算是遍歷，比如說some，every這些的。

　　但確實，這些都會根據我們陣列的元素來進行多次的呼叫傳入的回撥。

　　這些方法都是比較常見的，但是當你的回撥函式是一個Promise時，一切都變了。

　前言

　　async/await為Promise的語法糖

　　文中會直接使用async/await替換Promise

let result = await func()
// => 等價於
func().then(result => {
  // code here
})

// ======

async function func () {
  return 1  
}
// => 等價與
function func () {
  return new Promise(resolve => resolve(1))
}

　map

　　map可以說是對Promise最友好的一個函式了。

　　我們都知道，map接收兩個引數：

1. 對每項元素執行的回撥，回撥結果的返回值將作為該陣列中相應下標的元素
2. 一個可選的回撥函式this指向的引數

[1, 2, 3].map(item => item ** 2) // 對陣列元素進行求平方
// > [1, 4, 9]

　　上邊是一個普通的map執行，但是當我們的一些計算操作變為非同步的：

[1, 2, 3].map(async item => item ** 2) // 對陣列元素進行求平方
// > [Promise, Promise, Promise]

　　這時候，我們獲取到的返回值其實就是一個由Promise函式組成的陣列了。

　　所以為什麼上邊說map函式為最友好的，因為我們知道，Promise有一個函式為Promise.all

　　會將一個由Promise組成的陣列依次執行，並返回一個Promise物件，該物件的結果為陣列產生的結果集。

await Promise.all([1, 2, 3].map(async item => item ** 2))
// > [1, 4, 9]

　　首先使用Promise.all對陣列進行包裝，然後用await獲取結果。

　reduce/reduceRight

　　reduce的函式簽名想必大家也很熟悉了，接收兩個引數：

1. 對每一項元素執行的回撥函式，返回值將被累加到下次函式呼叫中，回撥函式的簽名：

   1. accumulator累加的值
   2. currentValue當前正在處理的元素
   3. currentIndex當前正在處理的元素下標
   4. array呼叫reduce的陣列
2. 可選的初始化的值，將作為accumulator的初始值

[1, 2, 3].reduce((accumulator, item) => accumulator + item, 0) // 進行加和
// > 6

　　這個程式碼也是沒毛病的，同樣如果我們加和的操作也是個非同步的：

[1, 2, 3].reduce(async (accumulator, item) => accumulator + item, 0) // 進行加和
// > Promise {<resolved>: "[object Promise]3"}

　　這個結果返回的就會很詭異了，我們在回看上邊的reduce的函式簽名

對每一項元素執行的回撥函式，返回值將被累加到下次函式呼叫中

　　然後我們再來看程式碼，async (accumulator, item) => accumulator += item

　　這個在最開始也提到了，是Pormise的語法糖，為了看得更清晰，我們可以這樣寫：

(accumulator, item) => new Promise(resolve =>
  resolve(accumulator += item)
)

　　也就是說，我們reduce的回撥函式返回值其實就是一個Promise物件

　　然後我們對Promise物件進行+=操作，得到那樣怪異的返回值也就很合情合理了。

　　當然，reduce的調整也是很輕鬆的：

await [1, 2, 3].reduce(async (accumulator, item) => await accumulator + item, 0)
// > 6

　　我們對accumulator呼叫await，然後再與當前item進行加和，在最後我們的reduce返回值也一定是一個Promise，所以我們在最外邊也新增await的字樣

　　也就是說我們每次reduce都會返回一個新的Promise物件，在物件內部都會獲取上次Promise的結果。

　　我們呼叫reduce實際上得到的是類似這樣的一個Promise物件：

new Promise(resolve => {
  let item = 3
  new Promise(resolve => {
      let item = 2
      new Promise(resolve => {
        let item = 1
        Promise.resolve(0).then(result => resolve(item + result))
      }).then(result => resolve(item + result))
  }).then(result => resolve(item + result))
})

　　reduceRight

　　這個就沒什麼好說的了。。跟reduce只是執行順序相反而已

　forEach

　　forEach，這個應該是用得最多的遍歷方法了，對應的函式簽名：

1. callback，對每一個元素進行呼叫的函式

   1. currentValue，當前元素
   2. index，當前元素下標
   3. array，呼叫forEach的陣列引用
2. thisArg，一個可選的回撥函式this指向

　　我們有如下的操作：

// 獲取陣列元素求平方後的值
[1, 2, 3].forEach(item => {
  console.log(item ** 2)
})
// > 1
// > 4
// > 9

　　普通版本我們是可以直接這麼輸出的，但是如果遇到了Promise

// 獲取陣列元素求平方後的值
[1, 2, 3].forEach(async item => {
  console.log(item ** 2)
})
// > nothing

　　forEach並不關心回撥函式的返回值，所以forEach只是執行了三個會返回Promise的函式

　　所以如果我們想要得到想要的效果，只能夠自己進行增強物件屬性了：

Array.prototype.forEachSync = async function (callback, thisArg) {
  for (let [index, item] of Object.entries(this)) {
    await callback(item, index, this)
  }
}

await [1, 2, 3].forEachSync(async item => {
  console.log(item ** 2)
})

// > 1
// > 4
// > 9

　　await會忽略非Promise值，await 0、await undefined與普通程式碼無異

　filter

　　filter作為一個篩選陣列用的函式，同樣具有遍歷的功能：

　　函式簽名同forEach，但是callback返回值為true的元素將被放到filter函式返回值中去。

　　我們要進行一個奇數的篩選，所以我們這麼寫：

[1, 2, 3].filter(item => item % 2 !== 0)
// > [1, 3]

　　然後我們改為Promise版本：

[1, 2, 3].filter(async item => item % 2 !== 0)
// > [1, 2, 3]

　　這會導致我們的篩選功能失效，因為filter的返回值匹配不是完全相等的匹配，只要是返回值能轉換為true，就會被認定為通過篩選。

　　Promise物件必然是true的，所以篩選失效。

　　所以我們的處理方式與上邊的forEach類似，同樣需要自己進行物件增強

　　但我們這裡直接選擇一個取巧的方式：

Array.prototype.filterSync = async function (callback, thisArg) {
  let filterResult = await Promise.all(this.map(callback))
  // > [true, false, true]

  return this.filter((_, index) => filterResult[index])
}

await [1, 2, 3].filterSync(item => item % 2 !== 0)

　　我們可以直接在內部呼叫map方法，因為我們知道map會將所有的返回值返回為一個新的陣列。

　　這也就意味著，我們map可以拿到我們對所有item進行篩選的結果，true或者false。

　　接下來對原陣列每一項進行返回對應下標的結果即可。

　some

　　some作為一個用來檢測陣列是否滿足一些條件的函式存在，同樣是可以用作遍歷的

　　函式簽名同forEach，有區別的是當任一callback返回值匹配為true則會直接返回true，如果所有的callback匹配均為false，則返回false

　　我們要判斷陣列中是否有元素等於2：

[1, 2, 3].some(item => item === 2)
// > true

　　然後我們將它改為Promise

[1, 2, 3].some(async item => item === 2)
// > true

　　這個函式依然會返回true，但是卻不是我們想要的，因為這個是async返回的Promise物件被認定為true。

　　所以，我們要進行如下處理：

Array.prototype.someSync = async function (callback, thisArg) {
  for (let [index, item] of Object.entries(this)) {
    if (await callback(item, index, this)) return true
  }

  return false
}
await [1, 2, 3].someSync(async item => item === 2)
// > true

　　因為some在匹配到第一個true之後就會終止遍歷，所以我們在這裡邊使用forEach的話是在效能上的一種浪費。

　　同樣是利用了await會忽略普通表示式的優勢，在內部使用for-of來實現我們的需求

　every

　　以及我們最後的一個every

　　函式簽名同樣與forEach一樣，

　　但是callback的處理還是有一些區別的：

　　其實換一種角度考慮，every就是一個反向的some

　　some會在獲取到第一個true時終止

　　而every會在獲取到第一個false時終止，如果所有元素均為true，則返回true

　　我們要判定陣列中元素是否全部大於3

[1, 2, 3].every(item => item > 3)
// > false

　　很顯然，一個都沒有匹配到的，而且回撥函式在執行到第一次時就已經終止了，不會繼續執行下去。

　　我們改為Promise版本：

[1, 2, 3].every(async => item > 3)
// > true

　　這個必然是true，因為我們判斷的是Promise物件

　　所以我們拿上邊的someSync實現稍微修改一下：

Array.prototype.everySync = async function (callback, thisArg) {
  for (let [index, item] of Object.entries(this)) {
    if (!await callback(item, index, this)) return false
  }

  return true
}
await [1, 2, 3].everySync(async item => item === 2)
// > false

　　當匹配到任意一個false時，直接返回false，終止遍歷。

　後記

　　關於陣列的這幾個遍歷方法。

　　因為map和reduce的特性，所以是在使用async時改動最小的函式。

　　reduce的結果很像一個洋蔥模型

　　但對於其他的遍歷函式來說，目前來看就需要自己來實現了。

　　四個*Sync函式的實現：https://github.com/Jiasm/notebook/tree/master/array-sync

　參考資料

　　Array - JavaScript | MDN