天天看点

java reduce的用法,JS - 基础学习(6): reduce() 方法

在前后端数据交互的过程中,为了能够减少ajax请求次数,减轻带宽压力,后端往往会将当前接口所需的参数以对象的形式集体返回。这样就导致一个问题:对象内字段属性过多,而有些小组件功能又压根不需要这么一个大对象参数(主要是对象属性过多,难得理,也懒得找),这时就需要对这个大对象做再加工处理。

比如:将小组件所需的字段属性拎出来单独再封装成一个小对象。一般情况下我的写法是:

let retData = {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, j: 9, k: 10, m: 11, n: 12};

let tempData={

a: retData.a,

c: retData.c,

d: retData.d,

g: retData.g,

};

但是这种写法却很麻烦,要一个属性一个属性的添加,于是就突发奇想地想优化一下这种写法。苦思冥想该怎么玩,即要写起来简单,又要显得 big 高,所以就用到了reduce()方法。

reduce方法的定义和用法

reduce() 方法接收一个回调函数作为处理器,数组中的每一个元素(从左到右)【不包括数组中被删除或从未被赋值的元素】依次执行该回调函数,并最终计算为一个值或一个对象。reduce() 可以作为一个高阶函数,用于函数的 compose。

reduce() 方法回调函数接受四个参数:提供的初始值(或上一次调用回调函数返回的值),当前被处理的元素,当前正被处理元素在数组中的索引,调用 reduce方法 的数组。

语法:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)//或

array.reduce(callback,[initialValue])

参数:

java reduce的用法,JS - 基础学习(6): reduce() 方法

基本用法:

1、实例解析 initialValue参数

11、不传 initialValue参数

let testArr = [1, 2, 3, 4];

let sum= testArr.reduce((prev, currentValue, currentIndex, testArr) =>{

console.log(prev, currentValue, currentIndex);return prev +currentValue;

});

console.log(`sum: ${sum}`);

java reduce的用法,JS - 基础学习(6): reduce() 方法

 输出结果。

从控制台打印结果可以看出:由于没有给 reduce 方法传入 initialValue参数,所以 reduce 方法的回调函数 total参数 以 testArr数组的第一个元素作为初始值,currentValue则从第二个元素开始,因而 currentIndex从1开始。所以,虽然 testArr数组的长度是4,但是 reduce方法只循环了 3次。

12、传入 initialValue参数

let testArr = [1, 2, 3, 4];

let sum= testArr.reduce((prev, currentValue, currentIndex, testArr) =>{

console.log(prev, currentValue, currentIndex);return prev +currentValue;

},0);

console.log(`sum: ${sum}`);

java reduce的用法,JS - 基础学习(6): reduce() 方法

输出结果。

这次给 reduce方法 传入了 initialValue参数,所以 total参数以 initialValue参数 作为初始值,currentValue则自然而然从第一个元素开始,currentIndex也就从0开始。所以,testArr数组的长度是4,reduce方法也就循环了 4次。

13、如果array数组是个空数组,且未传入 initialValue参数。此时代码执行会报错,回调函数也不会被执行。

let testArr =[];

let sum= testArr.reduce((prev, currentValue, currentIndex, testArr) =>{

console.log(prev, currentValue, currentIndex);return prev +currentValue;

});//index_reduce.js:18 Uncaught TypeError: Reduce of empty array with no initial value

java reduce的用法,JS - 基础学习(6): reduce() 方法

14、如果array数组是个空数组,但传入 initialValue参数。此时代码能顺利执行,回调函数也会执行,只是由于是空数组,没得结果而已。

let testArr =[];

let sum= testArr.reduce((prev, currentValue, currentIndex, testArr) =>{

console.log(prev, currentValue, currentIndex);return prev +currentValue;

},0);

所以:不管什么情况下,传入 initialValue参数值,都会让代码执行更安全,也更好维护。

其他用法: