ES6 reduce方法：示例与详解、应用场景

点击全文阅读

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

文章目录

一、定义与语法二、示例代码：1. 数组求和：2. 数组扁平化：3. 计算对象数组中某个属性的总和： 三、应用场景

---

reduce() 函数是 ECMAScript 6 (ES6) 中数组的一个迭代方法，它接收一个回调函数作为累加器（accumulator），对该数组的所有元素（从左到右）执行操作，最后将计算结果累积为单一输出值。

一、定义与语法

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

callback：必需，是一个函数，它接受四个参数：

accumulator（累计器）：累计回调的返回值，也是上一次调用回调时返回的值，或者是 initialValue。currentValue（当前值）：数组中当前正在处理的元素。index（可选）：当前元素在数组中的索引（从0开始或从initialValue指定的位置开始）。array（可选）：调用 reduce 方法的原数组。

initialValue（可选）：传递给 reduce 的初始值。如果不提供此值，那么 reduce 会从数组的第二个元素开始执行，并使用第一个元素作为 accumulator 的初始值。

二、示例代码：

1. 数组求和：

const numbers = [1, 2, 3, 4, 5];// 不提供初始值的情况const sumWithoutInitialValue = numbers.reduce((acc, current) => acc + current);console.log(sumWithoutInitialValue); // 输出：15// 提供初始值的情况const sumWithInitialValue = numbers.reduce((acc, current) => acc + current, 0);console.log(sumWithInitialValue); // 输出：15

2. 数组扁平化：

const nestedArrays = [[1, 2], [3, 4], [5, 6]];const flattenedArray = nestedArrays.reduce((acc, current) => [...acc, ...current], []);console.log(flattenedArray); // 输出：[1, 2, 3, 4, 5, 6]

3. 计算对象数组中某个属性的总和：

const products = [  { id: 1, price: 10 },  { id: 2, price: 20 },  { id: 3, price: 30 },];const totalPrice = products.reduce((total, product) => total + product.price, 0);console.log(totalPrice); // 输出：60

三、应用场景

reduce方法是 JavaScript 中的一个高阶函数，以下是一些实际项目中使用reduce方法的场景：

数组求和：对一个数组中的所有元素进行求和。数组求平均值：对一个数组中的所有元素进行求平均值。数组元素的去重：对一个数组中的所有元素进行去重。统计数组中每个元素出现的次数：将结果以对象的形式输出。根据指定属性对对象数组中的对象进行分组。结合spread运算符（三点运算符...）一起使用。遍历数组，同时对符合条件的数组元素进行操作。将promise的链式操作，按照顺序执行。开启由多个函数组成的管道。用reduce模拟数组的map函数。

点击全文阅读