在这种情况下，forEach 循环到底是如何工作的？

Question

const navLink = document.querySelectorAll(".nav-link");
navLink.forEach((link) =>
  link.addEventListener("click", () => {
    ul.classList.remove("show");
  })
);

我试图理解这种情况下 forEach 背后的逻辑，我是 javascript 和一般编程的新手，能够将我想要的内容转化为编程是一个挑战语言。

我阅读了有关 forEach 语法的不同帖子，但其中确实有很多技术性内容，我无法完全理解它们的含义。

Answer 1

A forEach 有点像它说的那样。它遍历数组中的每个元素。在您的代码中，所有 navLinks 都被抓取并存储到 const navLink 中并循环。之后，将 click event 添加到它们中的每一个。

只要触发此点击事件，此点击事件中的函数就会从 ul 中删除 show class。只要单击带有 class nav-link 的元素。

Answer 2

在 Web 开发方面，MDN 既对初学者友好又全面terms/concepts。在你的情况下：Array/forEach.

为了准确回答您的问题，所提供的 forEach 函数将为运行每个元素一次 DOM 中 nav-link 的 class在执行脚本时，将为每个元素添加一个 click 事件侦听器。

事件侦听器（单击其中一个元素时绑定到运行的函数）由 arrow function 组成。该函数将尝试从先前声明的名为 ul 的 variable/constant 引用的 HTMLElement 中删除 class show，该元素在您目前显示的代码中不存在。

如果在单击 .nav-link 时 ul 未引用 HTMLElement，您将在控制台中看到一个错误，抱怨 ul 没有属性调用 classList.

如果存在 ul 并引用 HTMLElement，该函数将从该元素中删除 class show，前提是该元素具有 class。否则它什么都不做（没有任何error/warning）。

Answer 3

forEach 函数遍历 HTML 个元素或数组条目的列表。

在这种情况下，Document#querySelectorAll 可以 return 多个条目，因此您可以运行每个条目使用相同的代码。

在这种情况下，forEach 循环到底是如何工作的？

How exactly is a forEach loop working in this scenario?

javascript

logic