将伪数组转为真数组是为了使用map、filter、foreach等数组方法；常用方式有扩展运算符（es6+）、array.from（ie9+）和slice.call（ie8+），转换后可批量操作dom且性能更优。

JavaScript 中把伪数组（如 NodeList、HTMLCollection）转成真正的数组，是为了能直接使用 map、filter、forEach 等数组方法进行遍历和修改。伪数组本身没有这些方法，也不能直接用 push、splice 等操作。

用扩展运算符转成数组

这是最简洁常用的方式，适合现代浏览器（ES6+）：

const nodeList = document.querySelectorAll('div');
const arr = [...nodeList]; // 转为真数组
arr.forEach(el => el.classList.add('active')); // 可直接调用数组方法

用 Array.from() 转换

兼容性更好（支持 IE9+），还能顺便做映射处理：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const htmlColl = document.getElementsByTagName('p');
const arr = Array.from(htmlColl); // 转数组
// 或一步完成转换 + 修改
const texts = Array.from(htmlColl, el => el.textContent.trim());

用 Array.prototype.slice.call()

传统写法，兼容老版本浏览器（包括 IE8）：

const list = document.getElementsByClassName('item');
const arr = Array.prototype.slice.call(list);
arr.forEach(item => item.style.color = 'red');

修改节点内容的常见方式

转成数组后，可批量操作 DOM 元素。注意：修改的是真实 DOM，不是数组副本：

• 用 forEach 遍历并设置属性：el.textContent = 'new'
• 用 map 提取信息：arr.map(el => el.id)
• 用 filter 筛选后再操作：arr.filter(el => el.hasAttribute('data-active'))
• 避免在循环中反复查询 DOM，先转数组再统一处理，性能更优

不复杂但容易忽略：伪数组是“只读快照”，比如 querySelectorAll 返回的 NodeList 不会随 DOM 动态更新；而 getElementsByClassName 返回的 HTMLCollection 是动态的——转成数组后就固化了当时的状态。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南