Array.from()的第二个参数是映射函数,可在创建数组时一次性完成转换,避免二次遍历;函数签名(value, index, array)支持索引与原数组访问;适用于类数组、Set、字符串等可迭代对象;需注意this绑定问题。

Array.from() 的第二个参数是一个映射函数(mapFn),它能在创建新数组的同时对每个元素执行转换,无需先生成中间数组再调用 .map() —— 实现真正的一站式转换与映射。
直接在构造时完成转换,避免多余遍历
传统方式常分两步:先用 Array.from(iterable) 转成数组,再链式调用 .map()。这会遍历两次。而传入第二个参数后,Array.from 内部在填充新数组时就逐个调用该函数,仅遍历一次。
- ✅ 正确用法:
Array.from(arrayLike, x => x * 2) - ❌ 低效写法:
Array.from(arrayLike).map(x => x * 2)
支持带索引和原数组的完整映射上下文
第二个参数函数签名是 (value, index, array) => newValue,和 .map() 完全一致。你可以安全使用索引做条件判断,或引用原数组做关联计算。
- 给类数组对象添加序号前缀:
Array.from(inputs, (val, i) => `${i + 1}. ${val}`) - 根据位置决定格式:
Array.from(row, (cell, i) => i === 0 ? cell.toUpperCase() : cell.toLowerCase())
配合 Array-like 或可迭代对象,实现跨类型“即取即转”
第二个参数让 Array.from 不仅能转类型,还能同步加工。比如从 document.querySelectorAll 获取 DOM 节点并立刻提取文本、绑定事件或计算尺寸。
- 批量读取 input 值并转为数字:
Array.from(inputs, el => Number(el.value)) - 从 Set 中提取并过滤空值:
Array.from(mySet, x => x != null ? x.toString().trim() : undefined).filter(Boolean) - 字符串按字符处理并升序排列:
Array.from('hello', c => c).sort()
注意 this 绑定与箭头函数的隐式限制
如果映射逻辑需访问外部对象上下文,不要直接用箭头函数传入第二个参数(它不绑定 this)。可显式传入 thisArg 第三个参数,或改用普通函数。
- 需要 this 时:
Array.from(data, function(x) { return this.transform(x); }, transformerObj) - 或封装为闭包:
const mapper = ctx => x => ctx.process(x); Array.from(data, mapper(myCtx))

















