ECMAScript 2021 中的 Array.prototype.forEach() 方法详解及应用

在前端开发中，经常需要对数组进行遍历操作。ECMAScript 2021 中的 Array.prototype.forEach() 方法就是一种非常常用的遍历数组的方法。本文将详细介绍这个方法的使用及其应用。

forEach() 方法简介

Array.prototype.forEach() 方法是 JavaScript 中的一种迭代方法，用于遍历数组中的每个元素。该方法接受一个回调函数作为参数，该函数将被依次执行数组中的每个元素。回调函数接受三个参数：当前元素的值，当前元素的索引，以及整个数组本身。

forEach() 方法的语法

forEach() 方法的语法如下：

array.forEach(function(currentValue, index, array) {
  // code to be executed
});

其中，参数解释如下：

• currentValue：当前元素的值。
• index：当前元素的索引。
• array：整个数组本身。

forEach() 方法的使用示例

下面是一个简单的示例，演示如何使用 forEach() 方法遍历数组并输出每个元素的值：

const fruits = ["apple", "banana", "orange"];
fruits.forEach(function(fruit) {
  console.log(fruit);
});

执行以上代码，将输出以下结果：

apple
banana
orange

forEach() 方法的应用

1. 数组元素求和

下面是一个使用 forEach() 方法计算数组元素和的示例：

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(function(number) {
  sum += number;
});
console.log(sum); // 15

2. 数组元素平方

下面是一个使用 forEach() 方法将数组元素平方的示例：

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = [];
numbers.forEach(function(number) {
  squaredNumbers.push(number * number);
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

3. 数组元素过滤

下面是一个使用 forEach() 方法过滤数组元素的示例：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = [];
numbers.forEach(function(number) {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
});
console.log(evenNumbers); // [2, 4]

4. 对象属性遍历

下面是一个使用 forEach() 方法遍历对象属性的示例：

const person = {
  name: "John",
  age: 30,
  occupation: "Software Engineer"
};
Object.keys(person).forEach(function(key) {
  console.log(key + ": " + person[key]);
});

执行以上代码，将输出以下结果：

name: John
age: 30
occupation: Software Engineer

总结

本文介绍了 ECMAScript 2021 中的 Array.prototype.forEach() 方法的使用及其应用。通过本文的学习，我们可以更加深入地了解这个方法的使用方式，并且可以在实际开发中灵活运用该方法，提高代码的效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dedd781886fbafa4c227c0