javaScript高阶函数-reduce

前言

可能部分同学很少在项目中使用到reduce，使用过的朋友感觉到它是非常的方便。
一问reduce可以干什么？有哪些好用便捷之处？
下面我们将详细解释并举例使用，相信看完本篇文章后你会有更深和对其有一定的了解。

什么是reduce

reduce是es6中新增的一个方法，普遍用于求和使用，但你知道吗，它不只是可以用于求和，还有其他的使用方法和技巧。

让我们一起看看它还有哪些奥妙之处。let’s go

reduce 语法

1	arr.reduce(callback,[initialValue])

reduce为数组中的每一个元素依次执行回调函数callback，不包括数组中被删除或从未被赋值的元素，接受四个参数：

「初始值」（或者上一次回调函数的返回值）
「当前元素值」
「当前索引」
「调用 reduce 的数组」。

callback回调函数必须有返回值。

initialValue(可选参数)

当设置了initialValue参数时，callback 第一个参数初始值将默认是 initialValue。

1
2
3

let arr = [1, 2, 3, 4];
let sum = arr.reduce((pre, cur, index, arr) =>  pre + cur)
console.log(arr, sum); // [1, 2, 3, 4]，10

Tips：当arr为空时，并且没有初始值，会报错。如下图

当设置默认值过后，尽管arr为空，它不会报错了，看下面的代码

1
2
3

let arr = [];
let sum = arr.reduce((pre, cur, index, arr) => pre + cur)
console.log(arr, sum); // []，0

下面让我们看看reduce都有些什么用法吧

一、简单求和、乘积

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x, y) => x + y)
let sumOne = arr.reduce((x, y)=> x * y)
console.log(sum); // 求和，10
console.log(sumOne); // 求乘积，24

二、查找数组中的最大值

1
2
3

let arr = [1, 2, 3, 4];
let sum = arr.reduce((item, next) => Math.max(item, next))
console.log(sum); // 4

三、多维数组转一维

通过reduce搭配concat即可实现多维数组的转换

二维数组转一维

1
2
3

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre, cur)=> pre.concat(cur), [])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

多维数组转一维

let arr = [[0, 1], [2, 3], [4, [5, 6, 7, 8]]]
let newArr = (arr) => arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur), [])

console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7, 8]

四、数组去重

普通的一维数组去重

let  arr = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1];
let newArr = arr.reduce((pre, cur) => {
    pre.indexOf(cur) === -1 && pre.push(cur);
    return pre;
},[]);
console.log(newArr) // [1, 2, 3, 4, 5]

数组对象去重
关于对象数组去重我们需要根据对象中的一个键名作为条件，去达到去重的效果。

let data = [
    {name: 'tom', id: 1},
    {name: 'jack', id: 2},
    {name: 'tom2', id: 2},
    {name: 'Judy', id: 1}
]
let hash = {}
data = data.reduce((item, next) => {
  // 根据 id 去重
  if (!hash[next.id]) {
    hash[next.id] = true
    item.push(next)
  }
  return item
}, [])
console.log(hash) // {1: true, 2: true}
console.log(data) // [{name: 'tom', id: 1},{name: 'jack', id: 2}]

五、计算元素出现的次数

let arr = ['tom', 'jack', 'Alice', 'tom', 'jack'];

let arrCount = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1
  }
  return pre
},{})
console.log(arrCount); //{tom: 2, jack: 2, Alice: 1}