JS数组的forEach方法|极客笔记

JS数组的forEach方法

介绍

在 JavaScript 中，数组是一种非常常见的数据结构。经常需要操作数组中的每个元素进行某种处理，例如对数组中的每个元素进行累加操作、筛选出符合条件的元素等。为了更加方便地处理数组，JavaScript 提供了数组的 forEach 方法。

forEach 方法是一个用于遍历数组的高阶函数，它接收一个回调函数作为参数，对数组中的每个元素都调用一次这个回调函数。本文将详细介绍 forEach 方法的用法和示例。

语法

forEach 方法的语法如下：

array.forEach(callback(currentValue, index, array), thisArg)

array：要遍历的数组。
callback：是一个回调函数，用来对每个元素进行操作。回调函数可以接收三个参数：
- currentValue：当前正在操作的元素。
- index（可选）：当前正在操作的元素的索引。
- array（可选）：当前被遍历的数组。
thisArg（可选）：执行回调函数时的 this 值。

注意：forEach 方法对数组中的每个元素都会执行一次回调函数，但是它没有返回值，无法修改原始数组。

示例

下面我们通过一些示例来演示 forEach 方法的使用。

累加数组中的元素

首先，我们定义一个数组 numbers，其中包含一些整数。我们使用 forEach 方法来求出数组中所有元素的和。

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

numbers.forEach(function(number) {
  sum += number;
});

console.log(sum); // 输出：15

该示例中，我们定义了一个变量 sum，并将其初始值设为 0。然后，我们使用 forEach 方法遍历数组 numbers，并将每个元素累加到 sum 中。最后，输出累加结果。

筛选出偶数

下面我们演示如何使用 forEach 方法筛选出数组中的偶数，并存储到一个新的数组 evens 中。

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

numbers.forEach(function(number) {
  if (number % 2 === 0) {
    evens.push(number);
  }
});

console.log(evens); // 输出：[2, 4]

在上述示例中，我们定义了一个空数组 evens 用于存储筛选后的偶数。通过使用 forEach 方法遍历数组 numbers，并使用条件判断筛选出偶数，然后将其添加到 evens 数组中。

数组元素求平方

我们还可以使用 forEach 方法对数组中每个元素求平方，并得到一个新的数组。

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

numbers.forEach(function(number) {
  squares.push(number * number);
});

console.log(squares); // 输出：[1, 4, 9, 16, 25]

在上述示例中，我们定义了一个空数组 squares 来存储每个元素的平方值。通过使用 forEach 方法遍历数组 numbers，并将每个元素的平方值添加到 squares 数组中。

箭头函数作为回调函数

除了使用普通的匿名函数，我们还可以使用箭头函数作为 forEach 方法的回调函数。下面是一个使用箭头函数的示例：

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

numbers.forEach((number) => console.log(number));

在此示例中，我们使用箭头函数 (number) => console.log(number) 作为 forEach 方法的回调函数。该箭头函数接收一个参数 number，并打印出该元素的值。

使用thisArg

forEach 方法还可以接收一个可选的 thisArg 参数，用于设置回调函数中的 this 值。 thisArg 参数在一些情况下非常有用。

例如，我们可以使用 thisArg 来设置回调函数中的 this 值为一个对象，从而在回调函数中访问该对象的成员变量和方法。

const person = {
  name: 'Alice',
  age: 25,
  sayHello() {
    console.log(`Hello, I'm ${this.name}.`);
  }
};

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

numbers.forEach(function(number) {
  this.sayHello();
}, person);

在上述示例中，我们定义了一个 person 对象，它有一个 sayHello 方法用于打印自我介绍。然后，我们使用 forEach 方法遍历数组 numbers，并使用 person 对象作为 thisArg 参数来设置回调函数中的 this 值。在回调函数中，我们通过 this 来调用 person 对象的 sayHello 方法。

总结

通过本文，我们详细了解了 forEach 方法的用法和示例。forEach 方法是 JavaScript 数组的一个常用方法，用于遍历数组并对每个元素进行操作。forEach 方法接收一个回调函数作为参数，这个回调函数会对数组的每个元素都执行一次。但需要注意的是，forEach 方法没有返回值，无法修改原始数组。