Array.from 可将类数组或可迭代对象转为数组,支持映射函数和指定长度初始化,适用于 arguments、NodeList、字符串等场景,且兼容不可迭代的类数组对象,功能较扩展运算符更强大。

Array.from 是 JavaScript 中用于将类数组对象或可迭代对象转换为真正数组的方法。它也可以用来创建指定长度的数组,并支持通过映射函数处理每个元素。
基本语法
Array.from(arrayLike, mapFn, thisArg)- arrayLike:想要转换成数组的类数组对象或可迭代对象(如字符串、NodeList、arguments 等)
- mapFn:可选,新数组每个元素会执行的回调函数
- thisArg:可选,执行 mapFn 时的 this 值
转换类数组对象
常见的类数组对象是函数中的 arguments 或 DOM 中的 NodeList。
function example() { return Array.from(arguments); } example(1, 2, 3); // [1, 2, 3]// 获取所有 div 元素并转为数组 const divs = Array.from(document.querySelectorAll('div'));
处理字符串
字符串是可迭代对象,Array.from 可将其拆分为字符数组。
Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']创建指定长度的数组
结合 length 属性,可以生成固定长度的空数组,并配合 mapFn 初始化值。
// 创建长度为 5 的数组,每一项是索引的平方 Array.from({ length: 5 }, (v, i) => i * i); // [0, 1, 4, 9, 16]// 创建 [1, 2, 3, 4, 5] Array.from({ length: 5 }, (v, i) => i + 1);
与扩展运算符的区别
扩展运算符(...)也能将可迭代对象转为数组,但只适用于可迭代对象。Array.from 更强大,能处理类数组对象(即使不可迭代)。
// NodeList 在某些环境中不可用扩展运算符 Array.from(document.querySelectorAll('div')); // 安全 [...document.querySelectorAll('div')]; // 通常也可行,但依赖 Symbol.iterator对于类数组但不可迭代的对象,只有 Array.from 能处理。
基本上就这些。Array.from 简洁且功能强,适合数据转换和初始化数组场景。










