forEach - Javascript

在Javascript中，forEach()是Array对象中内置的一个方法。它允许我们遍历一个数组，并对每个元素执行一个指定的回调函数。

语法

array.forEach(function(currentValue, index, arr), thisValue)

• currentValue：数组中正在被处理的元素。
• index：数组中正在被处理的元素的索引值。
• arr：当前正在处理的数组。
• thisValue：可选，传递给函数的值用作“this”的值。

示例

var fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit) {
  console.log(fruit);
});

这个例子首先创建了一个包含三个水果的数组。然后使用forEach()方法遍历数组，并输出每个元素的值到控制台。

输出：

apple
banana
cherry

使用箭头函数

我们可以使用箭头函数来简化上面的代码。

var fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(fruit => console.log(fruit));

输出：

apple
banana
cherry

使用thisValue

您可以使用可选的thisValue参数来设置回调函数中的this关键字的值。

var person = { name: 'John' };

var fruits = ['apple', 'banana', 'cherry'];

function logFruitAndPerson(fruit) {
  console.log(this.name + ' likes ' + fruit);
}

fruits.forEach(logFruitAndPerson, person);

在这个例子中，我们创建了一个名为person的对象，并设置了一个name属性。我们还定义了一个logFruitAndPerson()函数，它使用this关键字引用传递给forEach()的person对象。

最后，我们使用forEach()方法和可选的thisValue参数来遍历fruits数组，并打印每个元素和person对象的name属性。

输出：

John likes apple
John likes banana
John likes cherry

使用forEach()替代for循环

使用forEach()方法可以简化for循环代码的编写。

例如，下面的代码使用了常规的for循环来遍历一个数组，并为数组中每个元素的backgroundColor属性设置一个值：

var colors = ['red', 'green', 'blue'];

for (var i = 0; i < colors.length; i++) {
  document.getElementById('color-box-' + i).style.backgroundColor = colors[i];
}

使用forEach()方法，我们可以更清晰地编写相同的代码：

var colors = ['red', 'green', 'blue'];

colors.forEach(function(color, i) {
  document.getElementById('color-box-' + i).style.backgroundColor = color;
});

总结

forEach()方法是Javascript中Array对象的基本方法之一。它允许我们遍历一个数组，并对每个元素执行一个指定的回调函数。此外，我们还学习了如何使用箭头函数来简化forEach()代码，以及如何使用thisValue参数来设置回调函数中的this关键字的值。最后，我们展示了如何使用forEach()方法来替代for循环。