reduce 方法使用指南：掌握JavaScript数组操作的利器

2023-11-08 10:52:13







什么是reduce？

reduce方法是JavaScript数组内置的一个高阶函数，它可以对数组中的元素进行累积操作，并返回一个结果。reduce方法的语法如下：

```javascript
array.reduce(callbackFunction, initialValue)

callbackFunction：一个函数，用于对数组中的每个元素进行操作。
initialValue：一个可选的初始值，如果省略，则从数组的第一个元素开始累积。

reduce方法的工作原理是：

将数组的第一个元素和initialValue作为参数，调用callbackFunction。
将callbackFunction的返回值作为新的累积值。
重复步骤1和步骤2，直到数组中的所有元素都被处理完。
返回累积值。

reduce方法的用法

reduce方法可以用于各种数据操作任务，以下是一些常见的用法：

数组求和：

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

数组去重：

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = numbers.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueNumbers); // 输出：[1, 2, 3, 4, 5]

计算每个元素出现的次数：

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const counts = numbers.reduce((accumulator, currentValue) => {
  if (accumulator[currentValue]) {
    accumulator[currentValue]++;
  } else {
    accumulator[currentValue] = 1;
  }
  return accumulator;
}, {});
console.log(counts); // 输出：{1: 2, 2: 2, 3: 2, 4: 1, 5: 1}

过滤数据：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.reduce((accumulator, currentValue) => {
  if (currentValue % 2 === 0) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(evenNumbers); // 输出：[2, 4, 6, 8, 10]