Array.from是将类数组转为真数组最简洁可靠的方法，可直接使用forEach、map等方法；伪数组指有length属性和数字索引但无数组原型方法的对象，如NodeList、arguments、HTMLCollection。
Array.from 是 JS 中将类数组（伪数组）转为真数组最简洁可靠的方法，转完就能直接用 forEach、map、filter 等原生数组方法遍历。
什么是伪数组？
伪数组指有 length 属性、按数字索引存储元素，但**没有数组原型方法**的对象，比如：
-
document.querySelectorAll('div')（返回NodeList，现代浏览器中已是可迭代对象，但旧版需转换） -
arguments对象（函数内部） -
HTMLCollection（如document.getElementsByTagName('p')）
用 Array.from 转换 + 遍历的写法
一步到位：先转成真数组，再链式调用遍历方法：
// 示例：获取所有按钮并绑定点击事件
const buttons = document.querySelectorAll('button');
Array.from(buttons).forEach((btn, index) => {
btn.addEventListener('click', () => console.log(`第 ${index + 1} 个按钮被点击`));
});
等价于先存再遍历：
const trueArray = Array.from(buttons);
trueArray.forEach(item => item.classList.add('active'));
注意兼容性与替代方案
Array.from 支持 ES6+，IE 不支持。若需兼容老环境：
- 用
[].slice.call(伪数组)（适用于有length和索引的类数组） - 用扩展运算符：
[...伪数组]（更简洁，但同样不支持 IE） -
Array.prototype.forEach.call(伪数组, callback)可跳过转换直接遍历，但不能链式使用map/filter
小技巧：转换时顺便做映射
Array.from 第二个参数可传映射函数，省去额外 map 步骤：
// 直接提取所有按钮的文字内容并转为大写
const texts = Array.from(
document.querySelectorAll('button'),
btn => btn.textContent.toUpperCase()
);
console.log(texts); // ['SUBMIT', 'CANCEL', ...]
