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

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

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函数。