之前我沒得選，如今我只想用 Array.prototype.reduce

前言

對於新手來講， reduce 沒有 map、 forEach、 filter 等數組方法那麼友好。可是不得不說，它們能幹的事情， reduce 一個不落下，直呼「B神」。

我心目中 reduce 的形象。

寫這篇文章的目的就是想給你們好好的介紹一下 reduce 它有多「騷」。

語法

reduce 接收 2 個參數： 第一個參數是回調函數（必選），第二個參數是初始值 initialValue（可選） 。

而第一個參數（回調函數），接收下面四個參數：

• Accumulator (acc) (累計器)
• Current Value (cur) (當前值)
• Current Index (idx) (當前索引)
• Source Array (src) (源數組)

咱們平時在業務中多數使用到的是前兩個參數，而且有如下兩種狀況。

瀏覽器支持狀況

圖片來源：caniuse.com/

不帶初始值

[1,2,3,4].reduce((acc, cur) => {
  return acc + cur
})
// 1 + 2 + 3 + 4
// 10
複製代碼

帶初始值

[1,2,3,4].reduce((acc, cur) => {
  return acc + cur
}, 10)
// 10 + 1 + 2 + 3 + 4
// 20
複製代碼

⚠️ 初始值 initialValue 能夠是任意類型。若是沒有提供 initialValue，reduce 會從索引 1 的地方開始執行 callback 方法，跳過第一個索引。若是提供 initialValue，從索引 0 開始。

它的執行就像一個貪吃蛇，蛇每吃一個豆子，豆子將會變成蛇身的一部分，蛇再去吃下一個豆子。

重塑

它的能力遠不止於此，它就像神奇寶貝里的「百變怪」，想要變成什麼就變成什麼。

reduce -> map

map 方法接收一個回調函數，函數內接收三個參數，當前項、索引、原數組，返回一個新的數組，而且數組長度不變。 知道了這些特徵以後，咱們用 reduce 重塑 map 。

const testArr = [1, 2, 3, 4]
Array.prototype.reduceMap = function(callback) {
  return this.reduce((acc, cur, index, array) => {
    const item = callback(cur, index, array)
    acc.push(item)
    return acc
  }, [])
}
testArr.reduceMap((item, index) => {
  return item + index
})
// [1, 3, 5, 7]
複製代碼

在 Array 的原型鏈上添加 reduceMap 方法，接收一個回調函數 callback 做爲參數（就是 map 傳入的回調函數），內部經過 this 拿到當前須要操做的數組，這裏 reduce 方法的第二個參數初始值很關鍵，須要設置成一個 [] ，這樣便於後面把操做完的單項塞入 acc 。咱們須要給 callback 方法傳入三個值，當前項、索引、原數組，也就是原生 map 回調函數能拿到的值。返回 item 塞進 acc，而且返回 acc ，做爲下一個循環的 acc（貪吃蛇原理）。最終 this.reduce 返回了新的數組，而且長度不變。

reduce -> forEach

forEach 接收一個回調函數做爲參數，函數內接收四個參數當前項、索引、原函數、當執行回調函數 callback 時，用做 this 的值，而且不返回值。

const testArr = [1, 2, 3, 4]
Array.prototype.reduceForEach = function(callback) {
  this.reduce((acc, cur, index, array) => {
    callback(cur, index, array)
  }, [])
}

testArr.reduceForEach((item, index, array) => {
  console.log(item, index)
})
// 1234
// 0123
複製代碼

只要看得懂 reduce -> map ，轉 forEach 只是改改結構的問題。

reduce -> filter

filter 一樣接收一個回調函數，回調函數返回 true 則返回當前項，反之則不返回。回調函數接收的參數同 forEach 。

const testArr = [1, 2, 3, 4]
Array.prototype.reduceFilter = function (callback) {
   return this.reduce((acc, cur, index, array) => {
    if (callback(cur, index, array)) {
      acc.push(cur)
    }
    return acc
  }, [])
}
testArr.reduceFilter(item => item % 2 == 0) // 過濾出偶數項。
// [2, 4]
複製代碼

filter 方法中 callback 返回的是 Boolean 類型，因此經過 if 判斷是否要塞入累計器 acc ，而且返回 acc 給下一次對比。最終返回整個過濾後的數組。

reduce -> find

find 方法中 callback 一樣也是返回 Boolean 類型，返回你要找的第一個符合要求的項。

