还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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+】 |
文章目录
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函数。