ES6扩展运算符（...）可将具备length属性和数字键的伪数组（如NodeList、arguments）转为真数组，写法为[...pseudoArray]；兼容性不足时推荐Array.from()。
ES6 扩展运算符（...）可以轻松把伪数组（如 arguments、NodeList、HTMLCollection）转成真正的数组，核心是把它“展开”后放进一个新数组字面量中。
用扩展运算符直接构造新数组
这是最常用、最直观的方式：把伪数组放在 [...pseudoArray] 里，JS 自动将其每个元素展开并生成标准数组。
-
注意：伪数组本身必须具备
length属性和数字键（如0、1），否则会报错或结果异常 - 适用于
document.querySelectorAll('div')返回的NodeList、函数内的arguments、getElementsByClassName返回的HTMLCollection等
示例：
// 获取所有 div 元素（返回 NodeList）
const divs = document.querySelectorAll('div');
const realArray = [...divs]; // ✅ 转为真数组，可直接调用 map/filter/find 等方法
// 函数内处理 arguments
function sum() {
const args = [...arguments]; // ✅ 转为数组
return args.reduce((a, b) => a + b, 0);
}
配合 Array.from() 更稳妥（兼容性 & 特殊场景）
扩展运算符本质依赖迭代器协议，而某些旧环境或特殊伪数组（如某些 DOM 集合在较老浏览器中）可能不支持。此时 Array.from() 是更健壮的选择，它明确接受类数组对象，并可选传入映射函数。
立即学习“Java免费学习笔记（深入）”；
-
Array.from(pseudoArray)内部自动读取length和索引属性，不依赖Symbol.iterator - 支持转换同时做映射：
Array.from(nodeList, node => node.textContent)
为什么不能直接用 Array.prototype.slice.call？
ES5 常用 Array.prototype.slice.call(pseudoArray)，它确实有效，但写法冗长且依赖原型方法调用。扩展运算符和 Array.from() 是更现代、语义更清晰的替代方案，代码可读性高，也避免了对 call 的隐式绑定理解门槛。
常见误区提醒
- ❌
[...document.getElementsByTagName('div')].map(...)在 IE 中会失败（IE 不支持 NodeList 的迭代器），应改用Array.from - ❌
...{0: 'a', 1: 'b', length: 2}可以转，但...{a: 1, b: 2}不行——必须是“类数组结构”，不是任意对象 - ✅ 扩展运算符只做浅层展开，嵌套伪数组需递归或额外处理
