在 js 中,reduce() 的详解 以及使用方法

news2025/7/11 15:05:23

reduce():

reduce()方法为归并类方法,最常用的场景就是,计算数组中的每一项的总和。

reduce() 方法会遍历数组的每一项,他接收两个参数:

第一个参数:每次遍历都会调用的函数,而这个函数有接收四个参数,分别是:前一个值、当前项、项目的索引和数组对象,而这个函数的返回值,回传给下一次遍历时,执行的这个方法的第一个参数。

第二个参数:归并基础的初始值

我们看一下例子: reduce()怎么用?

 let arr = [1,2,3,4,5]
 arr.reduce((prev,cur)=>{
      return prev+cur
 })

上面的这段代码,是用来计算数组总和的,reduce()方法中,只传了第一个参数,也就是只传了一个函数,但第二个参数、初始值没有传,当第二个值没有传的时候,第一次循环,prev的值,默认为数组的第一项,而cur的值为数组的第二项,也就是第一次循环,会return 1+2,这个时候,第一次循环返回的结果回传给下一次循环中方法的第一个参数,也就是说、第二次循环方法中prev的值,是第一次循环方法返回的结果

let arr = [1,2,3,4,5]
arr.reduce((prev,cur)=>{
    return prev+cur
},10)

我们传入一下第二个参数,第一个循环,prev的值为reduce的第二个参数,也就是"归并基础的初始值",而cur的值为数组的第一项,第一项循环会返回10+1

总结:

1.当reduce()方法的第二个值为空时,第一次循环方法中的第一个参数(prev)为数组的第一项值,第二个参数(cur)为数组的第二项值,反之,第一次循环方法中的第一个参数(prev)为reduce的第二个参数值,第二个参数(cur)为数值的第一项值。

2.reduce()方法的第一个参数,就是每次遍历都会执行的匿名函数,当前函数的返回值就会传给下一次执行函数的第一个值。也就是prev

reduce 应用场景:

1.数组里所有值的和

      var arr = [0,1,2,3];

      var value = arr.reduce((pre, cur) => {
        return pre + cur;
      }, 0);
      
      console.log(value);// 输出:6

2.累加数组中对象的值

      var arr = [{ x: 1 }, { x: 2 }, { x: 3 }];

      var value = arr.reduce((pre, cur) => {
        return pre + cur.x;
      }, 0);
      
      console.log(value);// 输出:6

3.将二维数组转为一维数组

      var arr = [
        [0, 1],
        [2, 3],
        [4, 5],
      ];

      var value = arr.reduce((pre, cur) => {
        return pre.concat(cur);
      }, []);

      console.log(value); // 输出:[0, 1, 2, 3, 4, 5]

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

      var arr = ["a", "b", "a", "c", "c", "c"];

      var value = arr.reduce((pre, cur) => {
        if (cur in pre) {
          pre[cur]++;
        } else {
          pre[cur] = 1;
        }
        return pre;
      }, {});

      console.log(value); // 输出:{a: 2, b: 1, c: 3}

5.按属性对object分类

      var people = [
        { name: "tom", age: 17, birthYear: 2021 },
        { name: "tony", age: 21, birthYear: 2021 },
        { name: "bob", age: 18, birthYear: 2020 },
        { name: "bob", age: 18, birthYear: 2021 },
        { name: "bob", age: 18, birthYear: 2019 },
      ];

      function groupBy(arr, property) {
        if (!Array.isArray(arr)) return [];

        return arr.reduce((pre, obj) => {
          var newObj = {
            [property]: obj[property],
            data: [obj],
          };

          if (!pre.length) {
            return [newObj];
          }

          for (let i = 0; i < pre.length; i++) {
            let item = pre[i];
            if (item[property] === obj[property]) {
              item.data = [...item.data, obj];
              return pre;
            }
          }
          return [...pre, newObj];
        }, []);
      }

      var value = groupBy(people, "birthYear");

返回值:

 6.数组去重:

      var arr = [1, 2, 3, 2, 2, 3, 5, null, null, 0, false, false, true];

      var value = arr.reduce((pre, cur) => {
        return pre.includes(cur) ? pre : pre.concat(cur);
      }, []);

      console.log(value);//[1, 2, 3, 5, null, 0, false, true]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406227.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

