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 可直接解构并组装新对象:
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 x * x);
// → [0, 1, 4, 9, 16]
此时 Array.from 不会一次性展开全部,而是逐次调用 next(),适合处理流式、分页或无限序列场景。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











