來源 | https://segmentfault.com/a/1190000039774558

對比map、 forEach、 filter 等數(shù)組方法，reduce比它們更強(qiáng)。

1、 reduce定義和用法

reduce() 方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值。

reduce() 可以作為一個高階函數(shù)，用于函數(shù)的 compose。

注意: reduce() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

語法：

array.reduce(function(prev, cur, index, arr), init)

• prev （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
• cur （數(shù)組中當(dāng)前被處理的元素）
• index （當(dāng)前元素在數(shù)組中的索引)
• arr （調(diào)用的數(shù)組）
• init （傳遞給函數(shù)的初始值）

2、reduce瀏覽器支持情況

3、reduce累加

帶初始值

var arr = [1,2,3,4]var sum = arr.reduce((pre, item) => {    return pre + item}, 10)console.log(sum) // 20

不帶初始值

var arr = [1,2,3,4]var sum = arr.reduce((pre, item) => {    return pre + item},)console.log(sum) // 10

4、reduce數(shù)組去重

var arr = [1,2,3,3,2,1,4]arr.reduce((acc, cur) => {  if (!(acc.includes(cur))) {    acc.push(cur)  }  return acc}, [])// [1, 2, 3, 4]

5、reduce求數(shù)組項最大值

var arr = [1, 2, 3, 4];arr.reduce((prev, cur) => {    return Math.max(prev,cur);});//4

6、reduce將二維數(shù)組轉(zhuǎn)為一維數(shù)組

var arr = [[1,2], [3,4], [5,6]]arr.reduce((acc, cur) => {  return acc.concat(cur)}, [])// [1,2,3,4,5,6]

7、reduce對象里的屬性求和

var arr = [    {subject: 'Math', score: 90},    {subject: 'Chinese', score: 90},    {subject: 'English', score: 100}]arr.reduce((pre, cur) => {    return cur.score + pre}, 0)//280

8、reduce計算數(shù)組中每個元素出現(xiàn)的個數(shù)

var arr = [1, 2,3,3,2,1,2,1]arr.reduce((acc, cur) => {  if (!(cur in acc)) {    acc[cur] = 1  } else {    acc[cur] += 1  }  return acc}, {})//{1: 3, 2: 3, 3: 2}

9、reduce按屬性給數(shù)組分類

var arr = [    {subject: 'Math', score: 90},    {subject: 'Chinese', score: 90},    {subject: 'English', score: 100},    {subject: 'Math', score: 80},    {subject: 'Chinese', score: 95}];arr.reduce((acc, cur) => {  if (!acc[cur.type]) {    acc[cur.type] = [];  }  acc[cur.type].push(cur)  return acc}, {})

10、reduce實現(xiàn)map

var arr = [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  }, [])}arr.reduceMap((item, index) => {  return item + index})// [1, 3, 5, 7]

11、reduce實現(xiàn)forEach

var arr = [1, 2, 3, 4]Array.prototype.reduceForEach = function(callback) {  this.reduce((acc, cur, index, array) => {    callback(cur, index, array)  }, [])}
arr.reduceForEach((item, index, array) => {  console.log(item, index)})// 1234// 0123

12、reduce實現(xiàn)filter

var arr = [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  }, [])}arr.reduceFilter(item => item % 2 == 0) // 過濾出偶數(shù)項。// [2, 4]

13、reduce實現(xiàn)find

var arr = [1, 2, 3, 4]var obj = [{ 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      }    }        if ((index == array.length - 1) && acc instanceof Array && acc.length == 0) {      acc = undefined    }    return acc  }, [])}arr.reduceFind(item => item % 2 == 0) // 2obj.reduceFind(item => item.a % 2 == 0) // {a: 2}obj.reduceFind(item => item.a % 9 == 0) // undefined

碰到數(shù)組復(fù)雜操作的時候，就是reduce大顯身手的時候。深入研究reduce的用法，對開發(fā)大有裨益。

學(xué)習(xí)更多技能

請點擊下方公眾號