JavaScript数组对象高阶函数reduce的妙用详解

什么是reduce方法

reduce是数组对象的高阶函数之一。它能够迭代数组中的所有元素，并将它们汇聚成一个单一的值。

reduce方法的语法如下：

array.reduce(callback[, initialValue])

其中，callback是一个回调函数，在数组中每个元素上被调用，并且输入值包括前一次回调的返回值和当前元素值。initialValue是可选的，表示在第一次调用回调函数时使用的初始值。

回调函数的语法如下：

function callback(accumulator, currentValue, currentIndex, array){
 // 操作后返回一个新值
}

其中，accumulator表示上一次回调的返回值或初始值（如果有），currentValue表示当前元素的值，currentIndex表示当前元素在数组中的索引位置，array表示原始数组。

reduce方法的妙用

示例一：计算数组元素的总和

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

这个例子中，reduce方法对数组arr中的所有元素进行迭代，累加每个元素的值，然后返回它们的总和。初始值为0。因此，计算出的总和是15。

示例二：统计数组中每个元素出现的次数

const arr = ['apple', 'banana', 'pear', 'apple', 'banana', 'banana'];

const count = arr.reduce((tally, fruit) => {
  tally[fruit] ? tally[fruit]++ : (tally[fruit] = 1);
  return tally;
}, {});

console.log(count); // { apple: 2, banana: 3, pear: 1 }

这个例子中，reduce方法对数组arr中的所有元素进行迭代，使用tally对象来统计每个水果出现的次数。如果水果已经存在于tally对象中，则增加计数器。如果水果是第一次出现，则将计数器初始化为1。

最后，返回一个包含所有水果计数的对象。在这个例子中，count对象的结果是{ apple: 2, banana: 3, pear: 1 }。

结语

reduce是JavaScript中强大的高阶函数之一，可以在用途广泛的应用程序中帮助我们简化代码并提高效率。了解这个函数的用法和妙用，可以帮助你更好地运用它的能力来完成你的任务。