JavaScript for-in循环遍历NodeList时输出多余值的问题

使用HTML/CSS/JavaScript开发网页项目时，通过以下代码选取验证码模块下的图片元素，预期遍历输出0-8共9个元素索引，但控制台出现了额外的输出值：

const myPictures = document.querySelectorAll("div#captcha table img")
console.log(myPictures)
for(let i in myPictures)
    console.log(i)

document.querySelectorAll() 返回值是 NodeList 类数组对象，并非纯数组。for...in 循环的遍历逻辑是枚举对象上所有可枚举的自有、继承属性，不会只筛选数字索引：
你看到的多余输出，是NodeList原型上自带的属性和方法，包括length、entries、forEach、item、keys、values等，这些都会被for...in识别为可遍历的键，因此出现了预期外的输出。这和你元素选择的逻辑没有关系，纯粹是遍历方法选择错误。
核心误区：for...in 是为普通对象键遍历设计的语法，不适合用来遍历数组、类数组的有序元素集合。

根据项目的浏览器兼容需求，选择以下任意一种写法即可，都只会遍历到索引0-8对应的图片元素，不会出现多余属性：

• 方案1：for...of 循环（现代浏览器原生支持，写法最简洁，直接拿到元素本身）

const myPictures = document.querySelectorAll("div#captcha table img")
for (const img of myPictures) {
    console.log(img)
}

• 方案2：NodeList 自带的 forEach 方法（兼容IE11及以上版本，支持同时拿到索引和元素）

const myPictures = document.querySelectorAll("div#captcha table img")
myPictures.forEach((img, index) => {
    console.log(index, img)
})

• 方案3：转为纯数组后遍历（如果需要调用map、filter等数组方法，可先转成真正的数组）

const myPictures = Array.from(document.querySelectorAll("div#captcha table img"))
// 转成数组后可使用任意数组遍历方法
for (let i = 0; i < myPictures.length; i++) {
    console.log(i, myPictures[i])
}

• 方案4：传统索引for循环（兼容性最好，覆盖所有运行环境）

const myPictures = document.querySelectorAll("div#captcha table img")
for (let i = 0; i < myPictures.length; i++) {
    console.log(i, myPictures[i])
}

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