JavaScript 数组方法 reduce() 的用法

   

  一、概述   

在JavaScript中,reduce()方法是一个非常实用的数组方法,它接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。这个方法在处理数组元素时,将每个元素依次传入函数中进行处理,并将处理结果累积起来,最终得到一个单一的输出值。

reduce() 方法的基本语法如下:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

让我们详细解释一下这个方法的参数:

  1. total:这是累加器,也是最终的返回值。
  2. currentValue:当前正在处理的元素。
  3. currentIndex:当前元素的索引。如果省略,则视为应用在数组的元素上,而不是在索引上。
  4. arr:调用 reduce() 的数组。
  5. initialValue:可选参数,为第一次调用回调函数时提供“初始值”。

二、使用场景

现在让我们通过一些示例来学习如何使用 reduce() 方法。

计算数组元素的总和

我们可以使用 reduce() 方法来计算数组元素的总和。以下是一个简单的例子:

const numbers = [1, 2, 3, 4, 5];  
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);  
console.log(sum); // 输出:15

        在这个例子中,我们没有提供初始值,因此第一次调用回调函数时累加器的值为 undefined。之后的每一次调用中,累加器都是之前调用的返回值,而当前值是数组的下一个元素。因此,最终的结果是数组中所有元素的和。

如果提供了初始值,那么第一次调用回调函数时的累加器将是初始值,而不是 undefined。例如:

const numbers = [1, 2, 3, 4, 5];  
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);  
console.log(sum); // 输出:15

在这个例子中,我们将初始值设为0,所以第一次调用回调函数时的累加器就是0,然后我们将这个结果与数组的下一个元素相加,以此类推,直到遍历完整个数组。最终的结果仍然是数组中所有元素的和。

将数组元素转换为新的数据结构

reduce()方法还可以用于将数组元素转换为新的数据结构。下面是一个示例:

const items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }];  
const itemIds = items.reduce((accumulator, currentItem) => accumulator.concat(currentItem.id), []);  
console.log(itemIds); // 输出:[1, 2, 3]

在这个示例中,我们将一个函数作为参数传递给reduce()方法,这个函数接收两个参数:累加器(accumulator)和当前值(currentItem)。累加器是已经累积的结果,当前值是当前正在处理的数组元素。我们将当前元素的id属性连接起来,并将结果返回作为下一次调用的累加器。最终,我们将累加器的初始值设置为一个空数组,并得到包含所有元素的id属性的新数组。

转换数组为对象

        使用reduce()方法可以将数组转换为对象。通过传递一个回调函数,我们可以指定如何将数组元素转换为对象属性值。回调函数的第一个参数是累加器,第二个参数是当前元素值,第三个参数是当前元素的索引。

const arr = ['a', 'b', 'c'];  
const obj = arr.reduce((accumulator, currentValue, currentIndex) => {  accumulator[currentValue] = currentIndex;  return accumulator;  
}, {});  
console.log(obj); // 输出:{ a: 0, b: 1, c: 2 }

检查数组中是否存在某个元素

        虽然Array.prototype.includes()方法可以用来检查数组中是否存在某个元素,但使用reduce()方法也可以实现相同的功能。通过将回调函数的返回值设置为累加器,我们可以在循环结束后检查累加器的值来确定是否存在某个元素。

const numbers = [1, 2, 3, 4, 5];  
const found = numbers.reduce((accumulator, currentValue) => {  if (currentValue === 3) {  return true;  } else {  return accumulator;  }  
}, false);  
console.log(found); // 输出:true

提取对象中键名相同的属性值

        有时候我们需要从对象中提取所有键名相同的属性值。使用reduce()方法可以很方便地实现这个功能。通过传递一个回调函数,我们可以将对象的每个属性值作为累加器的初始值,并将每个属性名作为当前值传递给回调函数。在回调函数中,我们可以将当前属性值添加到累加器中,并返回更新后的累加器。

const obj = { a: 1, b: 2, c: 3, d: { e: 4 } };  
const values = Object.values(obj).reduce((accumulator, currentValue) => {  if (typeof currentValue === 'number') {  accumulator.push(currentValue);  }  return accumulator;  
}, []);  
console.log(values); // 输出:[1, 2, 3, 4]

三、总结

        总之,reduce()方法是JavaScript中非常实用的数组操作方法,它可以用来简化数组并执行各种复杂的操作。通过使用适当的回调函数,我们可以将数组的每个元素转换为我们需要的任何形式的数据结构。

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

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

相关文章

OpenTelemetry系列 - 第4篇 OpenTelemetry K8S生态

目录 一、【Helm】添加OTel Helm repo二、【Helm Chart】OTel Collector2.1 daemonset2.2 deloyment 三、【K8S Operator】OTel Operator3.1 安装OTel Operator3.2 部署OpenTelemetryCollector3.2.1 Deloyment Mode3.2.2 DeamonSet Mode3.2.3 StatefulSetMode3.2.4 Sidecar Mod…

RocketMq原理(待完善)

MQ作用 异步解耦削峰 RocketMQ背景 ​ RocketMQ是阿里巴巴开源的一个消息中间件,在阿里内部历经了双十一等很多高并发场景的考验,能够处理亿万级别的消息。2016年开源后捐赠给Apache,现在是Apache的一个顶级项目。 ​ 早期阿里使用ActiveM…

基于SUMO和强化学习的交通优化

本文旨在解释强化学习方法如何通过 TraCl 与 SUMO 配合使用,以及这如何有利于城市交通管理和自动驾驶车辆的路径优化。 NSDT工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REV…

