JS中 reduce() 的用法

过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它。事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce() 的用法。

一、语法

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

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

看上去是不是感觉很复杂?没关系,只是看起来而已,其实常用的参数只有两个:prev 和 cur。接下来我们跟着实例来看看具体用法吧~

二、实例

先提供一个原始数组:

var arr = [3,9,4,3,6,0,9];

 

实现以下需求的方式有很多,其中就包含使用reduce()的求解方式,也算是实现起来比较简洁的一种吧。

1. 求数组项之和

var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

 

由于传入了初始值0,所以开始时prev的值为0,cur的值为数组第一项3,相加之后返回值为3作为下一轮回调的prev值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回。

2. 求数组项最大值

var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

由于未传入初始值,所以开始时prev的值为数组第一项3,cur的值为数组第二项9,取两值最大值后继续进入下一轮回调。

3. 数组去重

var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

 

var nm=[10,12,13,15,14,12,14]
    var sum=nm.reduce(function(prev,cur,index,arr){
        console.log("28data",prev,cur,index)
        return prev+cur;
    },0);
    console.log("30",sum);//求和
    
    /* 求最大最小值--有点鸡肋 */
    var max=nm.reduce(function(prev,cur){
          return Math.max(prev,cur)
    })
    console.log("最大值",max);
    console.log("最大值",Math.max(...nm));
    
    /* 去重 */
    var newarr=nm.reduce(function(prev,cur){
        prev.indexOf(cur)==-1 && prev.push(cur);
        return prev;
    },[])
    console.log("45",newarr);
    
    var narr= Array.from(new Set(nm));
    console.log("48",narr);

 

//数组循环
    var list=[
      {
        name:"hq",
        age:"12"
      },
      {
        name:"xq",
        age:"24"
      },
      {
        name:"gq",
        age:"32"
      }
    ];
    
    /* 二维数组转为一维数组 */
    let xar = [[0, 1], [2, 3], [4, 5]]
    let newa = xar.reduce(function(prev,cur){
         return prev.concat(cur)
    },[]);
    /* 对象里的属性求和 */
    let totalnum=list.reduce(function(prev,cur){
        return prev+parseInt(cur.age)
    },0)
    console.log("27",newa)
    console.log("total",totalnum);

 

 

来源:https://www.cnblogs.com/amujoe/p/11376940.html

https://www.jianshu.com/p/e375ba1cfc47/

posted @ 2021-11-05 18:01  小小强学习网  阅读(65)  评论(0编辑  收藏  举报