如何使用JavaScript数组reduce缩减功能

119 阅读3分钟

Javascript提供了许多内置的数组函数,可以快速、有效地完成任务。Javascript的 reduce()函数是其中一个常用的函数,用于遍历数组中的元素并获得所需的结果。

在这篇文章中,我们将掌握javascript的概念 reduce()函数的概念。什么是 reduce()函数,以及我们如何利用它来帮助简化Javascript代码,并有效和最快速地完成任务。

什么是reduce_()_函数?

Javascript的 reduce()函数是用来把数组还原成一个单一的输出值。

reduce()函数将数组中的元素逐一取出,进行运算,并返回一个单一的输出值。让我们来探索和挖掘它,了解它的语法和功能,同时举几个例子。

语法

array.reduce(function_name, initialValue);

数组的reduce()函数的有趣之处在于,它可以接受一个有四个参数的回调函数。回调函数的语法和参数的顺序将是这样的。

function function_name(accumulator, value, index, array) {

...

}

在回调函数的 reduce()方法中。

  • 第一个参数是一个累加器,用于存储每次迭代后的结果。
  • 第二个参数/参数包含迭代过程中当前数组元素的
  • 第三个参数是可选参数,是迭代过程中数组元素的当前索引
  • 最后,我们也可以将数组本身传递给回调函数,以便在回调函数中拥有一些自定义功能。

我们还可以将初始值传递给函数。初始值将是累积器的起始值。

让我们试举几个例子来看看它的实现方法

注意:我们将使用浏览器控制台来演示本篇文章中执行的例子。要打开浏览器的控制台。

  • 在Chrome和其他基于chromium的浏览器中使用F12键。
  • 在Mozilla中使用CTRL + SHIFT + K键盘快捷键。
  • 在Safari浏览器中使用Option + ⌘ + C键盘快捷键(如果没有出现开发者菜单,则按⌘ + 打开偏好**,** 并在 高级选项卡中勾选 "在菜单栏中显示开发菜单")。

如何在JavaScript中使用reduce()函数

理解该函数的最好例子是 reduce()函数的最好例子是存储在数组元素中的数字相加。

例1:

假设我们有一个数字数组,我们想把这些数字全部加起来。

var numbers = [23,76,38,55,10]

将这些数字相加的第一个方法是使用for 循环。

var sum = 0;

for (leti = 0; i<numbers.length; i++) {
  sum = sum + numbers[i];
}

console.log(sum);

虽然我们已经得到了Sum作为输出,但为什么不使用一个聪明而简单的方法来执行同样的计算,使用 reduce()方法进行同样的计算,在这里我们不需要像 "sum"那样对变量进行变异。

使用reduce()函数。

计算总和的 _reduce()_ 计算总和的函数是这样的。

var sum = numbers.reduce(addNumbers, 0);

function addNumbers(total, num) {

return total + num

}

console.log(sum);

在上面的代码中,你可以看到,我们首先将addNumbers函数传递给了 减少()函数,在addNumbers函数定义中,我们只是将每个数字加到累加器变量total中,并返回其值。

一旦 reduce()函数将数字数组中的所有数字相加后,它将把最终结果存储在sum变量中。

最后,我们只是安慰了一下sum变量,以验证我们的 reduce()函数是否正常工作。

通过查看上面提供的截图,你可以验证reduce()函数已经将所有的数字相加,并在控制台中显示了结果,这是202,而且是完美的计算。

另一种更简短、更容易的写法 reduce()函数的另一种更简短、更容易的方法是将回调函数变成一个箭头函数。

将回调函数写在 reduce()函数的括号内写回调函数的语法将是这样的。

var sum = numbers.reduce((total, num) => {

return total + num

}, 0);

console.log(sum);

好了,这只是一个简单的例子,我们只有一个数字数组;那么对象数组呢。我们也来试试这个例子。

例2:

假设我们有一个数组中的学生列表,我们想计算所有学生的总费用。

var students = [
    {
        id: 1,
        name: "John,"
        age: 12,
        fee: 8500
    },
    {
        id: 2,
        name: "Bob",
        age: 14,
        fee: 9000
    },
    {
        id: 3,
        name: "Steve",
        age: 10,
        fee: 8000
    },
]

计算总费用的 _reduce()_计算总费用的函数将这样写。

var totalFees = students.reduce((total, student) => {

return total + student.fee

}, 0);

console.log(totalFees);

现在,这段代码中唯一的区别是,一个单一的对象被作为值传递给回调函数,在回调函数的定义里面,我们已经访问了费用并将其添加到累加器变量中。

通过观察上面的截图,你可以看到学生的费用被添加并作为输出显示。因此,这就是我们如何在函数中访问数组的对象。reduce()函数中访问数组的对象。

结论

在这篇文章中,我们已经了解了什么是 reduce() 函数是什么,以及我们如何使用它来帮助简化Javascript代码并有效和快速地完成任务。

我们已经知道 reduce()函数将数组还原成一个单一的输出值。该 _reduce()_函数将一个回调函数应用于数组的每个元素,并返回一个单一的输出值。

这篇文章主要介绍JavaScript的 _减少()_函数和它的用法。它包含一些基本的例子,有助于理解 reduce()函数。