Array.from 可将类数组或可迭代对象转为数组并同步映射处理，支持 DOM 节点属性提取、Map 结构化转换、注入序号/时间戳等计算属性，以及配合自定义迭代器实现懒加载式转换。
Array.from 不仅能将类数组或可迭代对象转为数组，还能在转换过程中对每个元素进行映射处理，特别适合对复杂对象（如 DOM 节点、Map、Set、字符串甚至自定义迭代器）做“带逻辑的数组化”——即一边结构化提取，一边做数据重塑。
处理 NodeList 并提取特定属性
DOM 查询返回的 NodeList 是类数组但非数组，直接调用 map 会报错。用 Array.from 可一步转数组 + 提取属性：
const buttons = document.querySelectorAll('button');
const buttonData = Array.from(buttons, btn => ({
id: btn.id,
text: btn.textContent.trim(),
disabled: btn.hasAttribute('disabled')
}));
// → [{ id: 'save', text: '保存', disabled: false }, ...]
注意：第二个参数是映射函数，接收当前项、索引、原类数组对象；它比先 Array.from(btns) 再 .map() 更高效，避免中间数组。
从 Map 构建结构化对象数组
Map 的迭代器默认产出 [key, value] 数组。用 Array.from 可直接解构并组装新对象：
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
const userRoles = new Map([
['u1001', 'admin'],
['u1002', 'editor'],
['u1003', 'viewer']
]);
const roleList = Array.from(userRoles, ([id, role]) => ({ userId: id, role }));
// → [{ userId: 'u1001', role: 'admin' }, ...]
这种写法比 Array.from(map.entries()).map(...) 更简洁，且语义清晰——“把 Map 的每一项转成一个用户角色对象”。
生成含计算属性的数组（如带序号、时间戳）
当需要为每个元素注入上下文信息（如索引、当前时间、随机 ID），映射函数中可自由组合：
- 利用第二个参数
index添加序号或偏移量 - 在函数体内调用
Date.now()或Math.random()注入动态值 - 结合解构和默认值处理不规则输入
const rawItems = ['apple', 'banana', null, 'cherry'];
const enriched = Array.from(rawItems, (item, i) => ({
id: `item-${i + 1}`,
name: item ?? 'unknown',
createdAt: new Date().toISOString(),
isValid: typeof item === 'string' && item.length > 0
}));
配合自定义迭代器实现懒加载式转换
若源数据量大或需延迟计算，可构造一个迭代器对象，让 Array.from 按需消费：
function* range(start, end) {
for (let i = start; i < end; i++) yield i;
}
const squares = Array.from(range(0, 5), x => x * x);
// → [0, 1, 4, 9, 16]
此时 Array.from 不会一次性展开全部，而是逐次调用 next()，适合处理流式、分页或无限序列场景。
