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 = [11, 22, 33, 44, 55];
      const sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + 1;
      });

设置函数的初始迭代值

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);

 

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

解析:

  1. arr1 是一个包含数字的数组 [1, 2, 3, 4, 5]

  2. arr1.reduce() 调用数组的 reduce 方法。这个方法接受一个回调函数作为其参数,该回调函数本身接收两个参数:a(累加器,accumulator)和 b(当前数组元素,current value)。

  3. 回调函数 (a, b) => a + b 是一个箭头函数,它将当前累加器的值 a 与当前元素的值 b 相加,并返回这个和。

  4. reduce 方法从数组的第一个元素开始,将回调函数应用于数组的每个元素,逐步构建一个单一的返回值。

  5. 在第一次调用回调函数时,a 是数组的第一个元素(1),b 是数组的第二个元素(2),因此第一次返回的值是 1 + 2

  6. 在第二次调用中,a 是第一次调用的返回值(3),b 是数组的第三个元素(3),依此类推,直到数组中的所有元素都被处理。

  7. 最终,reduce 方法返回数组所有元素相加的总和

 

数组去重:

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法12 :reduce
    function newArrFn (arr) {
      let newArr = []
      return  arr.reduce((prev, next,index, arr) => {
        // 如果包含,就返回原数据,不包含,就把新数据追加进去 
        return newArr.includes(next) ? newArr :  newArr.push(next)
      }, 0)
    }
    console.log(newArrFn(arr));

对象按属性分类:

var person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 17
    }
];
function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}
var groupedPerson = groupBy(person, 'age');
console.log(groupedPerson);

参开:JS中reduce的用法_js reduce-CSDN博客

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值