在上节,我们学习如何使用 JavaScript Array forEach()方法对数组中的每个元素执行函数,错过的小伙伴可以点击文章《【JavaScript 教程】第六章 数组13— forEach() :遍历数组元素》进行学习。
那么,在今天的教程中,我们将一起来学习如何使用 JavaScript Array reduce() 和 reduceRight() 方法将数组归约为一个值。
JavaScript Array reduce() 方法介绍
假设我们有一个数字数组,如下所示:
let numbers = [1, 2, 3];
并且我们想要计算数组元素的总数。
通常,我们使用 for 循环遍历元素并将它们相加,如以下示例所示:
let numbers = [1, 2, 3];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log(sum);
输出:
6
该程序简单明了:
-
首先,声明了一个包含三个数字 1、2 和 3 的数组。
-
其次,声明 sum 变量并将其值设置为零。
-
第三,在 for 循环中,将 numbers 数组的元素加到 sum 变量中。循环之后,sum变量的值为6。
我们所做的是将一个数组归约为一个值。
Array.prototype 允许我们使用 reduce() 方法将数组缩减为单个值,如下所示:
let numbers = [1, 2, 3];
let sum = numbers.reduce(function (previousValue, currentValue) {
return previousValue + currentValue;
});
console.log(sum);
这很简单,不是吗?
让我们详细看一下reduce()方法。
JavaScript Array reduce() 方法详解
下面说明了 reduce() 方法的语法:
array.reduce(callbackFn [, initialValue])
reduce() 方法有两个参数:
回调函数 callbackFn。该函数通常被称为reducer。
一个可选的初始值。
reduce() 方法为数组中的每个元素调用 callbackFn() 函数。
reducer() 函数返回一个值,该值是在整个数组上执行 callbackFn 以完成的结果。
1) callbackFn() 函数参数
callbackFn 函数具有以下语法:
function callbackFn(previousValue, currentValue, currentIndex, array) { /**/}
callbackFn 函数有四个参数:
-
previousValue
上一次调用 callbackFn 函数返回的值。在第一次调用时,如果您传递了 initialValue,则 initialValue 是 previousValue。否则,其值为数组[0]。
-
currentValue
当前数组元素的值。在第一次调用时,如果您传递了 initialValue,则为 array[0],否则为 array[1]。
-
currentIndex
当前值在数组中的索引。在第一次调用时,如果您传递了 initialValue,则为 0,否则为 1。
-
array
要循环的数组。
2) 初始值参数
initialValue 参数是可选的。
如果我们指定了 initialValue,callbackFn 函数将在第一次调用时将 previousValue 初始化为 initialValue,并将 currentValue 初始化为第一个数组的元素。
如果不指定 initialValue,callbackFn 函数会将 previousValue 初始化为数组中的第一个数组元素(array[0]),并将 currentValue 初始化为第二个数组的元素(array[1])。
下表说明reduce()方法根据initialValue参数第一次执行callbackFn()函数时的逻辑:
initialValue | previousValue | currentValue |
---|---|---|
passed | initialValue | array[0] |
not passed | array[0] | array[1] |
以下示例显示了 reduce() 函数的进度,initialValue 为 100:
let numbers = [1, 2, 3];
function getOrdinalSuffix(i) {
let j = i % 10, k = i % 100;
if (j == 1 && k != 11) return i + 'st';
if (j == 2 && k != 12) return i + 'nd';
if (j == 3 && k != 13) return i + 'rd';
return i + 'th';
}
let call = 1;
let sum = numbers.reduce(function (previousValue, currentValue, currentIndex, array) {
let result = previousValue + currentValue;
// show the 1st call, 2nd call, etc.
console.log(`${getOrdinalSuffix(call)} call`);
call++;
// show the immediate values
console.table({ previousValue, currentValue, currentIndex, result });
return result;
},100);
console.log(`Result: ${sum}`);
输出:
下面说明了没有 initialValue 参数的 reduce() 方法:
更多 JavaScript 数组 reduce() 示例
假设我们有以下产品对象的 shoppingCart 数组:
let shoppingCart = [
{
product: 'phone',
qty: 1,
price: 500,
},
{
product: 'Screen Protector',
qty: 1,
price: 10,
},
{
product: 'Memory Card',
qty: 2,
price: 20,
},
];
要计算购物车中产品的总金额,可以使用 reduce() 方法,如下所示:
let total = shoppingCart.reduce(function (previousValue, currentValue) {
return previousValue + currentValue.qty * currentValue.price;
}, 0);
输出:
550
请注意,在此示例中,我们将 initialValue 参数传递给 reduce() 方法。
如果我们不这样做,reduce() 方法会将作为对象的 shoppingCart 数组的第一个元素作为初始值,并对这个对象执行计算。因此,它会导致错误的结果。
JavaScript 数组 reduceRight() 方法
reduceRight() 方法的工作方式与 reduce() 方法相同,但方向相反。
reduce() 方法从第一个元素开始并向最后一个元素移动,而 reduceRight() 方法从最后一个元素开始并向后移动第一个元素。
请参见以下示例:
let numbers = [1, 2, 3];
let sum = numbers.reduceRight(function (previousValue, currentValue) {
console.log({ previousValue, currentValue });
return previousValue + currentValue;
});
console.log(`Result:${sum}`);
输出:
{ previousValue: 3, currentValue: 2 }
{ previousValue: 5, currentValue: 1 }
Result:6
下图说明了 reduce() 和 reduceRight() 方法的区别:
总结
在本教程中,我们学习了如何使用 JavaScript 数组 reduce() 和 reduceRight() 方法将数组缩减为一个值。