Array.from() 语法详解：从类数组到真正数组的转换神器

Array.from() 是 JavaScript 中一个非常实用的数组创建方法，它能将类数组对象或可迭代对象（如字符串、Set、Map等）转换为真正的数组。今天就来彻底搞懂它的语法和用法！

基本语法

Array.from(arrayLike[, mapFn[, thisArg]])

参数说明

1. arrayLike（必需）

• 要转换为数组的类数组对象或可迭代对象
• 类数组对象：拥有 length 属性和索引元素的对象（如 { length: 3, 0: 'a', 1: 'b', 2: 'c' }）
• 可迭代对象：Array、String、Set、Map、NodeList 等

2.mapFn（可选）

• 类似数组 map 方法的回调函数，用于对每个元素进行处理
• 接收两个参数：当前元素值、当前元素索引
• 返回值将作为新数组的元素

3.thisArg（可选）

• 执行 mapFn 时的 this 指向

返回值

返回一个新的数组实例

实用示例

1. 基本用法：转换类数组对象

const likeArray = { length: 3, 0: 'a', 1: 'b', 2: 'c' };
const arr = Array.from(likeArray);
console.log(arr); // ['a', 'b', 'c']

2. 带映射函数：创建数组并同时处理元素

// 创建 1-5 的数字数组
const numbers = Array.from({ length: 5 }, (_, index) => index + 1);
console.log(numbers); // [1, 2, 3, 4, 5]

3. 转换字符串为字符数组

const str = 'hello';
const chars = Array.from(str);
console.log(chars); // ['h', 'e', 'l', 'l', 'o']

4. 转换 Set/Map 为数组

const set = new Set(['a', 'b', 'c']);
const setArr = Array.from(set);
console.log(setArr); // ['a', 'b', 'c']

5. 项目实战中的应用

// 生成指定长度的模拟数据数组
return Array.from({length: pageSize}, (_, i) => ({
  id: `${page}-${i}`,
  // 其他属性...
}));

这里用 Array.from() 创建了 pageSize 长度的数组，并用映射函数为每个元素生成了包含唯一 id 的对象。

与其他方法的对比

方法	特点
Array.from()	可转换类数组和可迭代对象，支持映射函数
[...spread]	语法简洁，但不支持映射函数
Array.prototype.slice.call()	仅支持类数组对象，语法较繁琐

总结

Array.from() 是一个功能强大的数组创建工具，它的核心价值在于：

1. 统一了类数组对象和可迭代对象的转换方式

2. 集成了创建和映射转换的功能，减少代码量

3. 让复杂数组的创建逻辑更加清晰易懂

需要创建有规律的数组或转换类数组对象时，试试 Array.from() ，相信会让你的代码更加简洁优雅！