Array.reduce使用原理示例详解

什么是reduce

reduce 是 JavaScript 数组 Array 原型中的一个方法，它接收两个参数，第一个参数是函数，第二个参数是初始值。

array.reduce(function callback(accumulator, currentValue, currentIndex, array) {
  // ...
}, initialValue);

• callback 函数中的 accumulator 参数表示累计器，是一个累加器，保存着上一次调用 callback 函数时返回的值。
• currentValue 表示数组中当前正在被处理的元素。
• currentIndex 表示当前正在被处理的元素的索引，第一次调用 callback 函数时，这个参数的值是0。
• array 表示原数组。

reduce 的使用

累加数组中的所有元素

假设有以下数组：

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

我们可以使用 reduce 方法来累加数组中的所有元素：

const nums = [1, 2, 3, 4, 5];
const sum = nums.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 15

在上述示例中，使用 reduce 方法对数组的所有元素进行累加，并返回结果 sum。

数组中元素出现的次数统计

假设有以下数组：

const pets = ['dog', 'cat', 'dog', 'bird', 'cat', 'cat'];

可以使用 reduce 方法来统计数组中每个元素出现的次数：

const pets = ['dog', 'cat', 'dog', 'bird', 'cat', 'cat'];
const counts = pets.reduce((obj, item) => {
  if (!obj[item]) {
    obj[item] = 1;
  } else {
    obj[item]++;
  }
  return obj;
}, {});
console.log(counts); // { dog: 2, cat: 3, bird: 1 }

在上述示例中，使用 reduce 方法对数组元素进行遍历，并统计每个元素出现的次数，最后返回一个对象作为结果。

总结

reduce 方法可以被用于累加数组中的元素和统计数组中元素出现的次数等操作。在使用 reduce 方法时，可以结合回调函数的参数和返回值，进行各种不同的计算和处理操作。