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()函数。