ECMAScript 2019 中的 Array.prototype.reduce 方法:数组元素求和

阅读时长 3 分钟读完

在前端开发中,数组操作是一项非常常见的工作。而在这些数组操作中,求和可能是最常见的操作之一。在 ECMAScript 2019 中,Array 原型对象中新增了 reduce 方法,它可以满足我们对数组元素求和的需求。

reduce 方法介绍

reduce 方法是 Array 原型对象中的一个方法,它用于对数组中的每个元素执行一个给定的reducer 函数(从左到右,也就是从第一个元素到最后一个元素),将其结果汇总成单个值。

它的语法如下:

  • callback: 执行数组中每个值 (如果没有提供 initialValue则从索引1开始)的函数,包含四个参数:

    • accumulator: 上一次调用回调返回的累积值,或者是提供的 initialValue。

    • currentValue: 数组中当前被处理的元素。

    • currentIndex:当前被处理的元素在数组中的下标。

    • array: 数组本身。

  • initialValue (可选的): 作为第一次调用 callback 函数时的第一个参数的值。

当不提供 initialValue 的时候,reduce 会从数组的第二个元素开始执行 callback,累积器 accumulator 存储的是第一个元素的值。当提供 initialValue 的时候,reduce 会从数组的第一个元素开始执行 callback,累积器 accumulator 存储的是 initialValue 的值。

reduce 返回最终累积值。

数组元素求和示例

下面是一个简单的数组元素求和示例。

在上面的代码中,我们通过 reduce 方法对 numbers 数组中的每个元素进行求和操作,并且指定了累积器 accumulator 的初始值为 0。

reduce 方法的优势

使用 reduce 方法可以让我们更加精简和优美地编写代码。比如,我们有一个数组 userList,我们需要对里面的每个对象的 age 字段求和,并且只有年龄大于 18 岁的才对求和做出贡献。

使用 reduce 方法,我们可以很方便地完成这个操作,示例代码如下:

-- -------------------- ---- -------
----- -------- - -
    - ----- ----- ---- -- --
    - ----- ----- ---- -- --
    - ----- ----- ---- -- -
--
----- ------ - --------------------- ----- -- -
    -- --------- - --- -
        ------ --- - ---------
    -
    ------ ----
-- ---

-------------------- -- --

reduce 方法的指导意义

reduce 方法并不仅仅适用于数组中求和的场景,还可以用于其他的累积计算,比如累积字符串等。掌握 reduce 方法可以帮助我们提高代码的可读性和简洁性,让我们写出更加优雅高效的代码。

总结

ECMAScript 2019 中新增的 Array.prototype.reduce 方法为我们提供了方便的累积元素求和操作。我们可以通过设置初始值和回调函数来实现对数组的累加操作。reduce 方法不仅仅适用于求和,还可以用于其他累积计算,是我们在开发中必备的方法之一。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a3b4fe48841e9894013120

纠错
反馈