【JS】JS高阶函数——reduce()用法详解总结。你不得不知道的数组reduce高级用法!

reduce用法详解总结

  • 1.reduce语法说明
    • 1.1 方法介绍
    • 1.2 参数说明
    • 1.3 执行机制
    • 1.4 简单示例:数组求和
  • 2. 高级用法
    • 2.1 权重求和
    • 2.2 代替some和every
    • 2.3 数组扁平
    • 2.4 数组去重
    • 2.5 字符统计和单词统计
    • 2.6 数组成员特性分组
    • 2.7 数字千分化

reduce函数是一个神奇的函数

1.reduce语法说明

1.1 方法介绍

reduce() 方法对数组中的每个元素执行一次提供的回调函数,且该函数为升序执行,并将其结果汇总为单个返回值。

1.2 参数说明

let value = arr.reduce(function(accumulator, currentValue, currentIndex, array) {// ...
}, [initial]);
  1. 第一个参数:callback函数。该函数会遍历并应用于所有数组元素,并将其结果带到到下一个调用。此回调函数包含四个参数:
    - accumulator累计器(必需)。是上一个函数调用的结果,第一次等于 initial(如果提供了 initial 的话)
    - currentValue当前元素(必需)。数组中正在处理的元素。
    - currentIndex:当前处理元素的索引(可选)。如果提供了initialValue,则起始索引号为0,否则从索引1起始。
    - array:原始数组(可选)。
  2. 第二个参数:initialValue初始值(可选)

1.3 执行机制

reduce为数组中的每一个元素依次执行callback函数
reduce函数打印值
reduce函数打印值2
值得注意的是:(如上图所示,回调函数第一次执行时)

  • 如果没有提供initialValue:accumulator取数组中的第一个值,currentValue取数组中的第二个值。reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。
  • 如果提供了initialValue:accumulator取值为initialValue,currentValue取数组中的第一个值。reduce 会从从索引0开始执行 callback 方法。

1.4 简单示例:数组求和

let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0);
console.log(result); // 15

传递给 reduce 的函数仅使用了 2 个参数,通常这就足够了。

  1. 在第一次运行时,sum 的值为初始值 initial(reduce 的最后一个参数),等于 0,current 是第一个数组元素,等于 1。所以函数运行的结果是 1。
  2. 在第二次运行时,sum = 1,我们将第二个数组元素(2)与其相加并返回。
  3. 在第三次运行中,sum = 3,我们继续把下一个元素与其相加,以此类推……

计算流程:
reduce的计算流程

2. 高级用法

2.1 权重求和

const scores = [{ score: 90, subject: "chinese", weight: 0.5 },{ score: 95, subject: "math", weight: 0.3 },{ score: 85, subject: "english", weight: 0.2 }
];
const result = scores.reduce((acc, cur) => acc + cur.score * cur.weight, 0); 
console.log(result); // 90.5

2.2 代替some和every

const scores = [{ score: 45, subject: "chinese" },{ score: 90, subject: "math" },{ score: 60, subject: "english" }
];// 代替some:至少一门合格
const isAtLeastOneQualified = scores.reduce((acc, cur) => acc || cur.score >= 60, false); // true// 代替every:全部合格
const isAllQualified = scores.reduce((acc, cur) => acc && cur.score >= 60, true); // false

2.3 数组扁平

const flatArr = (arr) => {return arr.reduce((acc, cur) => acc.concat(Array.isArray(cur) ? flatArr(cur) : cur), [])
}
const arr = [0, 1, [2, 3], [4, 5, [6, 7]], [8, [9, 10, [11, 12]]]];
console.log(flatArr(arr)); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

2.4 数组去重

const getUnique = (arr) => {return arr.reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], []);
}
const arr = [2, 1, 0, 3, 2, 1, 2];
console.log(getUnique(arr)); // [2, 1, 0, 3]

2.5 字符统计和单词统计

const str = "今天是个好日子呀,哈哈今天真开心呀!";
const getCharCount = (arr=[]) => {return arr.reduce((acc, cur) => (acc[cur] = (acc[cur] || 0) + 1, acc), {});
}
let res = getCharCount(str.split(''));
console.log(res);
// {'今': 2,'天': 2,'是': 1,'个': 1,'好': 1,'日': 1,'子': 1,'呀': 2,',': 1,'哈': 2,'真': 1,'开': 1,'心': 1,'!': 1
}

注解:
逗号运算符总是返回最后一个值,比如 const a = (1,2,3); 的结果就是 a = 3,这里只是为了方便用了逗号运算符来完成acc[cur] = (acc[cur] || 0) + 1 这个操作,最后返回 acc。

