JavaScript reduce() 方法的5个实际用途

在本文中，我们将了解 javascript 数组 reduce 方法的一些方便用法。我将向您展示五个实际用途，包括查找数组的总和。

JavaScript 如何在 javaScript 中使用 Map、Filter 和 Reduce

方法是什么reduce()？

JavaScript 数组reduce方法是一种内置的迭代方法，用于对数组执行累积操作：

array.reduce(callback, initialvalue)

该方法接受一个为数组中的每个项目调用一次的回调函数。每个回调函数调用必须始终返回一个累积值。

传递给的第二个参数reduce()是一个可选的初始值，在第一次迭代中用作累加器。如果省略第二个参数，则数组中的第一项将用作初始值。

JavaScriptreduce()方法非常通用，有一些非常方便的用例，尽管它被广泛认为是所有 JavaScript 迭代器中最令人困惑的。

让我们看一下 JavaScriptreduce()方法的一些用例。

1.对数组求和reduce()

JavaScript reduce 方法最简单也可能是最流行的用法是获取数字列表的总和。

例如，下面是使用 将总分相加的代码reduce：

const topSix = [
    { name: "Nigeria", position: "1st", points: 43 },
    { name: "England", position: "2nd", points: 37 },
    { name: "USA", position: "3rd", points: 35 },
    { name: "South Africa", position: "4th", points: 30 },
    { name: "Brazil", position: "5th", points: 27 },
    { name: "Korea", position: "6th", points: 23 }
]
const totalPoints = topSix.reduce((acc, currTeam) => acc + currTeam.points, 0);
console.log(totalPoints) // Prints 195

在每次迭代中，我们只是将当前团队的积分添加到之前累积的积分中，然后我们将其作为下一次迭代的累积值返回。

JavaScript 的另一个非常相似的用途reduce()是获取数组集合中的项目总数，例如获取团队计数：

const teamsCount = topSix.reduce((acc, currTeam) => acc + 1, 0);
console.log(teamsCount) // Prints 6

当然，最好使用该count属性来获取数组的总数，但这个示例也展示了如何使用该属性进行计数reduce() 。

2.使用数组计算项目的出现次数reduce()

JavaScript 的另一个简单用途reduce()是获取每个项目在数组集合中出现的次数。

例如，下面是获取水果数组中每个水果的总出现次数的代码：

const fruits = [ 'Banana', 'Orange', 'Apple', 'Orange', 'Pear', 'Banana']

const occurrences = fruits.reduce((acc, currFruit) => {
    return {...acc, [currFruit]: (acc[currFruit] || 0) + 1 }
}, {})
console.log(occurrences)
/*
{
  Apple: 1,
  Banana: 2,
  Orange: 2,
  Pear: 1
}
*/

请注意，在迭代的每一步，累加器将是一个哈希映射（即 JavaScript 对象），其中包含迄今为止数组中每个水果的键，值将是每个水果出现的次数。这是我们更新累加器的表达式：

{...acc, [currFruit]: (acc[currFruit] || 0) + 1 }

让我们稍微分解一下。首先，使用扩展运算符，...acc复制累加器中的所有现有值。

然后，[currFruit]:设置数组中当前水果的值。例如，在水果集合的第一次迭代中，这将创建Banana属性。acc[currFruit] || 0从先前版本的累加器中检索该水果的值。如果累加器中不存在水果，它将以零值开始。 

最后，我们将该水果的值加 1 并返回新的累加器。

3.类型之间的转换使用reduce()

您还可以将数组简化为任何其他数据类型。

例如，假设我们只想从对象数组中获取每个学生的姓名。我们可以将数组从对象数组简化为字符串值数组，如下所示：

const students = [
    { name: "Kingsley", score: 70 },
    { name: "Jack", score: 80 },
    { name: "Joe", score: 63 },
    { name: "Beth", score: 75 },
    { name: "Kareem", score: 59 },
    { name: "Sarah", score: 93 }
]
const names = students.reduce((acc, student) => [...acc, student.name], [])
console.log(names)
// Prints ["Kingsley", "Jack", "Joe", "Beth", "Kareem", "Sarah"]

在上面的代码中，我们在每次迭代中只访问名称，并使用扩展运算符将每个名称传递到累积数组中。由于数组文字被设置为初始值，因此它被用作最终值的包装器。

通常，我们会使用map()这个用例，但我想向您展示我们如何使用reduce(). 在许多方面，JavaScriptreduce方法与方法相似map，但更强大。

在下面的例子中，我们将一个学生数组简化为一个对象：

const studentsArray = [
    { name: "Kingsley", score: 70, position: "1st" },
    { name: "Jack", score: 80, position: "2nd" },
    { name: "Joe", score: 63, position: "3rd" },
    { name: "Beth", score: 75, position: "4rd" },
    { name: "Kareem", score: 59, position: "5th" },
    { name: "Sarah", score: 93, position: "6th" }
]
const studentObj = studentsArray.reduce((acc, student) => {
	return {...acc, [student.name]: student.position}
}, {})
console.log(studentObj)
/*
{
  Beth: "4rd",
  Jack: "2nd",
  Joe: "3rd",
  Kareem: "5th",
  Kingsley: "1st",
  Sarah: "6th"
}
*/

在这里，我们将数据集合从对象数组重组为单个对象。

4.从数组中获取最大值和最小值reduce()

使用 JavaScript，您可以通过几行代码轻松地从数组中获取最大和最小数值reduce()。

例如，我们可以从分数列表中获取最大分数，如下所示：

const students = [
    { name: "Kingsley", score: 70 },
    { name: "Jack", score: 80 },
    { name: "Joe", score: 63 },
    { name: "Beth", score: 75 },
    { name: "Kareem", score: 59 },
    { name: "Sarah", score: 93 }
]

const max = students.reduce((acc, student) => {
    if(acc === null || student.score > acc) 
        return student.score
    return acc
}, null)
console.log(max) // Prints 93

在上面的代码中，在每个迭代步骤中，我们检查当前分数值是否大于累加值，或者累加器是否为空。如果是这样，我们用新的高分更新累加器。

换句话说，我们只是在每一步返回迄今为止的最高分。

相反，在以下示例中，我们将获得最小值：

const min = students.reduce((acc, student) => {
    if (acc === null || student.score < acc) {
        return student.score
    } 
    return acc
}, null)
console.log(min) // Prints 59

this 和 max 之间的唯一区别是运算符的变化——从大于到小于。 

5.使用扁平化数组列表reduce()

该reduce()方法还有另一个方便的用途：展平嵌套数组。

例如，我们可以将数组列表展平为单个数组，如下所示：

const arrOfArrs = [
    ['aaron', 'ake', 'anna', 'aje'],
    ['becky', 'ben', 'bright'],
    ['cara', 'chris'],
    ['david', 'daniel', 'danielle', 'djenue'],
]
const flattened = arrOfArrs.reduce((acc, array) => acc.concat(array))
console.log(flattened)
// ["aaron", "ake", "anna", "aje", "becky", "ben", "bright", "cara", "chris", "david", "daniel", // "danielle", "djenue"]

在这个片段中，我们只是将每个数组连接到累加器中，将它们合并到一个数组中。

结论

JavaScriptreduce()是一种内置数组方法，用于对数组执行累积操作。

该方法具有广泛的用途，从汇总值到展平数组列表。

尽管该方法非常通用并且可以在许多情况下使用，但重要的是要考虑针对特定任务的其他专用方法：例如find()用于查找项目或map()转换数组中的每个元素。