const testArr = [1, 2, 3, 4]
const testObj = [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }]
Array.prototype.reduceFind = function (callback) {
  return this.reduce((acc, cur, index, array) => {
    if (callback(cur, index, array)) {
      if (acc instanceof Array && acc.length == 0) {
      	acc = cur
      }
    }
    // 循環到最後若 acc 仍是數組，且長度爲 0，表明沒有找到想要的項，則 acc = undefined
    if ((index == array.length - 1) && acc instanceof Array && acc.length == 0) {
      acc = undefined
    }
    return acc
  }, [])
}
testArr.reduceFind(item => item % 2 == 0) // 2
testObj.reduceFind(item => item.a % 2 == 0) // {a: 2}
testObj.reduceFind(item => item.a % 9 == 0) // undefined

複製代碼

你不知道操做的數組是對象數組仍是普通數組，因此這裏只能直接覆蓋 acc 的值，找到第一個符合判斷標準的值就再也不進行賦值操做。

諸如此類的操做，你們能夠本身練習，就當是再熟悉一遍 Array 數組方法。

衍生

同窗們可能再業務中，對 reduce 使用頻率並不高，那是由於你沒有很好的去理解它。在不少業務場景下，你用了更麻煩、更冗餘的代碼完成了你的需求。接下帶你們學習一些用 reduce 能解決的問題。

將二維數組轉爲一維數組

const testArr = [[1,2], [3,4], [5,6]]
testArr.reduce((acc, cur) => {
  return acc.concat(cur)
}, [])
// [1,2,3,4,5,6]
複製代碼

計算數組中每一個元素出現的個數

const testArr = [1, 3, 4, 1, 3, 2, 9, 8, 5, 3, 2, 0, 12, 10]
testArr.reduce((acc, cur) => {
  if (!(cur in acc)) {
    acc[cur] = 1
  } else {
    acc[cur] += 1
  }
  return acc
}, {})

// {0: 1, 1: 2, 2: 2, 3: 3, 4: 1, 5: 1, 8: 1, 9: 1, 10: 1, 12: 1}
複製代碼

這裏注意，我初始化的值變成了 {} ,這個需求須要鍵值對的形式，利用 cur in acc 判斷累計器 acc 中是否含有 cur 屬性，若是沒有默認賦值 1，若是已經存在 += 1 累加一次。 在實際的開發業務中，這個方法很是經常使用，變種也不少。好比給你一個帳單列表（項與項之間的消費類型有相同狀況），讓你統計帳單列表中各個消費類型的支出狀況，如 購物 、 學習 、 轉帳 等消費類型的支出狀況。這就用到了上述方法，去經過歸類。

按屬性給數組分類

什麼叫按照屬性給數組分類，其實就是給定一個依據，把符合條件的歸併到一塊兒。再拿帳單舉例，就是按各個消費類型歸爲一類。

const bills = [
  { type: 'shop', momey: 223 },
  { type: 'study', momey: 341 },
  { type: 'shop', momey: 821 },
  { type: 'transfer', momey: 821 },
  { type: 'study', momey: 821 }
];
bills.reduce((acc, cur) => {
  // 若是不存在這個鍵，則設置它賦值 [] 空數組
  if (!acc[cur.type]) {
    acc[cur.type] = [];
  }
  acc[cur.type].push(cur)
  return acc
}, {})
複製代碼

數組去重

這個就不解釋了，直接上代碼。

const testArr = [1,2,2,3,4,4,5,5,5,6,7]
testArr.reduce((acc, cur) => {
  if (!(acc.includes(cur))) {
    acc.push(cur)
  }
  return acc
}, [])
// [1, 2, 3, 4, 5, 6, 7]
複製代碼

上述代碼邏輯，就是逐一對比，經過 includes 方法檢查累計器裏是否已經有當前項。

求最大值或最小值

一個對象數組內，我想拿到某一項裏某個屬性最大或者最小的那一項。

const testArr = [
  { age: 20 },
  { age: 21 },
  { age: 22 }
]
testArr.reduce((acc, cur) => {
  if (!acc) {
    acc = cur
    return acc
  }
  if (acc.age < cur.age) {
    acc = cur
    return acc
  }
  return acc
}, 0)
// {age: 22}
複製代碼

第一次沒有對比直接 acc 賦值 cur ，後面進入對比判斷，若是 acc 的 age 屬性小於 cur 的 age 屬性，重製 acc 。相等的話默認返回 acc 。

總結

reduce 的使用場景還有很是多，當你遇到數組複雜操做的時候，就是它大顯身手的時候。深刻研究它，對你從此的業務開發及面試都有很大的幫助。