JavaScript如何遍历NodeList

Question

我正在寻找一种最佳方法来遍历NodeList，除了length属性。我目前正在使用：

var foo =  document.querySelectorAll('[id^=foo_id]')
console.log(foo)

返回的NodeList包含所有必需的元素以及长度的最后一个条目:

  0: input#foo_id_...
  1: input#foo_id_...
  ..................
  n: input#foo_id_...
  length: n+1

我想知道遍历那个NodeList最有效的方法。我可以利用列表长度等，但希望知道是否有更加“优雅”的方法。

- goryef

---

你问题中的第一行代码是无效的。 - Jack Bashford

你尝试过什么？你发现了哪些低效率的问题？ - Heretic Monkey

也是 Looping through a nodelist JS 的副本。 - Heretic Monkey

Answer 1

最简单的方法是使用一个{{for}}循环：

for (let i = 0; i < foo.length; i++) {
  // Do stuff
}

这是最佳解决方案，正如此处所指出的那样，使用数组方法或将NodeList转换为数组是不好的做法 - 如果需要，可以使用不同的变量，但是只需使用for循环即可遍历NodeList。（感谢Heretic Monkey向我指出这一点）。

如果要使用像forEach、map等数组方法，最好先将其转换为数组 - 这非常简单，只需使用扩展运算符即可：

[...foo].forEach(e /* Do stuff */);

如果你想专门使用map，请使用Array.from，因为第二个参数是应用于map的回调函数。

Array.from(foo, e => /* .map callback */);

在旧环境中:

Array.prototype.slice.call(foo).forEach(e => /* Do stuff */);

_{我知道你可以在NodeList上使用数组方法，但如果你坚持使用一种数据类型会更容易。}

- Jack Bashford

---

@hereticMonkey 但是汉堡比披萨更好（这只是一个不合理的加粗声明，不确定重点在哪里）。此外，那个答案已经过时了，就像这个答案一样。有NodeList.forEach，使用它。 - Jonas Wilms

Answer 2

尽管NodeList不是数组，但可以使用forEach()进行迭代。

另请参见为什么NodeList没有forEach方法？

- neuhaus

---

@neuhas vanilla.js已经内置了forEach用于NodeList。https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList - RAVI singh