Node包管理工具 - nvm、npm、yarn、cnpm、pnpm

转载说明 原文地址 简介 nvm : 可以实现一台电脑,拥有多个版本的Node npm : node package manager 下载Node后自带的一个包管理工具 yarn : npm 的升级版,更优秀 cnpm : 配置下载非官方地址的依赖(淘宝、华为、腾讯镜像) pnpm :…

day70

今日回顾 session 中间件 auth session Cookie虽然在一定程度上解决了“保持状态”的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能被拦截或窃取,因此就需要有一种新的东西,它能支持更…

辛普森距离(SD,Sampson Distance)

定义 Sampson误差是复杂性介于代数误差和几何误差之间,但非常近似于几何误差的一种误差。 应用 SLAM对极几何中使用到SD来筛选内点: 1.随机采样8对匹配点 2.8点法求解基础矩阵 ​; 3.奇异值约束获取基础矩阵F; 4.计算误差&…

4、单例模式(Singleton Pattern)

单例模式是保证系统实例唯一性的重要手段。单例模式首先通过将类的实例化方法私有化来防止程序通过其他方式创建该类的实例,然后通过提供一个全局唯一获取该类实例的方法帮助用户获取类的实例,用户只需也只能通过调用该方法获取类的实例。 单例模式的设…

通达信指标公式19:龙虎榜股票池——主力控盘度的计算方法

0.小红牛本指标,选股的思路说明:控盘度,又称主力控盘,是指主力控制了某只股票的大部分流通股,从而控制了股票的价格。主力控盘的目的通常是为了获取更多的收益,通过控制股票价格来实现其策略。所以首要分析…

(04730)电路分析基础之电阻、电容及电感元件

04730电子技术基础 语雀(完全笔记) 电阻元件、电感元件和电容元件的概念、伏安关系,以及功率分析是我们以后分析电 路的基础知识。 电阻元件 电阻及其与温度的关系 电阻 电阻元件是对电流呈现阻碍作用的耗能元件,例如灯泡、…

Hadoop学习笔记(HDP)-Part.04 基础环境配置

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

外包干了2个月,技术倒退2年。。。。。

先说一下自己的情况,本科生,20年通过校招进入深圳某软件公司,干了接近4年的功能测试,今年国庆,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

现代版“田忌赛马”:IPMT如何实现资源利用最大化

摘要:在流程调整和产品重整过程中,IPMT发挥了至关重要的作用。IPMT是什么?它的职责到底是什么?每个公司必须要有IPMT吗? 1992年,IBM在激烈的市场竞争下,遭遇到了严重的财政困难,利润…

Mysql中RTRIM、LTRIM、TRIM函数的区别

一、概述 在MySQL中,LTRIM、RTRIM和TRIM是用于去除字符串两端空格或指定字符的函数,它们的区别如下: LTRIM(): LTRIM表示"Left Trim",用于去除字符串左侧的空格或指定字符。语法:LTRIM(str) …

机器学习-ROC曲线:技术解析与实战应用

本文全面探讨了ROC曲线(Receiver Operating Characteristic Curve)的重要性和应用,从其历史背景、数学基础到Python实现以及关键评价指标。文章旨在提供一个深刻而全面的视角,以帮助您更好地理解和应用ROC曲线在模型评估中的作用。…

Java 多线程之 Semaphore(信号量/限流/同步辅助类)

文章目录 一、概述二、使用方法三、测试示例 一、概述 Semaphore(信号量)是一种并发控制机制,用于控制对共享资源的访问。它维护了一个计数器,可以限制同时访问某个资源的线程数量。常用于限制同时访问某个资源的线程数量&#xf…

MySQL查看和修改时区

为了验证 TIMESTAMP 存储时间与时区有关,显示的值也依赖于时区 看了mysql 时区 时间网 世界时区 MySQL查看和修改时区的方法 查看当前时区 1. 在MySQL客户端,可以通过如下命令查看当前时区: SELECT global.time_zone;2. 查看当前时区的设…

字符串方法

字符串方法 字符串截取slice() 字符串截取subString() 字符串截取substr() 字符串切割slice() 字符串开始start() 字符串结束end() 字符串去空trim() 字符串合并 concat() 字符串包含includes() 字符串下标 indexOf() 字符串倒序查…

【新手解答8】深入探索 C 语言:递归与循环的应用

C语言的相关问题解答 写在最前面问题:探索递归与循环在C语言中的应用解析现有代码分析整合循环示例代码修改注意事项结论 延伸:递归和循环的退出条件设置解析使用递归使用循环选择适合的方法 写在最前面 一位粉丝私信交流,回想起了当初的我C…

Zabbix HA高可用集群搭建

Zabbix HA高可用集群搭建 Zabbix HA高可用集群搭建一、Zabbix 高可用集群(Zabbix HA)二、部署Zabbix高可用集群1、两个服务端配置1.1主节点 Zabbix Server 配置1.2 备节点 Zabbix Server 配置1.3 主备节点添加监控主机1.4 查看高可用集群状态 2、两个客户…

【数据结构与算法】JavaScript实现二叉搜索树

文章目录 一、二叉搜索树的封装1.插入数据2.遍历数据2.1.先序遍历2.2.中序遍历2.3.后续遍历 3.查找数据3.1.查找最大值&最小值3.2.查找特定值 4.删除数据4.1.情况1:没有子节点4.2.情况2:有一个子节点4.3.情况3:有两个子节点4.4.完整实现 …