javascript - JavaScript 遍历 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 的最有效方法是什么。我可以利用列表长度等,但想知道是否有更“优雅”的方式。
解决方案
最简单的方法是for
循环:
for (let i = 0; i < foo.length; i++) {
// Do stuff
}
这是最好的解决方案,正如这里所指出的,使用数组方法或将 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 上使用数组方法,但如果您坚持使用一种数据类型会更容易。)
推荐阅读
- node.js - 在 mongoose 中查找文档并获取特定部分
- python - 将 VS Code 上的设置更改为像 Sublime Text
- r - Rmarkdown 输出中矢量化函数中的替代文本和 ggplot 输出
- fetch - 我正在尝试通过 fetch 方法从 https://www.metaweather.com/api/ 获取数据,但它没有让我
- symfony - 多文件验证:“此值应为字符串类型”
- node.js - 验证 Apple Pay 支付令牌签名
- typescript - 如何在 typeScript 中为 VueRouter 定义“模式”
- python - Django:创建具有反向关系的嵌套对象
- java - 无法在 Java 中读取 BouncyCastle 生成的私钥
- python - 使用方法或 if 语句插入实例变量(Python)