js reduce用法详解

前言

   reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行),将其结果汇总为单个返回值。reduce方法可做的事情特别多,就是循环遍历能做的,reduce都可以做,比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。

语法

arr.reduce(function(prev,cur,index,arr){
...
}, init);

参数

prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值,或者初始值 init;
cur 必需。表示当前正在处理的数组元素;
index 可选。表示当前正在处理的数组元素的索引,若提供 init 值,则起始索引为- 0,否则起始索引为1;
arr 可选。表示原数组;
init 可选。表示初始值。

举例

没有设置函数的初始迭代值

const arr = [1,2,3,4,5];
const sum = arr.reduce(function(prev,cur,index,arr){
    console.log(prev,cur,index);
    return prev + cur;
});
console.log('arr:',arr,'sum:',sum);

运行结果:
image

分析:在这里reduce的作用就是对这个数组进行求和,迭代了4次,函数迭代的初始值是1,也就是默认值(数组的第一项),prev的值是每次计算后的值。

设置函数的初始迭代值

const arr = [1,2,3,4,5];
const sum = arr.reduce((prev,cur,index,arr) => {
    console.log(prev,cur,index);
    return prev + cur;
},5); 
console.log('arr:',arr,'sum:',sum);

image
分析:这里我们添加了一个初始的迭代值,也就是让prev从5开始计算(以5为初始值求和),可以看到,这里迭代了5次,结果也加上了初始值。同时,这里使用箭头函数来代替完整的函数。 运行结果相同。

reduce的应用

数组求和

let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b)) // - 15
console.log(arr.reduce((a,b) => a * b))  // - 120

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

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice', 'Bob', 'Bob'];
var countedNames = names.reduce(function (allNames, name) {
  console.log(allNames,name);
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
console.log(countedNames);
正文到此结束
热门推荐
相关文章
评论插件初始化中...
本文目录