在前端开发中，我们经常需要对数组进行遍历或者对其进行累加或者合并操作。此时，reduce 函数是一个非常实用的函数。ES8 中，reduce 函数也有了一些新的用法，本文将详细介绍 ES8 Reduce 循环过程及实例。
基本的 reduce 函数
Reduce 函数是 JavaScript 中基本的函数之一，我们通过它可以对数组进行归纳操作。reduce 函数包含两个参数，第一个参数是回调函数，第二个参数是初始值。
array.reduce((accumulator, currentValue, currentIndex, array) => {
// 你的业务逻辑
}, initialValue)下面，我们将介绍 reduce 循环的过程。
第一轮
第一轮循环，accumulator 的值等于初始值 initialValue，currentValue 的值等于数组中的第一个元素。
第二轮
第二轮循环，accumulator 的值等于上一轮回调函数的返回值，currentValue 的值等于数组中的第二个元素。
...
以此类推，最后一个元素为 currentvalue，回调函数的返回值即为最终归纳的结果。
ES8 中的新用法
ES8 中，reduce 函数又新增了 3 个方法，分别是：reduceRight、flatMap 和 flat。
reduceRight
reduceRight 与 reduce 的区别在于，它从数组的右侧开始执行归纳操作。该函数的使用方式与 reduce 相同，不同的是，它从右侧开始归纳数组的操作。
array.reduceRight((accumulator, currentValue, currentIndex, array) => {
// 你的业务逻辑
}, initialValue)flatMap
flatMap 方法在原数组中首先执行 map 方法，之后将返回的新数组按照深度优先的顺序进行一次展开，并将展开后的元素放置在一个新数组中返回。
array.flatMap(element => {
// 你的业务逻辑
});flat
flat 方法用于展开数组，返回一个新的一维数组。该函数有一个可选参数，表示展开的深度。
array.flat(depth);
实例演示
接下来，我们以一个实例为例，演示 ES8 中的 reduce 函数。我们将展示如何通过 reduce 函数，累加数组中的元素。
const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((acc, curr) => acc + curr); console.log(sum);
上述代码中，我们定义了一个数组 numbers，然后通过 reduce 函数，将该数组中的元素进行累加，最后得出了该数组的总和。
接下来，我们将演示如何使用 flatMap 将数组中的元素进行合并。
const array = [[1], [2], [3, 4]]; const mergedArray = array.flatMap(item => item); console.log(mergedArray);
上述代码中，我们定义了一个二维数组 array，然后使用 flatMap 函数，将其合并成一个一维数组。
最后，我们演示如何使用 flat 展开多维数组。
const array = [1, [2, [3, 4]]]; const flattenedArray = array.flat(Infinity); console.log(flattenedArray);
在上述代码中，我们定义了一个多维数组 array，然后使用 flat 函数展开了该数组。
总结
reduce 函数是 JavaScript 中一个非常实用的函数，它在 ES8 中又新增了一些方法，如 reduceRight、flatMap 和 flat。这些方法为我们的编码带来了便利。本文中，我们介绍了 reduce 函数的循环过程及实例，并展示了 ES8 中 reduce 函数的新用法。通过本文的学习，相信读者已经掌握了如何通过 reduce 函数对数组进行遍历、归纳和展开的方法，并能够将这些方法应用到实际的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646fdaa1968c7c53b0e11119
