[[227682]]

這里指的遍歷方法包括：map、reduce、reduceRight、forEach、filter、some、every，因為最近要進行了一些數(shù)據(jù)匯總，node版本已經(jīng)是8.11.1了，所以直接寫了個async/await的腳本。但是在對數(shù)組進行一些遍歷操作時，發(fā)現(xiàn)有些遍歷方法對Promise的反饋并不是我們想要的結(jié)果。

當(dāng)然，有些嚴(yán)格來講并不能算是遍歷，比如說some，every這些的。

但確實，這些都會根據(jù)我們數(shù)組的元素來進行多次的調(diào)用傳入的回調(diào)。

這些方法都是比較常見的，但是當(dāng)你的回調(diào)函數(shù)是一個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最友好的一個函數(shù)了。

我們都知道，map接收兩個參數(shù)：

1.     對每項元素執(zhí)行的回調(diào)，回調(diào)結(jié)果的返回值將作為該數(shù)組中相應(yīng)下標(biāo)的元素
2.     一個可選的回調(diào)函數(shù)this指向的參數(shù)

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

上邊是一個普通的map執(zhí)行，但是當(dāng)我們的一些計算操作變?yōu)楫惒降模?/p>

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

這時候，我們獲取到的返回值其實就是一個由Promise函數(shù)組成的數(shù)組了。

所以為什么上邊說map函數(shù)為最友好的，因為我們知道，Promise有一個函數(shù)為Promise.all

會將一個由Promise組成的數(shù)組依次執(zhí)行，并返回一個Promise對象，該對象的結(jié)果為數(shù)組產(chǎn)生的結(jié)果集。

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

首先使用Promise.all對數(shù)組進行包裝，然后用await獲取結(jié)果。

reduce/reduceRight

reduce的函數(shù)簽名想必大家也很熟悉了，接收兩個參數(shù)：

1.對每一項元素執(zhí)行的回調(diào)函數(shù)，返回值將被累加到下次函數(shù)調(diào)用中，回調(diào)函數(shù)的簽名：

• accumulator累加的值
• currentValue當(dāng)前正在處理的元素
• currentIndex當(dāng)前正在處理的元素下標(biāo)
• array調(diào)用reduce的數(shù)組

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"} 

這個結(jié)果返回的就會很詭異了，我們在回看上邊的reduce的函數(shù)簽名

對每一項元素執(zhí)行的回調(diào)函數(shù)，返回值將被累加到下次函數(shù)調(diào)用中

然后我們再來看代碼，async (accumulator, item) => accumulator += item

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

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

也就是說，我們reduce的回調(diào)函數(shù)返回值其實就是一個Promise對象

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

當(dāng)然，reduce的調(diào)整也是很輕松的：

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

我們對accumulator調(diào)用await，然后再與當(dāng)前item進行加和，在***我們的reduce返回值也一定是一個Promise，所以我們在最外邊也添加await的字樣

也就是說我們每次reduce都會返回一個新的Promise對象，在對象內(nèi)部都會獲取上次Promise的結(jié)果。

我們調(diào)用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只是執(zhí)行順序相反而已

forEach

forEach，這個應(yīng)該是用得最多的遍歷方法了，對應(yīng)的函數(shù)簽名：

1.callback，對每一個元素進行調(diào)用的函數(shù)

• currentValue，當(dāng)前元素
• index，當(dāng)前元素下標(biāo)
• array，調(diào)用forEach的數(shù)組引用

2.thisArg，一個可選的回調(diào)函數(shù)this指向

我們有如下的操作：

// 獲取數(shù)組元素求平方后的值  
[1, 2, 3].forEach(item => {  
  console.log(item ** 2)  
})  
// > 1  
// > 4  
// > 9 

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

// 獲取數(shù)組元素求平方后的值  
[1, 2, 3].forEach(async item => {  
  console.log(item ** 2)  
})  
// > nothing 

forEach并不關(guān)心回調(diào)函數(shù)的返回值，所以forEach只是執(zhí)行了三個會返回Promise的函數(shù)

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

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作為一個篩選數(shù)組用的函數(shù)，同樣具有遍歷的功能：

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

我們要進行一個奇數(shù)的篩選，所以我們這么寫：

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

然后我們改為Promise版本：

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

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

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) 

我們可以直接在內(nèi)部調(diào)用map方法，因為我們知道m(xù)ap會將所有的返回值返回為一個新的數(shù)組。

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

接下來對原數(shù)組每一項進行返回對應(yīng)下標(biāo)的結(jié)果即可。

some

some作為一個用來檢測數(shù)組是否滿足一些條件的函數(shù)存在，同樣是可以用作遍歷的

函數(shù)簽名同forEach，有區(qū)別的是當(dāng)任一callback返回值匹配為true則會直接返回true，如果所有的callback匹配均為false，則返回false

我們要判斷數(shù)組中是否有元素等于2：

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

然后我們將它改為Promise

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

這個函數(shù)依然會返回true，但是卻不是我們想要的，因為這個是async返回的Promise對象被認(rèn)定為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會忽略普通表達式的優(yōu)勢，在內(nèi)部使用for-of來實現(xiàn)我們的需求

every

以及我們***的一個every

函數(shù)簽名同樣與forEach一樣，

但是callback的處理還是有一些區(qū)別的：

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

some會在獲取到***個true時終止

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

我們要判定數(shù)組中元素是否全部大于3

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

很顯然，一個都沒有匹配到的，而且回調(diào)函數(shù)在執(zhí)行到***次時就已經(jīng)終止了，不會繼續(xù)執(zhí)行下去。

我們改為Promise版本：

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

這個必然是true，因為我們判斷的是Promise對象

所以我們拿上邊的someSync實現(xiàn)稍微修改一下：

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 

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

后記

關(guān)于數(shù)組的這幾個遍歷方法。

因為map和reduce的特性，所以是在使用async時改動最小的函數(shù)。

reduce的結(jié)果很像一個洋蔥模型

但對于其他的遍歷函數(shù)來說，目前來看就需要自己來實現(xiàn)了。

四個*Sync函數(shù)的實現(xiàn)：https://github.com/Jiasm/notebook/tree/master/array-sync