在JavaScript的ES5版本中Array数组的reduce方法详解

2023-11-16

函数声明:reduce(callback[, initialValue])

参数说明:

callback - 回调函数,格式为function (prev,next)

initialValue - 初始值,可选参数

返回值:最后一次执行callback 回调函数的返回值


运行机制:

var arr = ['a', 'b', 'c', 'a', 'd'];
var i = 0;
arr.reduce(function (prev, next) {
    i++;
    console.log('第' + i + '次循环:', prev, next);
    return prev + next;
});
//VM418:3 第1次循环: a b
//VM418:3 第2次循环: ab c
//VM418:3 第3次循环: abc a
//VM418:3 第4次循环: abca d
//"abcad"

采用reduce(callback)调用方式时:

第一次循环,prev=数组的第一个元素,next=数组的第二个元素

第二次循环,prev=第一次循环的返回值,next=数组的第三个元素;

之后的每一次循环,prev=上一次循环的返回值,next=数组的下一个元素,直到数组末尾。

var arr = ['a', 'b', 'c', 'a', 'd'];
var i = 0;
arr.reduce(function (prev, next) {
    i++;
    console.log('第' + i + '次循环:', prev, next);
    return prev + next;
}, 'n');
//VM421:3 第1次循环: n a
//VM421:3 第2次循环: na b
//VM421:3 第3次循环: nab c
//VM421:3 第4次循环: nabc a
//VM421:3 第5次循环: nabca d
//"nabcad"

采用reduce(callback, initialValue)调用方式时

第一次循环,prev=initialValue,next=数组的第一个元素

第二次循环,prev=第一次循环的返回值,next=数组的第个元素;

之后的每一次循环,prev=上一次循环的返回值,next=数组的下一个元素,直到数组末尾。


是否传递initialValue参数的区别:

采用reduce(callback)方式,在第一次循环时,prev=数组的第一个元素,next=数组的第二个元素;
采用reduce(callback, initialValue)方式,在第一次循环时,prev=initialValue,next=数组的第一个元素。


统计元素个数实例:

var arr = ['a', 'b', 'c', 'a', 'd'];
var i = 0;
arr.reduce(function (prev, next) {
    i++;
    console.log('第' + i + '次循环:', prev, next);
    prev[next] = (prev[next] + 1) || 1;
    return prev;
}, {});
//VM424:3 第1次循环: Object {} a
//VM424:3 第2次循环: Object {a: 1} b
//VM424:3 第3次循环: Object {a: 1, b: 1} c
//VM424:3 第4次循环: Object {a: 1, b: 1, c: 1} a
//VM424:3 第5次循环: Object {a: 2, b: 1, c: 1} d
//Object {a: 2, b: 1, c: 1, d: 1}



