前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >reduce方法的使用

reduce方法的使用

作者头像
且陶陶
发布于 2023-04-12 07:51:34
发布于 2023-04-12 07:51:34
47200
代码可运行
举报
文章被收录于专栏:Triciaの小世界Triciaの小世界
运行总次数:0
代码可运行

认识reduce 语法:arr.reduce(callbackFn,[initialValue])

callbackFn : 一个 “reducer” 函数,包含四个参数:

  1. previousValue:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]
  2. currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]。
  3. currentIndex:数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。
  4. [ initialValue] 可选 作为第一次调用 callback 函数时参数 previousValue 的值
  • 若指定了初始值 initialValue,则 currentValue 则将使用数组第一个元素;
  • 否则 previousValue 将使用数组第一个元素,而 currentValue 将使用数组第二个元素。 array:用于遍历的数组。

数组求和,求乘积

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr = [1, 2, 3, 4]
// 累加
const sum = arr.reduce((prev, curr) => prev + curr)
console.log(sum)
// 累乘
const mul = arr.reduce((prev, curr) => prev * curr)
console.log(mul)

计算数组元素出现的次数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr = [1, 2, 2, 3, 4, 5, 4, 4, 1]
const arrNum = arr.reduce((prev, curr) => {
  if (curr in prev) {
    prev[curr]++
  } else {
    prev[curr] = 1
  }
  return prev
}, {}) // prev的初始值是一个空对象,将数组元素作为对象的属性名传入
console.log(arrNum)

数组去重

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr = [1, 2, 2, 3, 4, 5, 4, 4, 1]
const newArr = arr.reduce((prev, curr) => {
  if (!prev.includes(curr)) {
    // prev的初始值是一个空数组,判断如果这个新数组中不包含原数组的元素时
    prev.push(curr)
  }
  return prev
}, [])
console.log(newArr)

数组降维

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 多维数组转化一维

let arr = [
  [0, 1],
  [2, 3],
  [4, [5, 6, 7]],
]
const newArr = (arr) => {
  return arr.reduce(
    // 判断arr中的项是否是一个数组,如果是的话就直接合并数组,不是就递归这个方法
    (prev, curr) => prev.concat(Array.isArray(curr) ? newArr(curr) : curr),
    []
  )
}
console.log(newArr(arr))
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-03-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JS数组reduce()方法详解及高级技巧
reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。
kif
2023/02/27
6940
reduce你真的会用吗
或许大家都知道reduce,但相信一定会有一部分跟我一样只是知道却没怎么用过。不过没关系,看完本文,你会发现reduce在特地场景有多香。
用户8921923
2022/10/24
2950
lambda+reduce的一句艰深代码
一句话一脸懵逼 某天晚上看到一句lambda+reduce 组合的代码,看的头都炸了,愣是没看懂,不过也可能因为稀疏的脑神经经过一天的摧残已经运转不动了,这两天拿出来一看,一不留神理通了。 代码如下:
lonelydawn
2018/02/09
4590
lambda+reduce的一句艰深代码
js几个易混淆方法速学
// Array.prototype.filter() // filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中。 // array filter 对于索引值下为undefined 或者不存在的值过滤的时候会直接跳过。 var
蓓蕾心晴
2022/06/12
3300
js中的reduce()方法 讲解 和实现
该方法对数组中的每个元素 按序执行 一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
心安事随
2024/07/29
1220
Javascript数组操作
使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间;思虑下,堪能如此继续之?当狠心深学下方是正道。 一, 数组常用方法 1. 数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1
晚晴幽草轩轩主
2018/03/27
3.9K0
reduce()数组方法的使用场景
程序媛夏天
2024/01/18
2280
Js中Array对象
JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。
WindRunnerMax
2020/10/26
9.9K0
写一个去除数组中重复元素的函数
Set是一种只存储唯一值的数据结构,因此任何重复的元素都会被自动忽略。然后,我们使用扩展运算符…将Set对象转换回数组,并返回这个新的数组。
程序媛夏天
2024/03/13
1320
2022秋招前端面试题(六)(附答案)
事件流是网页元素接收事件的顺序,"DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。
helloworld1024
2022/08/08
1K0
常用的数组高阶函数
FGGIT
2024/10/15
960
Javascript数组系列二之迭代方法2
今天我们来继续 Javascript 数组系列的文章,上文 《Javascript数组系列二之迭代方法1》 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们的开发效率以及数据的处理。接下来我们继续来讲解其他的一些迭代的方法。
六小登登
2022/05/10
5140
Javascript数组系列二之迭代方法2
ES6中Array数组你应该知道的操作
上一次我们讲解了JavaScript的Array,了解了很多关于Array的属性,方法等。相信大家收益颇多,今天为大家带来更深次的了解,希望您可以学习更多。如果您还没有了解上一课程,请点击:你对JavaScript的Array对象了解有多少? 下方的代码都通过ES6语法,所以您需要先熟悉它。下面我们直奔主题。
Javanx
2019/09/04
5800
reduce学习笔记
功能:为数组的每个元素执行回调函数;接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
用户7572539
2020/08/26
4710
reduce()方法的应用
reduce() 是 JavaScript 数组(Array)对象的一个方法,它接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
程序媛夏天
2024/03/16
1270
13个JavaScript数组reduce的实例方法
对比map、 forEach、 filter 等数组方法,reduce比它们更强。
前端达人
2021/05/11
7850
redux之compose的理解
最近给自己的react项目添加redux的时候,用到了redux中的compose函数,使用compose来增强store,下面是我在项目中的一个应用:
astonishqft
2022/05/10
4550
reduce函数20个高级用法 看看你掌握了多少?
微芒不朽
2024/04/03
5160
reduce函数20个高级用法 看看你掌握了多少?
es 5 数组reduce方法记忆
reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。 概念:对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。 语法: array1.reduce(callbackfn[, initialValue]) 参数: 参数 定义 array1 必需。一个数组对象。 callbackfn 必需。一个接受最多四个参数的函数。对于数组中的每个元
蓓蕾心晴
2018/04/12
1.2K0
前端高频面试题
CSSSprites(精灵图),将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的 background-image,background-repeat,background-position属性的组合进行背景定位。
helloworld1024
2022/08/03
7090
相关推荐
JS数组reduce()方法详解及高级技巧
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文