使用 .forEach() 迭代 JavaScript 中的元素
Alex Dulcianu
2023年10月12日
迭代是每个编码人员的武器库中最强大的工具之一,这就是为什么大多数语言都有与不同类型的逻辑循环相关的各种方法的原因。
JavaScript 有多种这样的方法,具体取决于你要实现的目标。在这种情况下,.forEach()
方法比简单的 for
循环更有效,主要是因为它允许你为迭代的每个元素执行特定的函数。
当然,如果你将所需的函数调用嵌套在循环中的某个地方,你也可以使用常规循环来实现相同的目的,但是 .forEach()
大大简化了代码。此外,它也可能在以后更容易维护,并且也提高了可读性。
对于初学者,这里是 .forEach()
如何在你的代码中使用:
在 JavaScript 中使用 .forEach()
为数组中的每个元素执行一个函数
演示 .forEach()
有用性的最简单方法是在遍历元素数组时查看它的实际效果。
const myArray = ['element1', 'element2', 'element3'];
myArray.forEach(element => console.log(element));
输出:
"element1"
"element2"
"element3"
上面的示例使用箭头符号,但这不是唯一的选择。使用内联回调函数可以实现相同的结果,如下所示:
const myArray = ['element1', 'element2', 'element3'];
myArray.forEach(function(element) {
console.log(element);
})
输出:
"element1"
"element2"
"element3"
这种方法有点冗长,这意味着它需要更多的锅炉电镀。话虽如此,如果你与团队合作并希望使你的代码尽可能简单,那么冗长有时是一件好事。
如果 JavaScript 中不满足某些条件,则对每个元素执行检查以中断执行
你们中的一些人可能已经注意到,在使用 .forEach()
时,总是为数组中的每个元素执行关联的函数。这并不总是可取的,特别是如果所讨论的函数需要大量处理能力并且执行时间很长。
对于这些情况,最好满足一些条件才能执行函数。要实现这一点,你所要做的就是引入一个 if
语句,并在条件评估为 false 时返回一些内容。
以下是实际效果:
const myArray = ['element1', 'element2', 'element3'];
myArray.forEach(function(element) {
if (element === 'element2') {
return;
} else {
console.log(element);
}
});
输出:
"element1"
"element3"
如你所见,该函数跳过了满足我们设置的条件的数组元素。但是,迭代继续使用数组中的以下元素,这是预期的行为。
此方法在执行关联函数之前评估数组中的每个项目,因为在某些情况下你可能不希望执行该函数。通过这样做,你可以消除预先过滤数组的步骤。