js数组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.计算总和
let arr = [1,2,3,4,5] let result = arr.reduce((prev,cur)=>{ return prev+cur }) console.log(result)
2.简单数组去重
let arr = [1,2,3,4,5,2,3] let result = arr.reduce((prev,cur)=>{ if (!prev.includes(cur)){ prev.push(cur) } return prev },[]) console.log(result)
上面这个例子噢,第一次循环时,prev的值为[] ,cur的值为数组的第一项,也就是 1 ,然后判断 “1” 是否在[]数组中存在,显然是不存在的,然后将“1”push到prev中,
并return prev ,当第二次循环时,prev接收到了第一次循环函数返回的值,所以prev就等于[1]了,以此类推。。
3.统计每个值,在数组中出现的次数
let arr = [1,2,3,4,5,2,3] let result = arr.reduce((prev,cur)=>{ if (prev[cur] != undefined) { prev[cur]++ } else { prev[cur] = 1 } return prev },{}) console.log(result)
原文地址:https://www.cnblogs.com/Mrrabbit/p/11945380.html
- 跟我学姿势:极客教你如何科学的看电影
- Discuz 5.x/6.x/7.x投票SQL注入分析
- 论如何高效的挖掘漏洞
- Rxjava + retrofit + dagger2 + mvp搭建Android框架
- 走进科学:如何正确的隐藏自己的行踪
- 比特儿(Bter.com) 比特币交易平台被盗事件全解析
- BitTorrent Bleep:无法被监控的聊天软件
- QQ蠕虫的行为检测方法
- 趋势OfficeScan系列产品漏洞分析
- [置顶] 浅谈我为什么选择用Retrofit作为我的网络请求框架
- 基于HTML5的Canvas指纹跟踪技术
- 有关 Android 应用桌面角标 (BadgeNumber) 实现的探讨
- XSS的原理分析与解剖
- Hold安全公司公布俄罗斯大型泄密事件细节
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Jupyter 编写python代码实现代码自动补齐功能设置实例演示
- 第37期:从头学二叉搜索树(面试常考)
- Jupyter 工具的安装与使用方法,jupyter运行python代码演示,好用的python编辑器推荐!
- Nginx相关配置与操作
- Python 技术篇-全局与当前socket超时连接时间设置方法实例演示,查看socket超时连接时间
- 给 JDK 报了一个 P4 的 Bug,结果居然……
- Python 套接字-判断socket服务端有没有关闭的方法实例演示,查看socket运行状态
- docker安装logstash
- Rook Operator 源码分析(1) - osd 启动的流程
- Python 技术篇-利用pyqt5库监听剪切板变动,clipboard.dataChanged.connect()剪切板监听
- 关于MySQL server has gone away
- PyQt5 技术篇-在clipboard.dataChanged.connect()里如何写入剪切板示例演示,pyqt5监听剪切板变动并写入剪切板内容
- 去除WordPress链接中出现的index.php
- MySQL 语法问题:You can‘t specify target table ‘xxx‘ for update in FROM clause. 原因及解决方法
- 配置 prometheus-operator 报警规则