前端 reduce()用法总结

定义

reduce()方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。语法为:

array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue);
/*
  accumulator:  必需。累计器
  currentValue: 必需。当前元素
  
  currentIndex: 可选。当前元素的索引;                    
  arr:          可选。要处理的数组
  initialValue: 可选。传递给函数的初始值,相当于accumulator的初始值
*/

解释

简单来说就是对一个array执行reduce()方法,就是把其中的function()挨个地作用于array中的元素上,而且上一次的输出会作为下一次的一个输入。例如下面这个对array求和的例子。

let array = [1, 2, 3, 4, 5];
array.reduce((sum, curr) => sum + curr, 0); // 得到15

执行流程图如下:

f(a, b)= a + b, 也可以一次性写为:

array.reduce = f( f( f( f( f(0, 1) ,2) ,3), 4) ,5)

奉上一个GIF

动图封面

常见用法

求加法(乘法同理)

let arr = [1, 2, 3, 4, 5];
arr.reduce((sum, curr) => sum + curr, 0);       // 得到15

此基础上还可以求平均值

求最大值(最小值同理)

let arr = [23,123,342,12];
let max = arr.reduce((pre,cur,index,arr) => {
  return pre > cur ? pre : cur
});                                               // 得到 342

将字符串转换为整数

let str = "4321"
​
let strParseInt = str.split('')                   // 得到 ['4', '3', '2', '1', '4']
    .map(item => {return item.charCodeAt() - 48}) // 得到 [4, 3, 2, 1, 4]
    .reduce((a, b) => {return a * 10 + b})        // 得到 43214

字符统计/单词统计同理

let str = 'abcdaabc';
​
str.split('').reduce((res, cur) => {
    res[cur] ? res[cur] ++ : res[cur] = 1 // 如果cur第一次出现,记为1
    return res;                           // 否则记录数+1
}, {})                                    // 得到 {a: 3, b: 2, c: 2, d: 1}

数组去重

let arr = [1, 2, 3, 4, 4, 1]
let newArr = arr.reduce((pre,cur) => {
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])                                     // 得到 [1, 2, 3, 4]

数组维度转换

let arr = [[0, 1], [2, 3], [4, 5]]      // 二维数组
let newArr = arr.reduce((pre,cur) => {
    return pre.concat(cur)              // 合并pre 与 cur, 并返回一个新数组
},[])
console.log(newArr);                    // 一维数组 [0, 1, 2, 3, 4, 5]

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android13源码下载及全编译流程

目录 一、源码下载 1.1、配置要求 1.1.1、硬件配置要求 1.1.2、软件要求 1.2、下载环境搭建 1.2.1、依赖安装 1.2.2、工具安装 1.2.3、git配置 1.2.4、repo配置 1.3、源码下载 1.3.1、明确下载版本 1.3.2、替换为清华源 1.3.3、初始化仓库并指定分支 1.3.4、同步全部源码 二、…

运用 StringJoiner 高效的拼接字符串

