深入探索数组操作：forEach、map、filter、reduce、reduceRight、every、some 的奇妙用法

2023-09-13 05:18:30

前言

数组是 JavaScript 中最常用的数据结构之一，它可以存储任意类型的数据元素，并且可以对这些元素进行各种各样的操作。为了方便我们处理数组，JavaScript 提供了丰富的内置方法，其中有七个方法非常重要，它们分别是：forEach、map、filter、reduce、reduceRight、every 和 some。

这七个方法都属于函数式编程范畴，它们接收一个回调函数作为参数，并对数组中的每个元素执行该回调函数。回调函数可以对数组元素进行各种操作，例如筛选、转换、聚合等。

forEach

forEach 方法用于遍历数组中的每个元素，并对每个元素执行指定的回调函数。回调函数的参数是数组元素本身，以及该元素在数组中的索引和数组本身。forEach 方法不会改变原数组，也不会返回任何值。

优点：

简单易用，易于理解和实现。
可以方便地遍历数组中的每个元素。
可以在回调函数中对每个元素进行各种操作。

缺点：

无法对数组元素进行筛选或聚合操作。
无法返回新的数组。

示例：

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

// 遍历数组中的每个元素，并输出每个元素
numbers.forEach((number) => {
  console.log(number);
});

// 遍历数组中的每个元素，并对每个元素乘以 2
numbers.forEach((number, index) => {
  numbers[index] = number * 2;
});

console.log(numbers); // [2, 4, 6, 8, 10]

map

map 方法用于遍历数组中的每个元素，并对每个元素执行指定的回调函数。回调函数的参数是数组元素本身，以及该元素在数组中的索引和数组本身。map 方法会返回一个新数组，新数组的元素是原数组每个元素经过回调函数处理后的结果。

优点：

可以对数组元素进行转换操作。
可以返回一个新数组，而不会改变原数组。
可以方便地对数组元素进行各种操作，例如筛选、聚合等。

缺点：

无法对数组元素进行筛选或聚合操作。

示例：

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

// 将数组中的每个元素乘以 2，并返回一个新数组
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

// 将数组中的每个元素转换为字符串，并返回一个新数组
const stringNumbers = numbers.map((number) => {
  return number.toString();
});

console.log(stringNumbers); // ["1", "2", "3", "4", "5"]

filter

filter 方法用于遍历数组中的每个元素，并对每个元素执行指定的回调函数。回调函数的参数是数组元素本身，以及该元素在数组中的索引和数组本身。filter 方法会返回一个新数组，新数组的元素是原数组中满足回调函数条件的元素。

优点：

可以对数组元素进行筛选操作。
可以返回一个新数组，而不会改变原数组。
可以方便地对数组元素进行各种操作，例如转换、聚合等。

缺点：

无法对数组元素进行转换或聚合操作。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 筛选出数组中大于 5 的元素，并返回一个新数组
const filteredNumbers = numbers.filter((number) => {
  return number > 5;
});

console.log(filteredNumbers); // [6, 7, 8, 9, 10]

// 筛选出数组中偶数元素，并返回一个新数组
const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6, 8, 10]

reduce

reduce 方法用于将数组中的所有元素聚合为一个单一的值。回调函数的参数是累加器（accumulator）、数组元素本身，以及该元素在数组中的索引和数组本身。累加器是 reduce 方法每次迭代的结果，它可以是任意类型的数据。reduce 方法会将数组中的所有元素依次传递给回调函数，并返回累加器的最终值。

优点：

可以将数组中的所有元素聚合为一个单一的值。
可以对数组元素进行各种操作，例如求和、求平均值、求最大值、求最小值等。
可以方便地对数组元素进行各种操作，例如筛选、转换等。

缺点：

无法对数组元素进行转换或筛选操作。
必须指定一个初始累加器值。

示例：

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

// 求数组中所有元素的和
const sum = numbers.reduce((accumulator, number) => {
  return accumulator + number;
}, 0);

console.log(sum); // 15

// 求数组中所有元素的平均值
const average = numbers.reduce((accumulator, number, index, array) => {
  return (accumulator * (index + 1) + number) / array.length;
}, 0);

console.log(average); // 3

// 求数组中所有元素的最大值
const max = numbers.reduce((accumulator, number) => {
  return Math.max(accumulator, number);
}, Number.MIN_VALUE);

console.log(max); // 5

// 求数组中所有元素的最小值
const min = numbers.reduce((accumulator, number) => {
  return Math.min(accumulator, number);
}, Number.MAX_VALUE);

console.log(min); // 1

reduceRight

reduceRight 方法与 reduce 方法类似，但它从数组的最后一个元素开始聚合，并依次向数组的第一个元素移动。reduceRight 方法的回调函数的参数与 reduce 方法相同，但累加器的初始值是数组的最后一个元素。

优点：

可以将数组中的所有元素聚合为一个单一的值。
可以对数组元素进行各种操作，例如求和、求平均值、求最大值、求最小值等。
可以方便地对数组元素进行各种操作，例如筛选、转换等。

缺点：

无法对数组元素进行转换或筛选操作。
必须指定一个初始累加器值。

示例：

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

// 求数组中所有元素的和
const sum = numbers.reduceRight((accumulator, number) => {
  return accumulator + number;
}, 0);

console.log(sum); // 15

// 求数组中所有元素的平均值
const average = numbers.reduceRight((accumulator, number, index, array) => {
  return (accumulator * (index + 1) + number) / array.length;
}, 0);

console.log(average); // 3

// 求数组中所有元素的最大值
const max = numbers.reduceRight((accumulator, number) => {
  return Math.max(accumulator, number);
}, Number.MIN_VALUE);

console.log(max); // 5

// 求数组中所有元素的最小值
const min = numbers.reduceRight((accumulator, number) => {
  return Math.min(accumulator, number);
}, Number.MAX_VALUE);

console.log(min); // 1