本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在JavaScript的ES5版本中Array数组的reduce方法详解 的相关文章

  • javascript中映射对象的字符串

    var map new Map map set key1 value1 map set key2 value2 console log map console log map toString console log JSON parse
  • 使用 PHP 的 JavaScript atob 操作

    我想知道是否可以使用 PHP 解密 JavaScript 加密文本 使用 JavaScript 的 btoa 函数加密 看一下base64 decode http php net manual en function base64 deco
  • 停止所有 JavaScript 执行

    是否有一个相当于 php die 函数的 javascript 可以停止所有 javascript 包括将来的 ajax 请求回调 超时等 运行 注意 我无法在调试器中使用断点 因为 bug 存在于 ie8 中 并且调试器会阻止您在断点处向
  • 未记录的 Sheet API 限制问题

    我已经看过人们遇到类似问题的帖子 但找不到明确的答案 我尝试使用以下代码行检索 264735 个插槽的二维数组 var optionalArguments majorDimension ROWS valueRenderOption FORM
  • 如何在服务器中处理用于发布目的的日期

    我从 ASP NET MVC 获得了这个值 Date 1446393600000 它在 SQL 数据库中的值是 2015 11 02 这是一个date 仅限日期 并将其作为 javascript 对象进行操作 我使用moment js ht
  • HTML5 - 创建画布视口

    我有一个 2D 数组 宽 30 下 20 然而 视口仅绘制横向 15 和向下 10 的内容 我最初有一个这样的游戏 我一直在努力实现这样的目标 这是我的小提琴 http jsfiddle net sTr7q http jsfiddle ne
  • 使用加权概率和值查找数组中的项目

    上周我正在做的一个简单程序遇到了一些问题 这里有人帮助了我 现在我遇到了另一个问题 我目前有这个代码 var findItem function desiredItem var items item rusty nail probabili
  • 使用Puppeteer拦截请求时如何获取原始编码响应大小?

    我使用此代码来记录在 Chrome 中加载页面时编码的响应大小 const puppeteer require puppeteer async function const browser await puppeteer launch co
  • onClick 在 p 标签上无法正常工作

    我想为每个绑定一个点击事件 p 但它似乎不能正常工作 当我运行脚本时 我立即收到三个警报 我只想在单击三个中的任何一个时获得它们 p p s 谁能告诉我我做错了什么 编辑 抱歉 这就是它的样子 HTML 应该是这样的 p p class s
  • 在 mdn web 文档中 Element.querySelector 方法说它应该是后代,但示例显示不然

    我正在从 MDN 网络文档学习 JavaScript 我刚刚在学习Element querySelector method 据记载 它返回第一个元素 该元素是调用它的元素的后代 并且与指定的选择器组匹配 但有一个例子与这个事实相矛盾 var
  • 为什么在 Javascript 中添加两位小数会产生错误的结果? [复制]

    这个问题在这里已经有答案了 可能的重复 JavaScript 的数学有问题吗 https stackoverflow com questions 588004 is javascripts math broken 为什么 JS 搞砸了这个简
  • Twitter-Typeahead 不提供建议

    我正在尝试使用twitter typeahead rails 我的目的是当我在 Typeahead 输入框中键入内容时 通过下拉框建议模型 User 的实例 但是 当我打字时什么也没有发生 有人看到我的代码有什么问题吗 Gemfile ge
  • 打开 Chrome 扩展程序时出现 Service Worker TypeError

    当我打开 WAVE Web 可访问性评估工具 扩展时 我的服务工作人员在 Chrome 中抛出此错误 未捕获 承诺中 类型错误 请求方案 chrome extension 是 不支持的 在 sw js 52 匿名 sw js 52 Prom
  • 如何最高效地更新MongoDB中的大量文档?

    我想要最有效地更新大量 gt 100 000 文档 我的第一个天真的方法是在 JS 级别上进行 编写脚本 首先获取 ids 然后循环 ids 并通过 id 调用更新 完整 文档或 set 补丁 我遇到了内存问题 还将数据分成了最大块 500
  • 从字符串中提取所有链接

    我有一个 javascript 变量 其中包含页面的 HTML 源代码 不是当前页面的源代码 我需要从该变量中提取所有链接 关于什么是最好的方法的任何线索 是否可以为变量中的 HTML 创建一个 DOM 然后遍历它 我不知道这是否是推荐的方
  • JQuery 从 Div 中抓取文本减去子元素[重复]

    这个问题在这里已经有答案了 有没有一种简单的方法可以从这个 div 中获取文本而不获取任何子元素 div strong Title Text Unwanted strong This is the text I need div 我知道我可
  • Chrome 无法识别我对 javascript 文件的更改并加载旧代码?

    我在这里坐了将近一个小时来测试我正在构建的网站 由于我想查看代码中的新更改 因此我重新加载了代码 但它正在重新加载旧代码 我打开了 devetools 进行硬重新加载和清空缓存硬重新加载 它们都加载我的旧代码 我进入隐身模式 它做了同样的事
  • JavaScript 使用多少位来表示数字?

    JavaScript 使用多少位来表示数字 一般JS实现使用64位双精度浮点数 对 32 位整数执行按位运算
  • NestJs:如何使 Body 输入形状与实体的 DTO 不同?

    我的照片和标签对象有 DTO 如下所示 export class PhotoDto readonly title string readonly file string readonly tags TagDto export class T
  • 如何从 JavaScript 中的平面数据构建层次结构树?

    我有这样的 json 数据 Data Id 1 Name abc Parent Id 2 Name abc Parent 1 Id 3 Name abc Parent 2 Id 4 Name abc Parent 2 我想将这些数据转换为层

