JavaScript中类数组对象需转换为真数组才能使用map等方法，推荐Array.from()、扩展运算符和slice.call()，典型类数组包括arguments、NodeList、HTMLCollection和字符串。
JavaScript 中的类数组（Array-like objects）是指具有 length 属性和若干索引属性，但不具有数组原型方法（如 map、filter、forEach）的对象。常见如 arguments、NodeList、HTMLCollection 等。转换的核心目标是：**让它们能正常使用数组方法**。
常用转换方法
有几种简洁可靠的方式，按推荐度排序：
-
Array.from()—— 最推荐。支持类数组和可迭代对象，还能传入映射函数：const arr = Array.from(nodeList, node => node.textContent); -
[...iterable]（扩展运算符） —— 简洁现代，但要求对象是可迭代的（NodeList可以，HTMLCollection在较新浏览器中也可，但arguments在严格模式下也支持）：const arr = [...document.querySelectorAll('div')]; -
Array.prototype.slice.call()—— 兼容性最好（IE6+），但写法略冗长：const arr = Array.prototype.slice.call(arguments); -
Array.apply(null, arrayLike)—— 不推荐，对长类数组可能触发栈溢出，且无法处理空位。
哪些对象属于典型类数组
这些是开发中最常遇到、需要转换的：
-
arguments：函数内部的伪数组，保存传入参数（ES6 后建议用剩余参数...args替代） -
NodeList：如document.querySelectorAll()或element.childNodes的返回值（注意：getElementsByClassName返回的是HTMLCollection） -
HTMLCollection：如document.getElementsByTagName()或form.elements的返回值，动态集合，转换后才“固化” -
字符串：虽不是传统类数组，但有
length和索引，Array.from('abc')会得到['a','b','c']
为什么不能直接调用数组方法
因为类数组对象没有继承 Array.prototype，所以：document.querySelectorAll('p').map(...) 会报 TypeError: not a function。
本质是缺少原型链上的方法，不是“长得像数组就等于数组”。强行借用（如 Array.prototype.forEach.call()）可行但不够直观，转换后代码更清晰、可读性更高、链式调用更自然。
立即学习“Java免费学习笔记（深入）”；
实际场景举例
几个高频真实需求：
- 批量操作 DOM 元素：
Array.from(document.querySelectorAll('.btn')).forEach(btn => btn.addEventListener('click', handler)); - 过滤表单输入项：
const inputs = Array.from(form.elements).filter(el => el.type === 'text'); - 收集事件参数做计算：
function sum() { return Array.from(arguments).reduce((a, b) => a + Number(b), 0); } - 将 URL 查询字符串键值对转为数组对象：
Array.from(new URLSearchParams(location.search)) // → [['a','1'], ['b','2']]
基本上就这些。转换本身不复杂，但容易忽略——尤其在处理 DOM 集合时，直接链式调用数组方法是常见错误源头。选对方法，代码更健壮也更易维护。
