JavaScript 遍历 NodeList

Question

这个问题在这里已经有了答案:





Why doesn't nodelist have forEach?

(10 个回答)



Looping through a nodelist JS

(1 个回答)


3年前关闭。




我正在寻找一种迭代 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

最简单的方法是 for环形:

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

正如 here 所指出的，这是最好的解决方案使用数组方法或将 NodeList 转换为数组是不好的做法 - 如果需要，请使用不同的变量，但是 for loop 是您在 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 上使用数组方法，但如果您坚持使用一种数据类型会更容易。)