当前位置：首页 > news >正文

Array.from()

news 2026/5/11 17:15:44

Array.from() 是 JavaScript 中用于将类数组对象或可迭代对象转换为真正数组的静态方法，支持在转换过程中进行元素映射，是处理非标准数组数据结构的强大工具。

一、基本概念与语法

Array.from() 是 ES6 引入的静态方法，用于从 类数组对象（如 arguments、NodeList）或 可迭代对象（如 String、Set、Map）创建一个新的浅拷贝数组实例。其核心优势在于能处理那些"看起来像数组但不是数组"的数据结构。

语法：

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

参数	类型	是否必填	说明
arrayLike	对象/可迭代对象	必填	要转换的类数组对象或可迭代对象
mapFn	函数	可选	对每个元素执行的映射函数（类似 `map()`）
thisArg	任意类型	可选	执行 `mapFn` 时的 `this` 值

二、核心功能与使用场景

1. 转换类数组对象为数组

类数组对象 是指 拥有 length 属性并可通过数字索引访问元素 的对象，常见于：

函数的 arguments 对象：

function sum() {const args = Array.from(arguments);return args.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3)); // 6

DOM 操作返回的集合（如 NodeList、HTMLCollection）：

const divs = document.querySelectorAll('div'); // NodeList
const divArray = Array.from(divs); // 转换为真正的数组
divArray.forEach(div => console.log(div)); // 现在可以使用数组方法

2. 转换可迭代对象为数组

可迭代对象 是指 实现了 [Symbol.iterator] 方法 的对象，包括：

字符串：

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

Set 和 Map：

const set = new Set(['a', 'b', 'c']);
console.log(Array.from(set)); // ['a', 'b', 'c']const map = new Map([['a', 1], ['b', 2]]);
console.log(Array.from(map)); // [['a', 1], ['b', 2]]
console.log(Array.from(map.values())); // [1, 2]

3. 使用映射函数处理元素

Array.from() 的 第二个参数 mapFn 允许在转换过程中对每个元素进行处理，避免了先转换再调用 map() 的额外开销：

基本映射：

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

复杂转换：

const str = 'hello';
const codeArray = Array.from(str, char => char.charCodeAt(0));
console.log(codeArray); // [104, 101, 108, 108, 111]

等同于 Array.from(obj).map()，但更高效：

Array.from([1, 2, 3], x => x * x); // [1, 4, 9]
// 等同于
Array.from([1, 2, 3]).map(x => x * x);

4. 处理稀疏数组

Array.from() 不会创建稀疏数组，缺失索引会填充为 undefined：

const sparseArray = Array(3); // 创建稀疏数组
console.log(sparseArray); // [empty × 3]const denseArray = Array.from(sparseArray);
console.log(denseArray); // [undefined, undefined, undefined]

三、与传统方法的对比优势

1. 与 `Array.prototype.slice.call()` 对比

旧方法：

const args = Array.prototype.slice.call(arguments);

Array.from() 优势：
- 语义更清晰：直接表明"从某物创建数组"的意图
- 适用范围更广：支持类数组对象和可迭代对象
- 代码更简洁：无需额外处理
- 支持内置映射：无需额外调用 map()

2. 与扩展运算符（...）对比

扩展运算符：
```
const args = [...arguments];
```
Array.from() 优势：
- 支持非可迭代的类数组对象：扩展运算符要求对象必须有 Symbol.iterator 接口
- 能在转换时进行映射：扩展运算符无法直接映射
- 处理稀疏数组更可靠：扩展运算符可能产生意外结果

四、高级应用技巧

1. 生成特定长度的数组

// 生成 [0, 1, 2, 3, 4]
const sequence = Array.from({ length: 5 }, (_, i) => i);// 生成 [1, 2, 3, 4, 5]
const numbers = Array.from({ length: 5 }, (_, i) => i + 1);// 生成字母序列
const alphabet = Array.from({ length: 26 },(_, i) => String.fromCharCode(65 + i)
);
console.log(alphabet); // ['A', 'B', 'C', ..., 'Z']

2. 数组去重与合并

// 数组去重
const arr = [1, 2, 2, 3, 3];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3]// 合并多个数组并去重
function combine() {let arr = [].concat.apply([], arguments);return Array.from(new Set(arr));
}
const m = [1, 2, 2], n = [2, 3, 3];
console.log(combine(m, n)); // [1, 2, 3]

3. 填充默认值

// 创建长度为5的数组，所有元素为0
const defaultArr = Array.from({ length: 5 }, () => 0);
console.log(defaultArr); // [0, 0, 0, 0, 0]// 创建重复值的数组
const repeatArr = Array.from({ length: 3 }, () => 'jack');
console.log(repeatArr); // ['jack', 'jack', 'jack']

五、注意事项

不会创建稀疏数组：Array.from() 总是返回一个密集数组，缺失索引会填充为 undefined
与 Array.map() 的区别：
- Array.from(obj, mapFn) 和 Array.from(obj).map(mapFn) 结果相同
- 但 Array.from() 不会创建中间数组，更高效
- mapFn 仅接受两个参数（element、index），不接受数组参数
兼容性：现代浏览器普遍支持，旧浏览器可使用 polyfill
浅拷贝特性：如果被转换对象包含对象引用，新数组包含的是对这些对象的引用（不是深拷贝）