forEach 不是函数

Posted 2023-02-22

【中文标题】forEach 不是函数

【英文标题】：forEach is not function

【发布时间】：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 () 

        
    );
;

【问题讨论】：

你得到的错误是什么？

***.com/questions/35969974/… 看看这个。

好吧 querySelector 不返回一个集合，所以没有什么可以循环

【参考方案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 来获取节点列表