迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

使用 .forEach() 迭代 JavaScript 中的元素

作者:迹忆客 最近更新:2024/03/21 浏览次数:

迭代是每个编码人员的武器库中最强大的工具之一,这就是为什么大多数语言都有与不同类型的逻辑循环相关的各种方法的原因。

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"

如你所见,该函数跳过了满足我们设置的条件的数组元素。但是,迭代继续使用数组中的以下元素,这是预期的行为。

此方法在执行关联函数之前评估数组中的每个项目,因为在某些情况下你可能不希望执行该函数。通过这样做,你可以消除预先过滤数组的步骤。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

禁用 JavaScript 中的链接

发布时间:2024/03/21 浏览次数:82 分类:JavaScript

通常,锚标记的 href 可以有一个 # 来表示它是未定义的。此外,我们可以使用其他方式来设置 href 未定义,但预定义的目标链接可以通过 eventListener 手动禁用,使用 name 属性,也可以通

在 JavaScript 中从 URL 获取 JSON

发布时间:2024/03/21 浏览次数:166 分类:JavaScript

要从 URL 接收 JSON,我们可以使用 JQuery、Fetch API 和 XMLHttpRequest。每种方法都是恰当的,并且可以有效地显示结果。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便