使用 .forEach() 迭代 JavaScript 中的元素
迭代是每个编码人员的武器库中最强大的工具之一,这就是为什么大多数语言都有与不同类型的逻辑循环相关的各种方法的原因。
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"
如你所见,该函数跳过了满足我们设置的条件的数组元素。但是,迭代继续使用数组中的以下元素,这是预期的行为。
此方法在执行关联函数之前评估数组中的每个项目,因为在某些情况下你可能不希望执行该函数。通过这样做,你可以消除预先过滤数组的步骤。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。