在前端开发中,数组操作是一项非常常见的工作。而在这些数组操作中,求和可能是最常见的操作之一。在 ECMAScript 2019 中,Array 原型对象中新增了 reduce 方法,它可以满足我们对数组元素求和的需求。
reduce 方法介绍
reduce 方法是 Array 原型对象中的一个方法,它用于对数组中的每个元素执行一个给定的reducer 函数(从左到右,也就是从第一个元素到最后一个元素),将其结果汇总成单个值。
它的语法如下:
array.reduce(callback[, initialValue])
callback: 执行数组中每个值 (如果没有提供 initialValue则从索引1开始)的函数,包含四个参数:
accumulator: 上一次调用回调返回的累积值,或者是提供的 initialValue。
currentValue: 数组中当前被处理的元素。
currentIndex:当前被处理的元素在数组中的下标。
array: 数组本身。
initialValue (可选的): 作为第一次调用 callback 函数时的第一个参数的值。
当不提供 initialValue 的时候,reduce 会从数组的第二个元素开始执行 callback,累积器 accumulator 存储的是第一个元素的值。当提供 initialValue 的时候,reduce 会从数组的第一个元素开始执行 callback,累积器 accumulator 存储的是 initialValue 的值。
reduce 返回最终累积值。
数组元素求和示例
下面是一个简单的数组元素求和示例。
const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue; }, 0); console.log(sum); // 15
在上面的代码中,我们通过 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