本文将详细介绍在 JavaScript 中遍历 NodeList 对象的几种常用方法，并分析它们的优缺点，帮助你选择最适合的方案。
NodeList 是一个类数组对象，通常由 document.querySelectorAll() 等方法返回。虽然它可以像数组一样通过索引访问元素，但它并不是真正的数组，因此不能直接使用数组的全部方法。
遍历 NodeList 的方法
以下是几种常见的遍历 NodeList 的方法：
-
传统的 for 循环
立即学习“Java免费学习笔记（深入）”；
for 循环是最基础也是最通用的遍历方式。它可以直接通过索引访问 NodeList 中的元素。
const els = document.querySelectorAll("div"); for (let i = 0; i < els.length; i++) { const el = els[i]; // 对 el 进行操作 console.log(el); }优点：
- 性能较高，尤其是在大型 NodeList 中。
- 可以使用 break 语句提前退出循环。
- 可以使用 await 关键字进行异步操作。
缺点：
- 代码相对冗长。
-
Array.from() 结合 forEach() 方法
Array.from() 可以将 NodeList 转换为真正的数组，然后可以使用数组的 forEach() 方法进行遍历。
const els = document.querySelectorAll("div"); Array.from(els).forEach((el) => { // 对 el 进行操作 console.log(el); });优点：
- 代码简洁，易于阅读。
缺点：
- 性能相对较低，因为需要先将 NodeList 转换为数组。
- 无法使用 break 语句提前退出循环。
- 不能直接使用 await 关键字进行异步操作，否则可能导致不正确的结果。
-
Array.from() 结合 map() 方法
map() 方法与 forEach() 类似，但它会返回一个新的数组，其中包含对原始数组的每个元素进行转换后的结果。
const els = document.querySelectorAll("div"); const transformedEls = Array.from(els).map((el) => { // 对 el 进行转换 return el.textContent; }); console.log(transformedEls); // 输出包含所有 div 文本内容的数组优点：
- 代码简洁，易于阅读。
- 可以方便地对 NodeList 中的元素进行转换。
缺点：
- 性能相对较低，因为需要先将 NodeList 转换为数组，并且会创建一个新的数组。
- 无法使用 break 语句提前退出循环。
- 不能直接使用 await 关键字进行异步操作，否则可能导致不正确的结果。
- 如果仅仅是为了遍历，而不需转换数据，则使用 map() 略显浪费。
-
for...of 循环
for...of 循环是一种现代的遍历方式，可以直接遍历可迭代对象，包括 NodeList。
const els = document.querySelectorAll("div"); for (const el of els) { // 对 el 进行操作 console.log(el); }优点：
- 代码简洁，易于阅读。
- 可以使用 break 语句提前退出循环。
- 可以使用 await 关键字进行异步操作。
缺点：
- 在一些旧版本的浏览器中可能不支持。
如何选择
选择哪种遍历方式取决于你的具体需求：
- 性能至上： 如果你需要遍历大型 NodeList 并且对性能有较高要求，建议使用传统的 for 循环。
- 代码简洁： 如果你更注重代码的可读性，可以使用 Array.from() 结合 forEach() 或 map() 方法，或者使用 for...of 循环。
- 需要转换数据： 如果你需要对 NodeList 中的元素进行转换，建议使用 Array.from() 结合 map() 方法。
- 需要提前退出循环或进行异步操作： 建议使用传统的 for 循环或 for...of 循环。
总结
在 JavaScript 中遍历 NodeList 有多种方法，每种方法都有其优缺点。选择最适合你的方案，可以帮助你编写更高效、更易维护的代码。 建议在实际开发中根据具体情况选择最合适的遍历方式。