此方法是字符统计和单词统计的原理,入参时把字符串处理成数组即可。

2.6 数组成员特性分组

function Group(arr = [], key) {return key ? arr.reduce((t, v) => (!t[v[key]] && (t[v[key]] = []), t[v[key]].push(v), t), {}) : {};
}const arr = [{ area: "GZ", name: "YZW", age: 27 },{ area: "GZ", name: "TYJ", age: 25 },{ area: "SZ", name: "AAA", age: 23 },{ area: "FS", name: "BBB", age: 21 },{ area: "SZ", name: "CCC", age: 19 }
]; // 以地区area作为分组依据
Group(arr, "area"); // { GZ: Array(2), SZ: Array(2), FS: Array(1) }

2.7 数字千分化

function ThousandNum(num = 0) {const str = (+num).toString().split(".");const int = nums => nums.split("").reverse().reduceRight((t, v, i) => t + (i % 3 ? v : `${v},`), "").replace(/^,|,$/g, "");const dec = nums => nums.split("").reduce((t, v, i) => t + ((i + 1) % 3 ? v : `${v},`), "").replace(/^,|,$/g, "");return str.length > 1 ? `${int(str[0])}.${dec(str[1])}` : int(str[0]);
}ThousandNum(1234); // "1,234"
ThousandNum(1234.00); // "1,234"
ThousandNum(0.1234); // "0.123,4"
ThousandNum(1234.5678); // "1,234.567,8"

在这里插入图片描述

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

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

相关文章

LatexEasy:数学排版神器,你值得拥有!

🌟 还在为复杂的数学公式排版而烦恼吗?LatexEasy来帮你解决烦恼!🌟 📚 作为一名科研狗或者学术爱好者,你一定知道LaTeX在数学排版中的强大功能。但LaTeX的语法对于初学者来说,总是有些令人望而…

编程奇境:C++之旅,从新手村到ACM/OI算法竞赛大门(竞赛小魔法:万能头文件加速)

如果看到这里的各位是想要参加竞赛,那么接下来一点一些小魔法大家可以修炼一下下。 万能头文件 在那遥远的编程王国,藏着一件传说中的秘宝——bits/stdc.h,这不仅仅是一块普通的头文件石碑,它是C语言魔法的集大成者,…

C++ Qt实现http url启动本地应用程序

更多Qt文章,请访问《深入浅出C++ Qt开发技术专栏》:https://blog.csdn.net/yao_hou/category_9276099.html 我们在使用腾讯会议时经常会通过http链接打开本地的腾讯会议,例如下图: 打开会议发起人给的链接,会出现一个网页,然后点击加入会议就会启动本地的腾讯会议,本篇…

面向小白的 Spark MLlib 入门教学

目标: 介绍 Spark MLlib 框架及其在机器学习中的应用。培养学生基本的数据处理、建模和评估技能,使其能够独立进行简单的机器学习任务。教学大纲: 介绍 Spark MLlib 了解 Apache Spark 和 MLlib。MLlib 的主要功能和优势。演示如何在 Spark 中启动 MLlib。基本概念和环境设置…

msvcp140_1.dll丢失怎么修复,这四种修复方法可轻松搞定

在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是“msvcp140_1.dll丢失”。这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题,本文将介绍5种常见的解决方法,帮助大家快速恢复应用程序的正常运行。 一&a…

Python函数式编程

Python函数式编程内容不多,熟练使用它们能让代码简洁不少。 Python中的函数式编程强调使用函数作为基本构建块,支持高阶函数、 lambda函数、列表推导式、map()、filter()、reduce()等特性。下面是一些函数式编程的典型例子: 使用 map() 函数…

OCP 备份 OceanBase集群

注:OCP版本为4.2.1,OceanBase版本为 社区版4.2.1.0 手动备份 进行合并 在手动进行备份数据之前,建议进行一次OB集群合并(不影响业务的前提下),关于合并的概念请参考OB官网。 点击进入要备份的OB集群 点击左侧工具栏中的 合并管理,在 基本信息…

App UI 风格:独具一格,令人惊艳

App UI 风格:独具一格,令人惊艳

交叉导轨在医疗设备上的作用!

随着医疗器械行业的需求逐步增长,交叉导轨给医疗器械行业带来了广阔的发展前景。作为重要的精密传动元件,交叉导轨具有寿命长、高精度、高刚性、高耐腐蚀性和高稳定性等优点,满足精密仪器上对产品的高要求使用场景。 在医疗设备领域中交叉导轨…

