携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

前言：在我们前端开发时，往往用的最多得方法是map，filter，some，every，forEach这些方法，reduce同时作为Es5新增得方法经常会被忽略，rudece顶多被用来计算累加。下面将是对reduce得10大使用实例，赶快学习掌握它吧！

1.reduce

reduce()累加器，数组中的每个值（从左向右）开始缩减，最终计算为一个值。累加器，输出的是return叠加什么就输出什么 reduce(）不会对空数组进行检查。 arr.reduce(function(prev,cur,index,arr){}, init); prev:表示处理的前一个元素 cur:表示正在处理的元素 index:表示数组索引 arr:表示原数组

2.实例：

1.计算数组总和

var ages = [3, 4, 5, 6];
var b = ages.reduce((pre, cur) => {
  return pre + cur;
});

2.合并二维数组

二维数组

var ages = [[3, 4],[5,6]];
var b = ages.reduce((pre, cur) => {
    return pre.concat(cur);
});

reduce 可以写默认值，默认值写[],会多遍历一次，出现得值顺序是 [],4 => [4],[3,4] => [4,3,4] => [5,6] => [4,3,4,5,6],9 没有写默认值，出现得值顺序是： 4,[3,4] => [4,3,4] => [5,6] => [4,3,4,5,6],9


var ages = [4,[3, 4],[5,6],9];
var b = ages.reduce((pre, cur) => {
    return pre.concat(cur);
},[]);
1.默认值[],很重要

3.数组扁平化

数组扁平化：采用得是reduce+递归来实现

let arr = [1, [2, [3, [4, 5]]], 6]
function flatten(arr) {
   return  arr.reduce((pre, cur) => {
      if (Array.isArray(cur)) {
        return pre.concat(flatten(cur))
      }
      return pre.concat()
    }, [])
  }

4.数组最大值，最小值

输出的是return输出

var ages = [3, 4,5,6];
var b = ages.reduce((pre, cur) => {
   return Math.max(pre,cur);;
});
//b=6;

5.数组去重

var arr= [3, 5,4,4,5,3,6];
let b = arr.reduce((pre, cur) => {
      if (!pre.includes(cur)) {
        return pre.concat(cur)
      }
      return pre
    }, [])

6.计算出现次数

1.{} ：写默认值很重要 2.@returns prop in object
如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。参数prop是指属性名或者数组索引

var ages = [3, 5,4,4,5,3,6];
let b = arr.reduce((pre, cur) => {
      if (cur in pre) {
        pre[cur]++
      } else {
        pre[cur] = 1
      }
      return pre
    }, {})

7.计算对象属性某个字段得和

1.0：写默认值0很重要写了默认值，pre为数字，会多循环一遍

 let arr = [{ score: 1 },{score: 2},{score: 3}]
let b = arr.reduce((pre, cur) => {
      console.log(999, pre, cur)
      return pre + cur.score
    }, 0)

8.代替map

map 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。不会影响原来得数组，返回的是一个新得数组； reduce 返回的任何值都会作为第一个参数自动传给下一项

let arr = [0, 2, 4, 6]
let result = arr.reduce((pre: any, cur) => {
 return [...pre, cur * 2]
}, [])

map：
 let arr = [0, 2, 4, 6]
 let result = arr.map((item) => item * 2)

9.代替filter

filter 同样接收一个回调函数，回调函数返回 true 则返回当前项，反之则不返回。 reduce 原理是：符合条件得就装入数组中，不符合得就不装入

 let arr = [0, 2, 4, 6]
 let result = arr.reduce((pre: any, cur) => {
 return cur > 2 ? [...pre, cur] : pre
}, [])


filter：
 let arr = [0, 2, 4, 6]
 let result = arr.filter((item) => item > 2)

10.字符串反转

let arr = '1234'
let result = [...arr].reduceRight((pre, cur) => {return pre + cur}, '')


或者：
let arr = '1234'
let result = [...arr].reduce((pre, cur) => {return cur + pre}, '')

reduce还在只会计算总和吗？十个rudece的高级用法值得你掌握