JavaScript通过NodeList进行迭代

Question

我正在寻找一种遍历NodeList的最佳方法（不包括长度）。我正在使用：

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的最有效方法是什么。我可以利用列表长度等，但是想知道是否还有一种“优雅”的方式。

Answer 1

虽然NodeList不是数组，但是可以使用forEach（）对其进行迭代

另请参阅Why doesn't nodelist have forEach?

Answer 2

最简单的方法是for循环：

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

这是最好的解决方案，正如here所指出的那样，使用数组方法或将NodeList转换为数组是不好的做法-如果需要，可以使用其他变量，但是for循环是您需要遍历NodeList的所有内容。 （感谢异端猴子向我指出了这一点。）

如果您想使用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上使用数组方法，但是如果坚持使用一种数据类型会更容易。）}