22.信息系统安全管理-策略7定.方案.安全体系架构.PKI.PMI

信息系统的安全威胁分成七类&#xff0c;从风险源的角度划分&#xff0c;可以将安全威胁划分为&#xff1a;自然事件风险、人为事件风险、软件风险、软件过程风险、项目管理风险、应用风险、用户使用风险。 信息系统安全四个层次:设备安全、数据安全、内容安全、行为安全。数据…

vite打包配置(静态资源合并打包/清除log/gzip压缩/ENV配置等)

2022/6/2更新 传了一下本项目代码,文章里写到的基本都有用到,可以clone了看一下 下载地址https://github.com/shinjie1210/vite-config.git---------------------------------------------------------------------------------------------------------------------------- …

基于vue的uni-app生态——学习笔记001

目录 vue的简介 什么是vue.js vue相比传统的js开发优势有哪些 vue的优势 与传统的开发文件相比的类型变换 与传统的开发相比开发文件内部架构的变化 uni-app生态&#xff08;编辑器的使用&#xff09; 编辑器的下载 编辑器的使用 基于vue开发的uni-app生态的文件结构…

CANoe中使用CAPL刷写流程详解(Trace图解)(CAN总线)

&#x1f345; 我是蚂蚁小兵&#xff0c;专注于车载诊断领域&#xff0c;尤其擅长于对CANoe工具的使用&#x1f345; 寻找组织 &#xff0c;答疑解惑&#xff0c;摸鱼聊天&#xff0c;博客源码&#xff0c;点击加入&#x1f449;【相亲相爱一家人】&#x1f345; 玩转CANoe&…

Vue初入,了解Vue的发展与优缺点

作者简介&#xff1a;一名计算机萌新、前来进行学习VUE,让我们一起进步吧。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;我叫于豆豆吖的主页 前言 从本章开始进行Vue前端的学习&#xff0c;了解Vue的发展&#xff0c;以及背后的故事。 一.vue介…

一、Django基础介绍

一、Django介绍 Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Django 是一个开放源代码的 Web 应用框架&#xff0c;由 Python 写成。Django 遵守 BSD 版权&#xff0c;初次发布于 2005 年 7 月, 并于 2008 年 …

【Spring Cloud Alibaba】(二)微服务调用组件Feign原理+实战

系列目录 【Spring Cloud Alibaba】&#xff08;一&#xff09;微服务介绍 及 Nacos注册中心实战 本文目录系列目录前言什么是RPC&#xff1f;Feign和OpenFeign都是什么&#xff1f;HTTP调用 vs Feign(RPC)调用单独使用Feign实战Feign核心源码解读Feign整体设计架构Spring Clo…

学生为什么要在CSDN写博客?

学生为什么要在CSDN写博客&#xff1f;引言写博客的好处构建知识体系提升写作能力扩展人脉为简历加分帮助他人为什么是CSDN如何写博客记录学习总结错误总结与展望引言 就目前来说&#xff0c;学生应该是使用各种博客最多的人&#xff0c;但却不是写博客的主体。在我看来&#…

软考-软件设计师 知识点整理(一篇就过了 建议收藏)

文章目录一 计算机组成CPU寻址方式校验码奇偶校验码&#xff08;只能检一位错&#xff0c;并且不能纠错&#xff09;循环冗余校验码CRC&#xff08;只能检错&#xff0c;不能纠错&#xff09;海明码计算机体系结构分类Flynn分类法&#xff08;理论存在&#xff1a;多指令单数据…

我用Python写了一个下载网站所有内容的软件,可见即可下,室友表示非常好用

Python 写一个下载网站内容的GUI工具&#xff0c;所有内容都能下载&#xff0c;真的太方便了&#xff01;前言本次要实现的功能效果展示代码实战获取数据GUI部分最后前言 哈喽大家好&#xff0c;我是轻松。 今天我们分享一个用Python写下载视频弹幕评论的代码。 之前自游写了…

VMware17虚拟机:下载和安装教程

