如何使用JS數(shù)組Reduce方法

這篇文章主要講解了如何使用JS數(shù)組Reduce方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

概述

一直以來(lái)都在函數(shù)式編程的大門(mén)之外徘徊，要入門(mén)的話首先得熟悉各種高階函數(shù)，數(shù)組的reduce方法就是其中之一。

reduce方法將會(huì)對(duì)數(shù)組元素從左到右依次執(zhí)行reducer函數(shù)，然后返回一個(gè)累計(jì)的值。舉個(gè)形象的例子：你要組裝一臺(tái)電腦，買(mǎi)了主板、CPU、顯卡、內(nèi)存、硬盤(pán)、電源...這些零件是組裝電腦的必要條件。

裝的過(guò)程可以簡(jiǎn)單概括為拆掉每個(gè)零件的包裝，再裝到一起。類(lèi)比一下reduce函數(shù)就可以明白了，那些零件就相當(dāng)于要執(zhí)行reduce方法的數(shù)組，對(duì)每個(gè)零件執(zhí)行拆除包裝的加工程序，就是對(duì)數(shù)組的每個(gè)元素執(zhí)行reducer函數(shù)，把這些零件裝到一起，就相當(dāng)于reduce方法的任務(wù)，最終組裝好的電腦相當(dāng)于reduce方法的返回值。

reduce方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是回調(diào)函數(shù)reducer，第二個(gè)參數(shù)是初始值。reducer函數(shù)接收四個(gè)參數(shù)：

• Accumulator：MDN上解釋為累計(jì)器，但我覺(jué)得不恰當(dāng)，按我的理解它應(yīng)該是截至當(dāng)前元素，之前所有的數(shù)組元素被reducer函數(shù)處理累計(jì)的結(jié)果
• Current：當(dāng)前被執(zhí)行的數(shù)組元素
• CurrentIndex: 當(dāng)前被執(zhí)行的數(shù)組元素索引
• SourceArray：原數(shù)組，也就是調(diào)用reduce方法的數(shù)組

如果傳入第二個(gè)參數(shù)，reduce方法會(huì)在這個(gè)參數(shù)的基礎(chǔ)上開(kāi)始累計(jì)執(zhí)行。

概念講了那么多，那reduce它的執(zhí)行機(jī)制是怎樣的呢？別著急，從用法入手一點(diǎn)一點(diǎn)分析。

來(lái)個(gè)最好理解的例子：數(shù)組求和

  const arr = [1, 2, 3, 4]
  const accumulator = (total, current, currentIndex, arr) => {
   console.log(total, current, currentIndex, arr);
   return total + current
  }
  console.log(arr.reduce(accumulator))

執(zhí)行結(jié)果如下：

很明確，最終的結(jié)果就是把所有數(shù)組的元素都加起來(lái)。值得注意的是，它將數(shù)組的第一個(gè)元素作為累加的初始值，然后再依次對(duì)后邊的元素執(zhí)行reducer函數(shù)。

總共執(zhí)行了三次，得出最終結(jié)果。那如果傳入初始值，是怎樣的執(zhí)行順序？

console.log(arr.reduce(accumulator, 3))

結(jié)果如下：

這次是以傳入的初始值作為累加的起點(diǎn)，然后依次對(duì)數(shù)組的元素執(zhí)行reducer。

假設(shè)對(duì)沒(méi)有初始值的空數(shù)組調(diào)用reduce方法，則會(huì)報(bào)錯(cuò)：

Uncaught TypeError: Reduce of empty array with no initial value

一些用法

講了一些概念，但使用場(chǎng)景更重要，下面來(lái)看一下reduce方法都會(huì)有哪些用途。

compose函數(shù)

compose是函數(shù)式編程的一種形式，用于將多個(gè)函數(shù)合并，上一個(gè)函數(shù)的返回值作為當(dāng)前函數(shù)的入?yún)?，?dāng)前函數(shù)的返回值再作為下一個(gè)函數(shù)的入?yún)?，這樣的效果有點(diǎn)類(lèi)似于koa中間件的洋蔥模型。

[a, b, c, d] => a(b(c(d())))

實(shí)際上和累加差不多，只不過(guò)把累加操作變成了入?yún)?zhí)行，相加的結(jié)果變成了執(zhí)行的返回值。redux的applyMiddleware內(nèi)就使用了compose，目的是保證最終的dispatch是被所有中間件處理后的結(jié)果。

下面來(lái)以applyMiddleware中的compose為例，先看用法：

const result = compose(a, b, c)(params)

執(zhí)行情況是這樣：

(params) => a(b(c(params)))

返回的是一個(gè)函數(shù)，將params作為該函數(shù)的入?yún)?，被右?cè)第一個(gè)函數(shù)執(zhí)行，執(zhí)行順序是從右到左執(zhí)行，其余的函數(shù)的參數(shù)都是上一個(gè)函數(shù)的返回值。

看一下實(shí)現(xiàn)：

