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 @   小小强学习网  阅读(70)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
历史上的今天:
2016-11-05 js 将json字符串转换为json对象的方法解析
2016-11-05 $.extend()了解心得
2016-11-05 angularjs入门基础一
2016-11-05 ion-slide-box,无限循环
2016-11-05 JS对于数据常见操作
2016-11-05 Error: failed to fetch platform android
2016-11-05 ionic不同view跳转到同一个
点击右上角即可分享
微信分享提示