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

1. 语法reduce说明

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

第一个参数: callback函数

执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数,包含四个参数:

accumulator
          累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。

currentValue
          数组中正在处理的元素。

index 可选
           数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则从索引1起始。

array可选
          调用reduce()的原数组

第二个参数: initialValue可选

作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

这个看下来都有点蒙,其实就是两种情况,一种情况是给了初始值,一种是没提供也就是reduce的第二个参数initialValue。

reduce为数组中的每一个元素依次执行callback函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:

accumulator 累计器
currentValue 当前值
currentIndex 当前索引
array 数组
回调函数第一次执行时,accumulator 和currentValue的取值有两种情况:如果调用reduce()时提供了initialValue,accumulator取值为initialValue,currentValue取数组中的第一个值;如果没有提供 initialValue,那么accumulator取数组中的第一个值,currentValue取数组中的第二个值。

为了理解透举个栗子:

(1)没有给初始值时:

(2)给初始值时

提供一个初始值作为reduce()方法的第二个参数,以下是运行过程及结果:

(3)其他用途:

多维数组降维:

 求和:

 按属性对object分类:

 数据处理成树结构:

初试数据:

reduce处理数据的逻辑:

最终想要的树结构数据:

参考链接:https://blog.csdn.net/weixin_41229588/article/details/106858685

ES6中的数组reduce()方法详解的更多相关文章

  1. JS进阶篇--JS数组reduce()方法详解及高级技巧

    基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...

  2. JS数组reduce()方法详解及高级技巧

    1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上 ...

  3. JS reduce()方法详解,使用reduce数组去重

     壹 ❀ 引 稍微有了解JavaScript数组API的同学,对于reduce方法至少有过一面之缘,也许是for与forEach太强大,或者filter,find很实用,在实际开发中我至始至终没使用过 ...

  4. PHP 中 16 个魔术方法详解

    PHP 中 16 个魔术方法详解   前言 PHP中把以两个下划线__开头的方法称为魔术方法(Magic methods),这些方法在PHP中充当了举足轻重的作用. 魔术方法包括: __constru ...

  5. php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz)

    原文:php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz) 折腾了两天,dwz删除后,数据不能自动刷新,解决方案,直接看图  . 1. 删除.修改状态后无法刷新记录: 在dwz. ...

  6. python中requests库使用方法详解

    目录 python中requests库使用方法详解 官方文档 什么是Requests 安装Requests库 基本的GET请求 带参数的GET请求 解析json 添加headers 基本POST请求 ...

  7. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  8. 并发编程(六)Object类中线程相关的方法详解

    一.notify() 作用:唤醒一个正在等待该线程的锁的线程 PS : 唤醒的线程不会立即执行,它会与其他线程一起,争夺资源 /** * Object类的notify()和notifyAll()方法详 ...

  9. JavaScript数组的reduce方法详解

    数组经常用到的方法有push.join.indexOf.slice等等,但是有一个经常被我们忽略的方法:reduce,这个方法简直强大的不要不要的. 我们先来看看这个方法的官方概述:reduce()  ...

随机推荐

  1. ROS机械臂 Movelt 学习笔记2 | Move Group 接口 C++

    Movelt为使用者提供了一个最通用且简单的接口 MoveGroupInterface 类,这个接口提供了很多控制机器人的常用基本操作,如: 设置机械臂的位姿 进行运动规划 移动机器人本体 将物品添加 ...

  2. Tampermonkey究竟有什么用?

    以具体应用实例加以说明. 目标:在youtube页面上观看视频,发现喜欢的视频,单击按钮就可以下载视频. 但是,youtube页面并未提供这样的按钮及其功能. 实现思路:在浏览器下载youtube页面 ...

  3. Git上传仓库

    上传代码到gitee 方法1 1. 将远程仓库克隆到本地 git clone https://gitee.com/abc/aaa.git 2. 添加或修改本地文件 3. 将本地代码push到远程仓库 ...

  4. python将命令输出写入文件或临时缓存

    python将命令输出写入文件 将文件写入到对应文件,方便后期处理或保存 def write_file(file_path): with open(file=file_path, mode=" ...

  5. Odoo14 OWL 如何访问model方法和res_id

    首先OWL是Odoo14版本新加的功能. 因为是新加的所以并没有太多的说明文档,包括英文板文档也没有:所以你要用它再没有更详细的文档之前你得自己去看源码. 注意owl是没有do_action函数给你跳 ...

  6. 飞书前端提到的竞态问题,在 Android 上怎么解决?

    请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...

  7. 优雅退出在Golang中的实现

    背景 为什么需要优雅关停 在Linux下运行我们的go程序,通常有这样2种方式: 前台启动.打开终端,在终端中直接启动某个进程,此时终端被阻塞,按CTRL+C退出程序,可以输入其他命令,关闭终端后程序 ...

  8. 暑期 2021 参与社区:新一代工作流调度——Apache DolphinScheduler

    在众多企业都在进行数字化转型的大背景下,大数据.人工智能等行业有着十分广阔的前景,其发展也可谓如火如荼.发展过程中这其中当然离不开数据采集.数据流通和数据价值挖掘等各种环节,而各环节的打通需要一个坚实 ...

  9. 海豚调度直播来了 - 即将发版的1.3.0新特性及Roadmap路线

    在过去的3个多月,Apache DolphinScheduler(incuating)和DolphinScheduler社区发生了很多变化,今晚19:30在线直播将为大家介绍最新1.3.0的新特性及R ...

  10. centos/windows服务器,Mysql数据库表结构损坏-已解决

    [问题原因]服务器突然断电 [故障报告]数据库表结构损坏 [解决思路]进入强制恢复模式,备份库表及数据重建 故障发现 周末公司断电,周一启动数据库就直接报错了 查看日志 上面标记的log,明确表示是非 ...