JavaScript 中遍历 NodeList 的最佳实践-html教程-PHP中文网

javascript 中遍历 nodelist 的最佳实践

本文将详细介绍在 JavaScript 中遍历 NodeList 对象的几种常用方法，并分析它们的优缺点，帮助你选择最适合的方案。

NodeList 是一个类数组对象，通常由 document.querySelectorAll() 等方法返回。虽然它可以像数组一样通过索引访问元素，但它并不是真正的数组，因此不能直接使用数组的全部方法。

遍历 NodeList 的方法

以下是几种常见的遍历 NodeList 的方法：

传统的 for 循环

for 循环是最基础也是最通用的遍历方式。它可以直接通过索引访问 NodeList 中的元素。
```
const els = document.querySelectorAll("div");

for (let i = 0; i <p><strong>优点：</strong></p>
```
- 性能较高，尤其是在大型 NodeList 中。
- 可以使用 break 语句提前退出循环。
- 可以使用 await 关键字进行异步操作。
缺点：

page-agent 浏览器控制（CDP）
使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载
- 代码相对冗长。
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 循环。