array.from可将dom nodelist转为真数组以使用map、filter等方法，因nodelist是类数组对象，无这些原型方法，直接调用会报typeerror；它支持映射函数且兼容性好，适用于批量操作元素。
Array.from 可以将 DOM NodeList 转为真正的数组，从而使用 map、filter、find 等数组方法，避免 TypeError。
为什么 NodeList 不能直接调用数组方法
NodeList 是类数组对象，有 length 和索引，但没有 push、map、forEach（部分浏览器支持 forEach，但不支持 map/filter）等原型方法。直接调用会报错：TypeError: nodeList.map is not a function。
用 Array.from 转换 NodeList
只需一行代码即可转换：
const buttons = document.querySelectorAll('button');
const buttonArray = Array.from(buttons); // ✅ 得到真数组
buttonArray.map(btn => btn.textContent); // ✅ 可用 map
- 支持传入映射函数，一步完成转换+处理：
Array.from(buttons, btn => btn.innerText) - 兼容性好（IE 不支持，但现代项目基本无碍；若需兼容 IE，可用
[...buttons]或Array.prototype.slice.call(buttons)）
常见使用场景
实际开发中常用于批量操作元素：
- 提取文本：
Array.from(document.querySelectorAll('li'), el => el.textContent) - 绑定事件（避免循环闭包问题）：
Array.from(checkboxes).forEach(box => box.addEventListener('change', handle)) - 筛选符合条件的元素：
Array.from(inputs).filter(input => input.value.trim())
注意：不是所有类数组都适合 Array.from
Array.from 要求对象有 Symbol.iterator 或 length 属性且键为非负整数。大多数 NodeList（如 querySelectorAll、getElementsByClassName 返回的）满足条件；但某些动态 NodeList（如 live HTMLCollection）在旧版 Safari 中可能行为不稳定，建议优先用 querySelectorAll 获取静态 NodeList。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