运用 StringJoiner 高效的拼接字符串 package com.zhong.stringdemo;import java.util.ArrayList; import java.util.StringJoiner;public class Test {public static void main(String[] args) {ArrayList<String> s new ArrayList<>();s.add("11");s.…

二进制_八进制_十六进制和十进制之间互转(简单明了)

文章目录 二进制_八进制_十六进制和十进制之间互转&#xff08;简单明了&#xff09;二进制八进制十六进制将二进制、八进制、十六进制转换为十进制1) 整数部分2) 小数部分 将十进制转换为二进制、八进制、十六进制1) 整数部分2) 小数部分 二进制和八进制、十六进制的转换1) 二…

css新手教程

css新手教程 课程&#xff1a;14、盒子模型及边框使用_哔哩哔哩_bilibili 一.什么是CSS 1.什么是CSS Cascading Style Sheet 层叠样式表。 CSS&#xff1a;表现&#xff08;美化网页&#xff09; 字体&#xff0c;颜色&#xff0c;边距&#xff0c;高度&#xff0c;宽度&am…

git 如何修改仓库地址

问题背景&#xff1a;组内更换大部门之后&#xff0c;代码仓的地址也迁移了&#xff0c;所以原来的git仓库地址失效了。 虽然重新建一个新的文件夹&#xff0c;再把每个项目都git clone一遍也可以。但是有点繁琐&#xff0c;而且有的项目本地还有已经开发一半的代码&#xff0c…

Pandas.Series.clip() 修剪数值范围 详解 含代码 含测试数据集 随Pandas版本持续更新

关于Pandas版本&#xff1a; 本文基于 pandas2.2.0 编写。 关于本文内容更新&#xff1a; 随着pandas的stable版本更迭&#xff0c;本文持续更新&#xff0c;不断完善补充。 传送门&#xff1a; Pandas API参考目录 传送门&#xff1a; Pandas 版本更新及新特性 传送门&…

虚幻UE5Matehuman定制自己的虚拟人,从相机拍照到UE5制作全流程

开启自己的元宇宙,照片扫描真实的人类,生成虚拟形象,保姆级教程,欢迎大家指正。 需要的软件: 制作流程: 一.拍照。 围绕自己拍照,大概20多张图就差不多了,把脑门漏出来,无需拍后脑勺。 拍照方式 例如,拍照时尽量不要在脸上体现出明显的光源方向。

低版本MATLAB打开高版本Simulink文件的方法

打开simulink&#xff0c;依次点击“建模”、“环境”、“simulink预设项”&#xff0c;如图所示&#xff1a; 然后在弹出的窗口中&#xff0c;点击“模型文件”&#xff0c;并取消勾选“不要加载用更新版本的simulink创建的模型”&#xff0c;接着点击“应用”即可。如图所示&…

使用unicorn模拟执行去除混淆

0. 前言 在分析某app的so时遇到了间接跳转类型的混淆&#xff0c;不去掉的话无法使用ida f5来静态分析&#xff0c;f5之后就长下面这样&#xff1a; 本文记录一下使用pythonunicorn模拟执行来去掉混淆的过程。 1. 分析混淆的模式 混淆的汇编代码如下&#xff1a; 可以看到…

《计算机网络简易速速上手小册》第7章:云计算与网络服务(2024 最新版)

文章目录 7.1 云服务模型&#xff08;IaaS, PaaS, SaaS&#xff09;- 你的技术魔法盒7.1.1 基础知识7.1.2 重点案例&#xff1a;构建和部署 Python Web 应用实现步骤具体操作步骤1&#xff1a;创建 Flask Web 应用步骤2&#xff1a;准备应用部署 7.1.3 拓展案例1&#xff1a;使…

机器学习5-线性回归之损失函数

在线性回归中&#xff0c;我们通常使用最小二乘法&#xff08;Ordinary Least Squares, OLS&#xff09;来求解损失函数。线性回归的目标是找到一条直线&#xff0c;使得预测值与实际值的平方差最小化。 假设有数据集 其中 是输入特征&#xff0c; 是对应的输出。 线性回归的…

查看docker服务的IP地址

要查看Docker容器服务的IP地址&#xff0c;可以使用以下命令&#xff1a; 如果你知道容器名称或容器ID&#xff0c;直接通过容器ID或容器名称来获取IP地址&#xff1a; # 使用容器ID获取IP地址 docker inspect -f {{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} …

cesium-加载谷歌影像

cesium在开发的时候有可能会加载不同的影像&#xff0c;今天就先看一下加载谷歌的吧。 使用谷歌有个好处就是基本不会出现此区域无卫星图的情况 闲言话语不多说&#xff0c;看代码 <template><div id"cesiumContainer" style"height: 100vh;"&g…

【SpringBoot】application配置文件(4)

freemarker:cache: false 这是关于 freemarker 模板引擎的一个配置&#xff0c;用于控制模板的缓存行为 当cache 设置为 false 时&#xff0c;意味着每次请求时都会重新加载和编译模板&#xff0c;而不是从缓存中获取 编译模板。 将 cache 设置为 false 是为了在开发过程中获…

python求解中位数

首先将数组nums进行排序&#xff0c;然后找到中间位置的数值 如果数组长度n为奇数&#xff0c;则(n1)/2处对应值为中位数&#xff0c;如果数组下标从0开始&#xff0c;还需要减去1 如果数组长度n为偶数&#xff0c;则n/2,n/21两个位置数的平均值为中位数 假设中位数为x&#x…

机器学习复习(2)——线性回归SGD优化算法

目录 线性回归代码 线性回归理论 SGD算法 手撕线性回归算法 模型初始化 定义模型主体部分 定义线性回归模型训练过程 数据demo准备 模型训练与权重参数 定义线性回归预测函数 定义R2系数计算 可视化展示 预测结果 训练过程 sklearn进行机器学习 线性回归代码…

CSC联合培养博士申请亲历|联系外导的详细过程

在CSC申报的各环节中&#xff0c;联系外导获得邀请函是关键步骤。这位联培博士同学的这篇文章&#xff0c;非常详细且真实地记录了申请过程、心理感受&#xff0c;并提出有益的建议&#xff0c;小编特推荐给大家参考。 2024年国家留学基金委公派留学项目即将开始&#xff0c;其…

网络原理TCP/IP(2)

文章目录 TCP协议确认应答超时重传连接管理断开连接 TCP协议 TCP全称为"传输控制协议(Transmission Control Protocol").⼈如其名,要对数据的传输进⾏⼀个详细 的控制; TCP协议段格式 • 源/目的端口号:表⽰数据是从哪个进程来,到哪个进程去; • 32位序号/32位确认…

会声会影下载 Corel VideoStudio 2023 v26.1.0.268中文激活版

会声会影Corel VideoStudio 2023破解版是领先的视频编辑和转换软件&#xff01;提供直观友好的功能&#xff0c;让用户能够更快速便捷地制作独特的视频&#xff0c;高质量的效果&#xff0c;各种滤镜、贴纸、过渡、模板等都将让您事半功倍&#xff01;软件允许您导入自己的剪辑…

社区店加盟:如何选择适合的品牌和项目?

在当下创业热潮中&#xff0c;社区店加盟成为了许多创业者的首选。特别是鲜奶吧这种深受各年龄段人群喜爱的项目&#xff0c;更是备受关注。然而&#xff0c;面对众多品牌和项目&#xff0c;如何选择适合自己的社区店加盟品牌和项目呢&#xff1f; 作为一位资深的鲜奶吧创业者…