JavaScript reduce和reduceRight详解

什么是reduce方法？

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个元素从左到右依次调用该函数，并将累加器的返回值作为下一次调用该函数的参数。最终将返回累加器的最终值。

reduce() 可以实现一些非常复杂的累计逻辑，但它也是一个非常复杂的方法，需要花费一些时间和精力来理解。在这篇文章中，我们将展示一些使用 reduce() 的示例，以帮助你更好地理解它的工作原理。

reduce基本语法

array.reduce(function(total,currentValue,currentIndex,arr), initialValue)

参数说明

• function(total,currentValue,currentIndex,arr)：必需，用于执行每个数组元素的函数。常用的参数有：

• total：必需，初始值，或者计算结束时的返回值。

• currentValue：必需，当前元素。
• currentIndex：可选，当前元素的索引。

• arr：可选，当前数组对象。

• initialValue：可选，传递给函数的初始值。如果没有提供初始值，则使用数组中的第一个元素作为初始值。

reduce方法有两种不同的使用方式

I. reduce()

以从左到右的顺序迭代数组元素，例如：

const numbers = [1,2,3,4,5]
const sum = numbers.reduce((total, num) => total + num)
console.log(sum) // 15

在这个例子中，我们使用 reduce() 方法从最左边的元素开始累加数组中的元素。

II. reduceRight()

从右侧的第一个元素开始，反向迭代数组元素，例如：

const numbers = [1,2,3,4,5]
const sum = numbers.reduceRight((total, num) => total + num)
console.log(sum) // 15

在这个例子中，我们使用 reduceRight() 方法从最右边的元素开始累加数组中的元素。

reduce方法示例

示例一：计算平均值

const numbers = [1,2,3,4,5]
const total = numbers.reduce((acc, num) => acc + num) // 总和
const avg = total / numbers.length // 平均值
console.log(avg) // 3

在本例中，我们首先使用 reduce() 方法计算数组中所有元素的总和。然后，我们将总和除以数组的长度来计算平均值。

示例二：扁平化嵌套数组

const nestedArray = [[1,2], [3,4], [5,6]]
const flattenedArray = nestedArray.reduce((acc, arr) => acc.concat(arr), [])
console.log(flattenedArray) // [1,2,3,4,5,6]

在这个例子中，我们使用 reduce() 方法将嵌套数组打平为一个简单的一维数组。我们传递一个空数组作为 reduce() 方法的初始值，然后在每次迭代中使用 concat() 方法去连接当前迭代的数组，最终得到扁平化后的数组。

reduceRight方法示例：

示例一：反转字符串

const str = 'example string'
const reversedStr = str.split('').reduceRight((acc, char) => acc + char, '')
console.log(reversedStr) // gnirts elpmaxe

在这个例子中，我们使用 reduceRight() 方法将字符串反向。我们首先使用 split('') 方法将字符串转换为字符数组，然后使用 reduceRight() 方法将字符数组反转。我们传递一个空字符串作为 reduceRight() 方法的初始值，然后在每次迭代中将当前字符连接到累加器的后面。

示例二：鉴别回文字符串

const str = 'dad'
const isPalindrome = str
    .split('')
    .reduceRight((acc, char, idx) => {
        if (char === str[idx]) {
            return acc
        } else {
            return false
        }
    }, true)
console.log(isPalindrome) // true

在本例中，我们使用 reduceRight() 方法来测试一个字符串是否为回文字符串。我们从字符串的右侧开始迭代，依次比较当前字符和对称位置的字符是否相等。如果每一组字符都相等，则返回 true；否则返回 false。