數(shù)組的reduce方法

趙春朋發(fā)布于2019-08-22 10:50 / 2429人閱讀

摘要：數(shù)組的方法大家對(duì)數(shù)組的，等的操作應(yīng)該都比較熟悉了。首先，的用法如下對(duì)數(shù)組中的所有元素調(diào)用指定的回調(diào)函數(shù)。語(yǔ)法注意這時(shí)候只能是同步方法參數(shù)含義通過(guò)上一次調(diào)用回調(diào)函數(shù)獲得的值。否者將是調(diào)用數(shù)組的第一項(xiàng)當(dāng)前數(shù)組元素的值。

數(shù)組的reduce方法

async await reduce array

大家對(duì)數(shù)組的map,filter，forEach等的操作應(yīng)該都比較熟悉了。這兩天寫(xiě)代碼的時(shí)候用到了reduce方法，一不小心寫(xiě)出了一個(gè)bug，在此記錄一下。

首先，reduce的用法如下：

對(duì)數(shù)組中的所有元素調(diào)用指定的回調(diào)函數(shù)。該回調(diào)函數(shù)的返回值為累積結(jié)果，并且此返回值在下一次調(diào)用該回調(diào)函數(shù)時(shí)作為參數(shù)提供。

語(yǔ)法：

array.reduce(callback[,initialValue]) //注意這時(shí)候只能是同步方法

function callbackfn(previousValue, currentValue, currentIndex, array1)

參數(shù)	含義
previousValue	通過(guò)上一次調(diào)用回調(diào)函數(shù)獲得的值。如果向 reduce 方法提供initialValue，則在首次調(diào)用函數(shù)時(shí)，previousValue 為 initialValue。否者將是調(diào)用數(shù)組的第一項(xiàng)
currentValue	當(dāng)前數(shù)組元素的值。
currentIndex	當(dāng)前數(shù)組元素的數(shù)字索引。
array1	包含該元素的數(shù)組對(duì)象。

實(shí)現(xiàn)：

// 實(shí)現(xiàn)數(shù)組的每一項(xiàng)之和
var arr = [1,2,3,4]
arr.reduce((pre,cur) => {return pre + cur}) // return 10

實(shí)現(xiàn)數(shù)組的每一項(xiàng)轉(zhuǎn)化為對(duì)象,例({1: 1, 2: 2, 3: 3, 4: 4})
var arr = [1,2,3,4]
arr.reduce((final,cur) => {
  final[cur] = cur
  return final
}, {}) // return {1: 1, 2: 2, 3: 3, 4: 4}

BUG
昨天的代碼，我是這么實(shí)現(xiàn)的：

async function getGroup() {
    ...
}

async function getGroups() {
  var arr = [1,2,3]
  const result = arr.reduce(async (final,cur) => {
    final[cur] = await getGroup(cur)
    console.log(final, "<===final")
    return final
  }, {}) 
}
// final的打印值
{ "9ddc9834-9344-4cc1-be38-ba2d0e9d17c5": { recommendType: 1, weight: 123 } } "<===final"
Promise {
  _c: [],
  _a: undefined,
  _s: 1,
  _d: true,
  _v: { "9ddc9834-9344-4cc1-be38-ba2d0e9d17c5": { recommendType: 1, weight: 123 } },
  _h: 0,
  _n: false,
  "9bb6ed56-29a3-47e5-89a8-b652e8f08ef8": { recommendType: 2, weight: 12 } } "<===final"
Promise {
  _c: [],
  _a: undefined,
  _s: 0,
  _d: false,
  _v: undefined,
  _h: 0,
  _n: false,
  "30ffffd8c9-2132-4d27-bc4b-4d27305acec9": {} }"<===final"

我們可以看到final的值并不是我們預(yù)期的，循環(huán)中只有第一個(gè)值是對(duì)的，后面的值都不對(duì)，而且看起來(lái)是個(gè)Promise對(duì)象。這是為什么呢？
接下來(lái)看到上面的實(shí)現(xiàn)翻譯成reduce的底層實(shí)現(xiàn)方式：

var final = {}
async function getGroup(final, cur){
  final[cur] = await getGroup(cur)
  console.log(final, "<===final")
  return final
}
for(var i = 0, i < arr.lenght, i++) {
   final = getGroup(final, arr[i])
   //這里沒(méi)有用async await執(zhí)行異步方法，導(dǎo)致，傳回的final只是個(gè)Promise方法對(duì)象
}

這樣我們就清楚為什么上面會(huì)打印這么奇怪的結(jié)果了。下面我們只要做小小的修改，就可以得到正確的結(jié)果：

var temp = {}
async function getGroup() {
    ...
}

async function getGroups() {
  var arr = [1,2,3]
  const result = arr.reduce(async (final,cur) => {
    temp[cur] = await getGroup(cur)
    console.log(temp, "<===final")
    return temp
  }, {}) 
}

以后還是盡量避免在reduce里面執(zhí)行異步方法~