JavaScript 遍历 NodeList
JavaScript iterate through NodeList
我正在寻找一种遍历不包括长度的 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 的最有效方法是什么。我可以利用列表长度等,但想知道是否有更多 "elegant" 方式。
尽管 NodeList 不是数组,但可以使用 forEach() 对其进行迭代
另见 Why doesn't nodelist have forEach?
最简单的方法是 for
循环:
for (let i = 0; i < foo.length; i++) {
// Do stuff
}
正如指出的那样,这是最好的解决方案 here 使用数组方法或将 NodeList 转换为数组是不好的做法 - 如果需要,请使用不同的变量,但是 for
loop 是你需要遍历一个 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 上使用数组方法,但如果你坚持使用一种数据类型会更容易。)
我正在寻找一种遍历不包括长度的 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 的最有效方法是什么。我可以利用列表长度等,但想知道是否有更多 "elegant" 方式。
尽管 NodeList 不是数组,但可以使用 forEach() 对其进行迭代
另见 Why doesn't nodelist have forEach?
最简单的方法是 for
循环:
for (let i = 0; i < foo.length; i++) {
// Do stuff
}
正如指出的那样,这是最好的解决方案 here 使用数组方法或将 NodeList 转换为数组是不好的做法 - 如果需要,请使用不同的变量,但是 for
loop 是你需要遍历一个 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 上使用数组方法,但如果你坚持使用一种数据类型会更容易。)