function compose(...funcs) {
 // funcs是compose要組合的那些函數(shù)，arg是componse返回的函數(shù)的參數(shù)
 if (funcs.length === 0) {
  // 如果沒(méi)有傳入函數(shù)，那么直接返回一個(gè)函數(shù)，函數(shù)的返回值就是傳進(jìn)來(lái)的參數(shù)
  return arg => arg
 }
 if (funcs.length === 1) {
  // 如果只傳入了一個(gè)函數(shù)，直接返回這個(gè)函數(shù)
  return funcs[0]
 }

 return funcs.reduce((all, current) => {
  return (...args) => {
   return all(current(...args))
  }
 })
}

扁平化數(shù)組

const array = [[0, 1], [2, 3], [4, 5]]
const flatten = arr => {
 return arr.reduce((a, b) => {
  return a.concat(b)
 }, [])
}
console.log(flatten(array)); // [0, 1, 2, 3, 4, 5]

來(lái)看一下執(zhí)行過(guò)程，

• 第一次執(zhí)行，初始值傳入[]，走到reduce的回調(diào)里，參數(shù)a就這個(gè)[]，參數(shù)b是數(shù)組第一項(xiàng)[0, 1]，回調(diào)內(nèi)[].cancat([0, 1])
• 第二次執(zhí)行，reduce的回調(diào)參數(shù)a是上一次回調(diào)執(zhí)行的結(jié)果[0, 1]，本次繼續(xù)用它來(lái)concat數(shù)組的第二項(xiàng)[2, 3]，得到結(jié)果[0, 1, 2, 3]作為下一次回調(diào)執(zhí)行的參數(shù)a繼續(xù)執(zhí)行下去
• ...以此類(lèi)推

那么假設(shè)數(shù)組是這樣呢？[[0, [111, 222], 1], [2, [333, [444, 555]], 3], [4, 5]]，其實(shí)加個(gè)遞歸調(diào)用就可以

const array = [[0, [111, 222], 1], [2, [333, [444, 555]], 3], [4, 5]]
const flatten = arr => {
 return arr.reduce((a, b) => {
  if (b instanceof Array) {
   return a.concat(flatten(b))
  }
  return a.concat(b)
 }, [])
}
console.log(flatten(array)); // [0, 111, 222, 1, 2, 333, 444, 555, 3, 4, 5]

統(tǒng)計(jì)字符串中每個(gè)字符出現(xiàn)的次數(shù)

每次回調(diào)執(zhí)行的時(shí)候，都會(huì)往對(duì)象中加一個(gè)key為字符串，value為出現(xiàn)次數(shù)的鍵值，若已經(jīng)存儲(chǔ)過(guò)字符串，那么它的value加1。

const str = 'adefrfdnnfhdueassjfkdiskcddfjds'
const arr = str.split('')
const strObj = arr.reduce((all, current) => {
 if (current in all) {
  all[current]++
 } else {
  all[current] = 1
 }
 return all
}, {})

console.log(strObj)
// {"a":2,"d":7,"e":2,"f":5,"r":1,"n":2,"h":1,"u":1,"s":4,"j":2,"k":2,"i":1,"c":1}

數(shù)組去重

const arr = ['1', 'a', 'c', 'd', 'a', 'c', '1']
const afterUnique = arr.reduce((all, current) => {
 if (!all.includes(current)) {
  all.push(current)
 }
 return all
}, [])
console.log(afterUnique); // ["1", "a", "c", "d"]

按照順序調(diào)用promise

這種方式實(shí)際上處理的是promise的value，將上一個(gè)promise的value作為下一個(gè)promise的value進(jìn)行處理。

const prom1 = a => {
 return new Promise((resolve => {
  resolve(a)
 }))
}
const prom2 = a => {
 return new Promise((resolve => {
  resolve(a * 2)
 }))
}
const prom3 = a => {
 return new Promise((resolve => {
  resolve(a * 3)
 }))
}

const arr = [prom1, prom2, prom3]
const result = arr.reduce((all, current) => {
 return all.then(current)
}, Promise.resolve(10))

result.then(res => {
 console.log(res);
})

實(shí)現(xiàn)

通過(guò)上面的用法，可以總結(jié)出來(lái)reduce的特點(diǎn)：

• 接收兩個(gè)參數(shù)，第一個(gè)為函數(shù)，函數(shù)內(nèi)會(huì)接收四個(gè)參數(shù)：Accumulator Current CurrentIndex SourceArray，第二個(gè)參數(shù)為初始值。
• 返回值為一個(gè)所有Accumulator累計(jì)執(zhí)行的結(jié)果

 Array.prototype.myReduce = function(fn, base) {
  if (this.length === 0 && !base) {
   throw new Error('Reduce of empty array with no initial value')
  }
  for (let i = 0; i < this.length; i++) {
   if (!base) {
    base = fn(this[i], this[i + 1], i, this)
    i++
   } else {
    base = fn(base, this[i], i, this)
   }
  }
  return base
 }

看完上述內(nèi)容，是不是對(duì)如何使用JS數(shù)組Reduce方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。