使用for...in遍历NodeList出现额外迭代触发Uncaught TypeError原因求解

for...in 遍历出现额外迭代的核心原因是：

• document.querySelectorAll('.hamburger-line') 返回的是 NodeList 类数组对象，而非普通的JS数组。
• for...in 语法的设计初衷是遍历对象的所有可枚举属性，它不仅会遍历对象自身的索引属性（也就是你预期的0、1、2三个对应DOM元素的键），还会遍历原型链上继承的可枚举属性。你遇到的entries就是NodeList原型上内置的可枚举迭代方法，因此会被for...in循环识别并遍历。
• 当遍历到entries键时，hamburgerLines['entries']是一个函数而非DOM元素，不存在classList属性，调用classList.toggle自然会抛出你遇到的类型错误。

推荐的遍历方案 #

除了你已经使用的基础for循环之外，还有两种更简洁的写法：

1. 使用NodeList自带的forEach方法：

hamburgerLines.forEach(line => line.classList.toggle('open-test'))

2. 使用专门遍历可迭代对象的for...of语法：

for (const line of hamburgerLines) {
  line.classList.toggle('open-test')
}

内容的提问来源于stack exchange，提问作者pso