签名&#xff1a;但行好事&#xff0c;莫问前程。 文章目录前言一、VMware虚拟机是什么&#xff1f;二、如何下载VMware虚拟机&#xff1f;1.打开VMware官方网站2.找到VMware17下载地址三、安装VMware17虚拟机1.双击exe文件2.点击下一步3.勾选许可协议&#xff0c;点击下一步4.…

Java单元测试介绍

文章目录单元测试单元测试基本介绍单元测试快速入门单元测试常用注解单元测试 单元测试基本介绍 单元测试: 单元测试就是针对最小的功能单元编写测试代码&#xff0c;Java程序最小的功能单元是方法&#xff0c;因此&#xff0c;单元测试就是针对Java方法的测试&#xff0c;进…

Error: EPERM: operation not permitted, mkdir ‘D:\software\nodejs\node_cache\_cacach两种解决办法

目录 报错情况&#xff1a;operation not permitted, mkdir ‘D:\software\nodejs\node_cache\_cacach 解决办法&#xff1a; 第一种&#xff1a;选择管理员身份运行命令行 第二种&#xff1a;node安装目录下设置users用户完全控制权限 报错情况&#xff1a;operation not …

电子工程师必须掌握的硬件测试仪器,你确定你都掌握了?

目录示波器示例1&#xff1a;测量示波器自带的标准方波信号输出表笔认识屏幕刻度认识波形上下/左右移动上下/左右刻度参数调整通道1的功能界面捕获信号设置Menu菜单触发方式触发电平Cursor按钮捕捉波形HLEP按钮参考资料频谱分析仪器信号发生器示波器 示例1&#xff1a;测量示波…

Spring Cloud Alibaba 微服务2,注册中心演变 + Nacos注册中心与配置中心

目录专栏导读一、什么是Nacos&#xff1f;二、注册中心演变及其设计思想1、RestTemplate调用远程服务2、通过Nginx维护服务列表&#xff08;upStream&#xff09;3、通过Nacos实现注册中心4、心跳版Nacos三、Nacos Discovery四、Nacos核心功能1、服务注册2、服务心跳3、服务同步…

【Jetpack】Jetpack 简介 ( 官方架构设计标准 | Jetpack 组成套件 | Jetpack架构 | Jetpack 的存在意义 | AndroidX 与 Jetpack 的关系 )

文章目录一、Google 官方推出的架构设计标准 Jetpack二、Jetpack 组成套件三、Jetpack 架构四、Jetpack 的存在意义1、提高开发效率2、最佳架构方案3、消除样本代码4、设备系统兼容性5、改善应用性能6、测试支持五、AndroidX 与 Jetpack 的关系一、Google 官方推出的架构设计标…

Termux安装完整版Linux(Ubuntu)详细步骤

一、Termux 1.Termux简介 Termux是 Android 平台上的一个终端模拟器&#xff0c;之所以称它为“模拟器”而非“虚拟机”&#xff0c;是因为它并非像 PC 端的 VirtualBox 等虚拟机软件那样&#xff0c;在宿主机中虚拟出一个完全独立且完整的系统环境&#xff0c;而只是提供一个…

MyBatis案例 | 使用映射配置文件实现CRUD操作——动态SQL优化条件查询

本专栏主要是记录学习完JavaSE后学习JavaWeb部分的一些知识点总结以及遇到的一些问题等&#xff0c;如果刚开始学习Java的小伙伴可以点击下方连接查看专栏 本专栏地址&#xff1a;&#x1f525;JavaWeb Java入门篇&#xff1a; &#x1f525;Java基础学习篇 Java进阶学习篇&…

面试官:如何进行 JVM 调优(附真实案例)

前言 面试官&#xff1a;在工作中做过 JVM 调优吗&#xff1f;讲讲做过哪些 JVM 调优&#xff1f; 我一个QPS不到10的项目&#xff0c;上次问我缓存穿透缓存雪崩&#xff0c;这次问我 JVM 调优&#xff0c;我是真滴难。 不过大家别慌&#xff0c;热心的我给大家找来了几个满分…

一文学会IDEA中的Maven集成与创建(详细教程)

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…