【春节日更】ES6 之reduce的基本介绍与使用

发布于

现在ES6语法应用的特别广泛，今天我们就来介绍下ES6中的reduce方法，它的用法非常强大，下面就跟着我一起来学习它吧

01

基本介绍

定义：对数组中的每个元素执行一个自定义的累计器，将其结果汇总为单个返回值

形式：array.reduce((t, v, i, a) => {}, initValue)

参数

callback：回调函数(必选)

initValue：初始值(可选)

callback回调函数的参数

total(t)：累计器完成计算的返回值(必选)

value(v)：当前元素(必选)

index(i)：当前元素的索引(可选)

array(a)：当前元素所属的数组对象(可选)

过程(重点看)

  1. 以t 作为累计结果的初始值，不设置t则以数组第一个元素为初始值
  2. 开始遍历，使用累计器处理v，将v的映射结果累计到t上，结束此次循环，返回t
  3. 进入下一次循环，重复上述操作，直至数组最后一个元素
  4. 结束遍历，返回最终的t

02

如何运行

假如运行下段reduce()代码：

代码语言：javascript
复制
[0, 1, 2, 3, 4].reduce(function(t, v, i, a){
return t + v;
});

callback 被调用四次，每次调用的参数和返回值如下表：

callback

t

v

i

a

return value

first call

0

1

1

[0, 1, 2, 3, 4]

1

second call

1

2

2

[0, 1, 2, 3, 4]

3

third call

3

3

3

[0, 1, 2, 3, 4]

6

fourth call

6

4

4

[0, 1, 2, 3, 4]

10

03

reduce方法的应用

reduce() 的几个强大用法：

数组求和

代码语言：javascript
复制
var total = [ 0, 1, 2, 3 ].reduce(( acc, cur ) => {
    return acc + cur
}, 0);
console.log(total)   // 6

二维数组转为一维数组

代码语言：javascript
复制
var array = [[1, 2], [3, 4], [5, 6]].reduce(( acc, cur ) => {
    return acc.concat(cur)
}, []);

console.log(array)  // [ 1, 2, 3, 4, 5, 6 ]

计算数组中每个元素出现的次数

方法一：

代码语言：javascript
复制
let names = ['tom', 'jim', 'jack', 'tom', 'jack'];

const countNames = names.reduce((allNames, name) => {

if (name in allNames) {

allNames[name] ++;

}

else {

allNames[name] = 1;

}

return allNames;

}, {});


console.log(countNames)  // { tom: 2, jim: 1, jack: 2 }

方法二：

代码语言：javascript
复制
const arraySum = (arr, val) => arr.reduce((acc, cur) => {

return cur == val ? acc + 1 : acc + 0

}, 0);


let arr = [ 0, 1, 3, 0, 2, 0, 2, 3 ]

console.log(arraySum(arr, 0)) // 数组arr中 0 元素出现的次数为3

数组去重

下面的方法，先要对数组进行升序排列

代码语言：javascript
复制
let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];

let result = arr.sort().reduce((init, current) => {

if (init.length === 0 || init[init.length - 1] !== current) {

init.push(current);

}

return init;

}, []);

console.log(result); //[1,2,3,4,5]

今日面试题：

完成一个'flatten'的函数，实现“拍平”一个多维数组为一维.

如：var testArr2 = [0, [1, [2, [3, [4, [5]]]]]];

（ 注:每天的面试题的答案，将在第二天，发在bug收集网站中 ）

提示：使用reduce方法去实现

#mapreduce#ecmascript#编程算法