ES6 之reduce的基本介绍与使用

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

 

 

01 基本介绍

 

 

定义:

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

形式:

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

参数

callback:回调函数(必选)

initValue:初始值(可选)

 
callback回调函数的参数

  • total(t):累计器完成计算的返回值(必选)
  • value(v):当前元素(必选)
  • index(i):当前元素的索引(可选)
  • array(a):当前元素所属的数组对象(可选)

 

 
过程(重点看)
 

以t 作为累计结果的初始值,不设置t则以数组第一个元素为初始值

 

开始遍历,使用累计器处理v,将v的映射结果累计到t上,结束此次循环,返回t

 

进入下一次循环,重复上述操作,直至数组最后一个元素
 

结束遍历,返回最终的t

 
 

02 如何运行

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

[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() 的几个强大用法:
 

数组求和
var total = [ 0, 1, 2, 3 ].reduce(( acc, cur ) => {
    return acc + cur
}, 0);
console.log(total)   // 6

 

二维数组转为一维数组
var array = [[1, 2], [3, 4], [5, 6]].reduce(( acc, cur ) => {
    return acc.concat(cur)
}, []);

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

 

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

 
方法一:

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 }

 
方法二:

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

 

数组去重

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

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方法去实现
查看答案

 
 
大家好,从2月开始,将每天更新公众号,欢迎大家阅读;也可以私信我,你想看的内容

写文章不容易,请给一个**赞、在看**吧;
你的支持,是我写下去的动力


'公众号'

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bug收集

谢谢老板的鼓励,我会继续加油

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值