ES6 reduce方法：示例与详解、应用场景-Toy模板网

这篇具有很好参考价值的文章主要介绍了ES6 reduce方法：示例与详解、应用场景。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

ES6 reduce方法：示例与详解、应用场景,# Javascript理论与实践,es6,reduce方法,大剑师

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

ES6 reduce方法：示例与详解、应用场景,# Javascript理论与实践,es6,reduce方法,大剑师

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