forEach 不是函数答案

【问题标题】：forEach is not functionforEach 不是函数
【发布时间】：2020-08-07 02:55:37
【问题描述】：

有人可以向我解释如何使用 forEach 而不出现错误消息吗？我从 1 个月开始就开始编程，所以也许这是一个简单的错误。

------------------------------------------------------------------------------

let galleryImages1 = document.querySelector(".gallery-img");
let getLatestOpenedImg;
let windowWidth1 = window.innerWidth;



if (galleryImages1) {
    galleryImages1.forEach(function (image) {
        image.onclick = function () {

        }
    });
};

【问题讨论】：

你得到的错误是什么？
stackoverflow.com/questions/35969974/… 看看这个。
好吧 querySelector 不返回一个集合，所以没有什么可以循环

标签： javascript foreach

【解决方案1】：

选择器querySelector 只返回第一个元素。如果要返回与查询匹配的所有元素，请使用：

let galleryImages1 = document.querySelectorAll(".gallery-img");

【讨论】：

你不能在节点列表上使用 foreach
检查这个小提琴：jsfiddle.net/votolentino/9orhcq4p/1
它不会在每个 javascript 引擎中，有最新浏览器的 polyfils 在调用 foreach 时使用 for 循环
它在打字稿中也无效
[...document.querySelectorAll(".gallery-img")] 会生成一个数组，foreach 可以使用。

【解决方案2】：

简单的改变

document.querySelector(".gallery-img");

到

document.querySelectorAll(".gallery-img");

document.querySelector 返回单个元素，您不能在单个元素上使用 forEach。

【讨论】：

【解决方案3】：

试试这个：

let galleryImages1 = document.getElementsByClassName("gallery-img");

if (galleryImages1) {
  galleryImages1.forEach(image => {
    image.onclick = () => {
      […]
    }
  });
}

当然，我会使用eventListener 来处理onclick 事件，但我试图按照你的方式行事。

【讨论】：

【解决方案4】：

两个问题

1 - document.querySelectorAll 的返回类型是 NodeList 而不是 Array，这意味着它没有实现 forEach 方法。因此，您需要使用 for 循环。节点列表不是数组，不能使用 forEach

现代浏览器使用 polyfill 在底层使用 for 循环但它并非不适用于所有 javascript 引擎

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill

如果你尝试使用 foreach，Typescript 也会抛出错误，并且会强制你使用 for 循环

2 - 并使用 document.querySelectorAll 而不是 document.querySelector 来获取节点列表

【讨论】：