array.from可将类数组或可迭代对象转为新数组并支持映射,语法为array.from(iterable, mapfn),等价于先转数组再map但更高效;映射函数参数为(item, index, array),常用于字符串处理、dom节点提取、生成序列及绑定this上下文。

Array.from 可以将类数组或可迭代对象转为新数组,同时支持在转换过程中直接映射元素——无需先创建数组再调用 map()。
基本语法:传入映射函数作为第二个参数
Array.from 的第二个参数是一个映射函数,它会自动接收当前元素、索引和原对象(通常不用),返回值即为新数组对应位置的元素。
- 语法:
Array.from(iterable, mapFn) - 等价于:
Array.from(iterable).map(mapFn),但更高效(只遍历一次) - 映射函数的参数顺序是:
(item, index, array),其中array是 Array.from 内部构造的新数组(尚未完全生成,一般不使用)
从字符串或类数组对象生成处理后的新数组
例如,把字符串每个字符转为大写并加感叹号:
const result = Array.from('abc', char => char.toUpperCase() + '!');<br>// ['A!', 'B!', 'C!']
再比如,从 arguments 或 DOM 节点列表中提取文本并过滤空值:
function example() {<br> return Array.from(arguments, arg => typeof arg === 'string' ? arg.trim() : '');<br>}<br>example(' hello ', 42, ' world '); // ['hello', '', 'world']
配合 Array-like 构造固定长度数组并填充计算值
利用 { length: n } 创建伪数组,再用映射函数生成序列:
- 生成 0 到 n-1 的数字数组:
Array.from({ length: 5 }, (_, i) => i)→[0,1,2,3,4] - 生成平方数:
Array.from({ length: 4 }, (_, i) => i * i)→[0,1,4,9] - 生成随机数:
Array.from({ length: 3 }, () => Math.random())
注意映射函数中的 this 绑定
如果映射函数需要访问特定上下文,可通过 Array.from 的第三个参数传入 thisArg:
const helper = { factor: 10 };<br>Array.from([1, 2, 3], function(x) {<br> return x * this.factor;<br>}, helper); // [10, 20, 30]
箭头函数无法通过 thisArg 改变 this,所以需用普通函数。











