JavaScript的Array.from方法是ES6新增的数组静态方法，主要作用是将类数组对象或者可迭代对象转换为真正的数组实例，同时还支持在转换过程中对每个元素进行映射处理，是前端开发中处理数据转换的常用工具。
Array.from方法的基本定义
Array.from是挂载在Array构造函数上的静态方法，它的核心功能是将传入的类数组对象或者可迭代对象，转换成一个新的数组返回。和扩展运算符相比，Array.from可以处理更广泛的类数组场景，并且自带映射处理的能力。
方法参数说明
Array.from方法接收两个参数，语法格式如下：
Array.from(arrayLike[, mapFn[, thisArg]])
- arrayLike：必填参数，需要转换的类数组对象或者可迭代对象，比如函数的arguments对象、DOM集合NodeList、字符串、Set、Map等。
- mapFn：可选参数，映射函数，会在每个元素被添加到新数组之前执行，作用和数组的map方法类似。
- thisArg：可选参数，执行mapFn函数时this的指向。
常见使用场景与示例
1. 转换类数组对象
类数组对象是指具有length属性，且属性名是数字索引的对象，比如函数的arguments对象，这类对象本身没有数组的方法，通过Array.from可以快速转为数组。
function sum() {
// arguments是类数组对象，没有数组的reduce方法，先转为数组
const args = Array.from(arguments);
return args.reduce((acc, cur) => acc + cur, 0);
}
console.log(sum(1, 2, 3)); // 输出6
2. 转换可迭代对象
字符串、Set、Map等可迭代对象都可以通过Array.from转为数组，比如将字符串拆分成单个字符的数组：
const str = 'hello'; const strArr = Array.from(str); console.log(strArr); // 输出["h", "e", "l", "l", "o"]
再比如将Set结构转为数组，实现数组去重：
const arr = [1, 2, 2, 3, 3, 4]; const uniqueArr = Array.from(new Set(arr)); console.log(uniqueArr); // 输出[1, 2, 3, 4]
3. 结合映射函数处理元素
传入mapFn参数可以在转换的同时对每个元素进行处理，不需要额外调用map方法，比如将类数组的数字元素翻倍：
const arrayLike = {0: 1, 1: 2, 2: 3, length: 3};
const newArr = Array.from(arrayLike, item => item * 2);
console.log(newArr); // 输出[2, 4, 6]
4. 生成指定长度的数组
结合Array.from的第二个参数，可以生成指定长度且带有初始值的数组，比如生成一个长度为5，每个元素都是0的数组：
const arr = Array.from({length: 5}, () => 0);
console.log(arr); // 输出[0, 0, 0, 0, 0]
注意事项
- 如果传入的arrayLike参数没有length属性，也不是可迭代对象，那么会返回一个空数组。
- 当arrayLike是类数组对象时，会按照索引从0到length-1的顺序读取属性值，不存在的索引对应的值会是undefined。
- Array.from是浅拷贝，如果原对象中的元素是引用类型，新数组中的元素会指向同一个引用地址。
需要注意的是，
Array.from和扩展运算符...都能实现可迭代对象转数组，但扩展运算符无法处理没有部署迭代器的类数组对象，而Array.from可以处理所有类数组对象，在处理arguments、NodeList等场景时更通用。
JavaScriptArray.from类数组对象可迭代对象数组转换修改时间：2026-06-11 06:24:24