巧用reduce和forEach，搞定你的复杂数据处理！

2023-09-21 14:58:07

前言

在JavaScript中，数组是一种非常重要的数据结构，它可以存储一组有序的数据。在处理数组时，我们经常需要对数组中的元素进行遍历、筛选、排序、求和等操作。而reduce和forEach就是专门为处理数组而生的两个高阶函数，它们可以帮助我们轻松完成这些任务。

一、reduce

reduce方法可以将数组中的所有元素逐个累积，并返回最终累积的结果。它的语法如下：

array.reduce(callback, initialValue);

其中，callback是累积函数，它接收两个参数：

accumulator：累积器，用于存储累积的结果。
currentValue：当前数组元素。

initialValue是可选参数，指定累积的初始值。如果未提供initialValue，则从数组的第一个元素开始累积。

reduce用法示例

// 求数组中所有元素的和
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 输出：15

// 计算数组中所有元素的平均值
const average = numbers.reduce((accumulator, currentValue, currentIndex, array) => {
  accumulator += currentValue;
  if (currentIndex === array.length - 1) {
    return accumulator / array.length;
  }
  return accumulator;
}, 0);
console.log(average); // 输出：3

// 将数组中的所有元素连接成一个字符串
const words = ['Hello', 'World', '!'];
const sentence = words.reduce((accumulator, currentValue) => accumulator + ' ' + currentValue);
console.log(sentence); // 输出：Hello World !

二、forEach

forEach方法可以对数组中的每个元素执行一次回调函数。它的语法如下：

array.forEach(callback);

其中，callback是回调函数，它接收一个参数：

currentValue：当前数组元素。

forEach方法没有返回值。

forEach用法示例

// 遍历数组中的所有元素，并打印每个元素
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((currentValue) => {
  console.log(currentValue);
});

// 将数组中的所有元素乘以2
const doubledNumbers = numbers.map((currentValue) => currentValue * 2);
console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]

// 过滤数组中的所有偶数元素
const evenNumbers = numbers.filter((currentValue) => currentValue % 2 === 0);
console.log(evenNumbers); // 输出：[2, 4]