LeetCode刷题 | Day 3 分割等和子集(Partition Equal Subset Sum)

LeetCode刷题 | Day 3 分割等和子集(Partition Equal Subset Sum) 文章目录 LeetCode刷题 | Day 3 分割等和子集(Partition Equal Subset Sum)前言一、题目概述二、解题方法2.1 动态规划思想2.1.1 思路讲解2.1.2 伪代码 + 逐步输出示例2.1.3 Python代码如下2.1.4 C++代码如…

电脑显示找不到steam_api.dll,无法继续执行代码的详细解决办法

电脑显示找不到steam_api.dll,无法继续执行代码?其实会造成这种原因,注意是由于操作不当或者是中了病毒而导致的,我们想要解决steam_api.dll的丢失还是比较简单的,目前有多种的steam_api.dll修复方法,今天我们就来详细…

前端如何去除本地版本号缓存

前端去除本地版本号缓存的方法有多种&#xff0c;下面是一些常见且实用的方法&#xff0c;结合参考文章中的信息进行归纳和总结&#xff1a; 使用meta标签 在HTML页面的<head>区域中添加以下meta标签&#xff1a;<meta http-equiv"pragma" content"no-…

MySQL数据库常见工具的基础使用_1

在上一篇文章中提到了对MySQL数据库进行操作的一些常见工具 mysqlcheck mysqlcheck是一个用于数据库表的检查&#xff0c;修复&#xff0c;分析和优化的一个客户端程序 分析的作用是查看表的关键字分布,能够让sql生成正确的执行计划(支持InnoDB,MyISAM,NDB)检查的作用是检查…

前端逆向之下载canvas引用的图片

前端逆向之下载canvas引用的图片 一、来源二、解决三、如果在Network这里也找不到呢&#xff1f; 一、来源 当我们用dom检查器的时候无法选中想要扒下来的图片&#xff0c;只能选中canvas&#xff0c;这种时候该怎么办呢&#xff1f; 二、解决 这个时候应该换个脑子&#xf…

怎么排查native层的bug

方法一&#xff1a; android studio debug 直接运行&#xff0c;LLBD 不要打断点。会自动定位到错误 方法二&#xff1a;错误日志分析 ---》奔溃后&#xff0c;在logcat中查询SIGSEGV信号量。 ---》在Device Explorer中 data/tombstones 里就有日志信息。 备注:。。。。$su…

AI菜鸟向前飞 — LangChain系列之十六 - Agent系列:从现象看机制(下篇)一款“无需传递中间步骤“的Agent

前言 AI菜鸟向前飞 — LangChain系列之十四 - Agent系列&#xff1a;从现象看机制&#xff08;上篇&#xff09; AI菜鸟向前飞 — LangChain系列之十五 - Agent系列&#xff1a;从现象看机制&#xff08;中篇&#xff09;一个Agent的“旅行” 回顾前两篇文章&#xff0c;大家会…

endnote IEEEtran 参考文献 输出Latex

文章目录 参考文献Latex1. 新建格式1.1 新建BibTeX Export样式文件1.2 保存自定义文献格式 2 修改2.1 修改Journal Names 为简写2.2 修改Author Lists2.3 修改 模版 Templates 3. 特殊字符作者名字标题 4. 增加期刊简写4.1 删除已有简写的Term Lists 4.2 下载最新的Term LIsts4…

ApsaraMQ Copilot for RocketMQ:消息数据集成链路的健康管家

作者&#xff1a;文婷 引言 如何正确使用消息队列保证业务集成链路的稳定性&#xff0c;是消息队列用户首要关心的问题。ApsaraMQ Copilot for RocketMQ 从集成业务稳定性、成本、性能等方面帮助用户更高效地使用产品。 背景 消息队列产品通过异步消息的传递&#xff0c;来…

git环境代码版本控制

初装git环境需要配置用户名和邮箱&#xff0c;否则git会提示&#xff1a;please tell me who you are. 你需要运行命令来配置你的用户名和邮箱&#xff1a; $ git config --global user.name "superGG1990” $ git config --global user.email “superGG1990163.com” 注意…

Linux shell编程学习笔记55:hostname命令——获取或设置主机名,显示IP地址和DNS、NIS

0 前言 2024年的网络安全检查又开始了&#xff0c;对于使用基于Linux的国产电脑&#xff0c;我们可以编写一个脚本来收集系统的有关信息。其中主机名也是我们要收集的信息之一。 1. hostname命令 的功能、格式和选项说明 我们可以使用命令 hostname --help 来查看hostname命令…