随机推荐

  • 【JS】JavaScript时间与时间戳相互转换

    时间与时间戳相互转换 1 2 时间 JS常用时间类型 1 2 1 GMT 格林尼治标准时 1 2 2 UTC 协调世界时 1 2 3 中国标准时间 1 2 4 ISO8601标准时间格式 1 2 5 时间戳 timestamp 1 时间戳转
  • spring boot项目自动加载引入外部bean

    前言 spring boot项目简化了对外部项目的引入 使我们能够狠方便的构建一个web项目 我们通常在开发的过程中会开发出一些公用的模块组件 这样在项目找那个引入后能够直接使用 减少了轮子的重复构造 同时服务引入的模块化操作 能够更多的节
  • CV学习:OpenCv快速入门(python版)

    本文代码全部可运行 笔者运行环境 python3 7 pycharm opencv4 6 此文是学习记录 记录opencv的入门知识 对各知识点并不做深入探究 文章的目的是让阅读者在极短的时间达到入门水平 在学习过程中 我们应养成 查询op
  • pygame用blit()实现动画效果

    pygame的的实现动画的方法有很多 但是都是围绕着表面进行的 也就是说实现动画的方式不同 但是本质其实都是对表面的不同处理方式而已 原理其实很简单 有点像我们做地铁的时候隧道里的广告一样 我们设置一个窗口 然后让窗口在一个画着很多帧图像的
  • 约束综合中的逻辑互斥时钟(Logically Exclusive Clocks)

    注 本文翻译自Constraining Logically Exclusive Clocks in Synthesis 逻辑互斥时钟的定义 逻辑互斥时钟是指设计中活跃 activate 但不彼此影响的时钟 常见的情况是 两个时钟作为一个多路
  • IDEA从安装到使用--相关配置详解

    IDEA从安装到使用 相关配置详解 作为一个技术小白 刚开始学习使用Intellij IDEA 入门时踩了很多的坑 这里写下我的第一篇博客 分享相关IDEA的配置方法 希望能为各位提供一点帮助 IDEA2018安装及破解 作者 志哥的成长笔
  • 大数(四则运算)

    四则运算 大数加法 高精度加法 大数减法 大数乘法 大数乘法 幂运算 大数乘法 高精度幂运算 大数除法 大数加法 思路 从后往前算 即由低位向高位运算 计算的结果依次添加到结果中去 最后将结果字符串反转 输入的时候两个数都是以字符串的形式输
  • 网站架构演变

    网站架构演变 大型网站介绍 与传统企业应用系统相比 大型互联网网站系统具有以下特点 1 大流量 高并发 这一点往往是传统企业应用系统根本就不会遇到的问题 比如Goole每日访问量都是几十亿 如果服务器端处理不好早就被压的宕机了 2 高可用
  • 环形缓冲区(1)

    声明 参考韦东山视频教程 如若侵权请告知 马上删帖致歉 个人总结 如有不对 欢迎指正 环形缓冲区 环形缓冲区的几个基本操作 申请内存空间 写操作 读操作 环形缓冲区小结 判断缓冲区是否为空 判断缓冲区是否写满 构建环形缓冲区 在 h文件中声
  • 【Augmentation Zoo】RetinaNet + VOC + KITTI的数据预处理-pytorch版

    整合前段时间看的数据增强方法 并测试其在VOC和KITTI数据上的效果 我的工作是完成了对VOC和KITTI数据的预处理 RetinaNet的模型代码来自pytorch retinanet 该项目github仓库在 https github
  • 中标麒麟+达梦数据库 无效的列名[AAAAAAAAAAAAAFS]

    目录 前言 解决办法 中标麒麟 解决办法 windows 前言 今天我将项目部署到中标麒麟服务器 发现原本好使的功能 只要一做添加操作就报如下错误 虽然报错 但数据还是添加了进去 这让我十分费解 解决办法 中标麒麟 问题出现在返回新增结果时
  • Next.js中使用antd修改其组件的默认样式

    在项目中使用了next js搭配了antd 其中需要自定义antd样式 在next js中如果想定义css 我用到的有两种方式 一种是直接使用行内式 div test div 另一种就是写一个css文件后引入 定义一个test module
  • SpringBoot(5)-SpringBoot整合其他项目

    SpringBoot 5 SpringBoot整合其他项目 1 整合Druid数据库连接池 1 1学习地址 1 2application yml 1 3访问一下 1 4随便执行一下新增 2 整合Redis 2 1添加redis pom依赖
  • mimikatz

    https blog gentilkiwi com mimikatz https github com ParrotSec mimikatz
  • C++day1(笔记整理)

    一 Xmind整理 二 上课笔记整理 1 第一个c 程序 hello world include
  • docker 四种网络模型

    一 docker网络基础知识 Docker在创建容器时有四种网络模式 bridge为默认不需要用 net去指定 其他三种模式需要在创建容器时使用 net去指定 bridge模式 使用 net bridge指定 默认设置 none模式 使用
  • java各类型String,int,char,long,StringBuilder,StringBuffer,Integer之间的转换总结

    String和char类型之间的转换 1 String char 因为String是字符串 而char是单个字符 只能把String 转化为char数组 方法为 char ch str toCharArray 2 char String 方
  • cmake命令之target_include_directories

    一 介绍 命令格式 target include directories
  • 完整的芯片反向设计流程原来是这样的!(实例讲解)

    完整的芯片反向设计流程原来是这样的 实例讲解 作者 时间 2018 02 23来源 网络收藏 现代IC产业的市场竞争十分激烈 所有产品都是日新月异 使得各IC设计公司必须不断研发新产品 维持自身企业的竞争力 IC设计公司常常要根据市场需求进
  • 在JavaScript的ES5版本中Array数组的reduce方法详解

    函数声明 reduce callback initialValue 参数说明 callback 回调函数 格式为function prev next initialValue 初始值 可选参数 返回值 最后一次执行callback 回调函数