js中的reduce函数详细解释

一、数组求和

二、数组去重

三、合并二维数组

四、统计出现的次数

五、按类型进行分类

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。循环遍历能做的，reduce都可以做。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

用法：

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

参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

一、数组求和

不设置初始值时，数组的第一项就会默认为初始值，下面的例子执行三次；

// 3 + 2

// 5 + 1

// 6 + 7

const numbers = [3, 2, 1, 7];
const sum = numbers.reduce((total, currentValue) => {console.log(total, currentValue);return total + currentValue;
});
console.log(sum);
// 3 2
// 5 1
// 6 7
// 13

设置初始值时，下面的例子执行四次；

// 0 + 3

// 3 + 2

// 5 + 1

// 6 + 7

const numbers = [3, 2, 1, 7];
const sum = numbers.reduce((total, currentValue) => {console.log(total, currentValue);return total + currentValue;
}, 0);
console.log(sum);
// 0 3
// 3 2
// 5 1
// 6 7
// 13

二、数组去重

const numbers = [3, 2, 1, 7, 3, 5, 7];
const resArr = numbers.reduce((prev, currentValue) => {if (prev.indexOf(currentValue) === -1) {prev.push(currentValue);}return prev;
}, []);
console.log(resArr); // [3, 2, 1, 7, 5]

三、合并二维数组

const numbers = [[3, 2], [1, 7], [3, 5], [7]];
const resArr = numbers.reduce((prev, currentValue) => {return prev.concat(currentValue);
}, []);
console.log(resArr); // [3, 2, 1, 7, 3, 5, 7]

四、统计出现的次数

const arr = ["a", "b", "c", "a", "b"];
const resArr = arr.reduce((prev, currentValue) => {if (prev[currentValue]) {prev[currentValue]++;} else {prev[currentValue] = 1;}return prev;
}, {});
console.log(resArr); // { a: 2, b: 2, c: 1 }

五、按类型进行分类

const arr = [{name: "Apple",num: 12,},{name: "Apple",num: 13,},{name: "Banana",num: 14,},
];
const resArr = arr.reduce((prev, currentValue) => {// 根据name进行分类var key = currentValue["name"];if (!prev[key]) {prev[key] = [];}prev[key].push(currentValue);return prev;
}, {});
console.log(resArr);
// {
//   Apple: [ { name: 'Apple', num: 12 }, { name: 'Apple', num: 13 } ],
//   Banana: [ { name: 'Banana', num: 14 } ]
// }

js中的reduce函数详细解释相关推荐

php new对象调用函数,关于JS中new调用函数的原理介绍
这篇文章主要介绍了关于JS中new调用函数的原理介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 JavaScript 中经常使用构造函数创建对象(通过 new 操作符调用一个函数) ...
c语言中signal函数详细解释说明
c语言中signal函数详细解释说明对于信号处理函数位于 <signal.h> 中. void ( *signal( int sig, void (* handler)( i ...
【printf】sprintf字符串转数值、数值转字符，拼接字符，函数详细解释 Printf 打印数值...
1.数值转成字符: sprintf个函数,如: sprintf(s, "%d", 123); //产生"123" 2.字符串转成数值: while(*BandR ...
js中的匿名函数和匿名自执行函数
1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: <input type="button" value="点击" id=& ...
js中的offset函数和position
js中的offset函数,其本身是个对象,它含有两个属性,top和left,其属性值是数字,无单位,是针对文档内容的,即浏览器而position函数,也有上述两个属性,但它是针对父元素的偏移量转载 ...
python中的reduce() 函数
在 Python3 中,reduce() 函数已经被从全局命名空间里移除了,它现在被放置在 functools 模块里,需要通过引入 functools 模块来调用 reduce() 函数: from ...
js中同名的函数的调用情况
转自:https://www.cnblogs.com/wshiqtb/p/3480597.html html中如果出现函数同名时: 如果有多个外部引入的js文件,例如a.js和b.js(引入顺序假定是 ...
JS中自动执行函数小结
JS中自动执行函数小结请看以下两个函数: 1.function a(){ 2. alert("a") 3.} 1.var b= function(){ 2. aler ...
underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...

js中的reduce函数详细解释

一、数组求和

二、数组去重

三、合并二维数组

四、统计出现的次数

五、按类型进行分类

js中的reduce函数详细解释相关推荐

最新文章

热门文章