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

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

創(chuàng)新互聯(lián)是一家從事企業(yè)網(wǎng)站建設(shè)、成都做網(wǎng)站、成都網(wǎng)站制作、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)制作的專業(yè)網(wǎng)站建設(shè)公司，擁有經(jīng)驗(yàn)豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁設(shè)計(jì)人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實(shí)力，在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨(dú)特的設(shè)計(jì)風(fēng)格。自公司成立以來曾獨(dú)立設(shè)計(jì)制作的站點(diǎn)上1000家。

概述

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

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

裝的過程可以簡單概括為拆掉每個(gè)零件的包裝，再裝到一起。類比一下reduce函數(shù)就可以明白了，那些零件就相當(dāng)于要執(zhí)行reduce方法的數(shù)組，對每個(gè)零件執(zhí)行拆除包裝的加工程序，就是對數(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ì)器，但我覺得不恰當(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ǔ)上開始累計(jì)執(zhí)行。

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

來個(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é)果如下：

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

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

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

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

結(jié)果如下：

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

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

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

Uncaught TypeError: Reduce of empty array with no initial value

一些用法

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

compose函數(shù)

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

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

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

下面來以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) {
  // 如果沒有傳入函數(shù)，那么直接返回一個(gè)函數(shù)，函數(shù)的返回值就是傳進(jìn)來的參數(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]

來看一下執(zhí)行過程，

  • 第一次執(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ù)用它來concat數(shù)組的第二項(xiàng)[2, 3]，得到結(jié)果[0, 1, 2, 3]作為下一次回調(diào)執(zhí)行的參數(shù)a繼續(xù)執(zhí)行下去
  • ...以此類推

那么假設(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ì)往對象中加一個(gè)key為字符串，value為出現(xiàn)次數(shù)的鍵值，若已經(jīng)存儲(chǔ)過字符串，那么它的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)

通過上面的用法，可以總結(jié)出來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)容，是不是對如何使用JS數(shù)組Reduce方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：如何使用JS數(shù)組Reduce方法
本文來源：http://muchs.cn/article4/ijoioe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、企業(yè)建站、自適應(yīng)網(wǎng)站、網(wǎng)站改版、定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司