Array.from 详解：语法、功能、应用场景示例

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

文章目录

• • 一、Array.from()方法
  • 二、基本语法：
  • 三、应用场景

---

一、Array.from()方法

Array.from() 是 ECMAScript 6 中新增的一个方法，它可以从类数组对象或可迭代对象（如字符串、Set、Map、NodeList 等）创建一个新的数组实例。

二、基本语法：

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

• arrayLike：必需，任何具有 length 属性且索引为整数的可迭代对象，或者是实现了 @@iterator 接口的对象。
• mapFn：可选，一个映射函数，对每个元素调用该函数并将其结果收集到新数组中。
• thisArg：可选，执行映射函数时的上下文对象。

示例代码：

// 从类数组对象创建数组
let arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
let arr = Array.from(arrayLike);
console.log(arr); // 输出: ["a", "b", "c"]

// 从 NodeList 创建数组
let divs = document.querySelectorAll('div');
let divArray = Array.from(divs);
console.log(divArray.length); // 输出: 找到的div元素数量

// 同时使用映射函数
let numbers = Array.from([1, 2, 3, 4], x => x * 2);
console.log(numbers); // 输出: [2, 4, 6, 8]
12345678910111213

三、应用场景

1. 转换类数组对象：类数组对象（如arguments对象、DOM NodeList对象等）虽然具有长度和索引属性，但并非真正的数组，不能直接调用数组的方法。Array.from()可以把它们转换成真正的数组，从而可以使用数组的各种方法。

2. 处理可迭代对象：对于Set、Map、字符串等可迭代对象，可以通过Array.from()快速转换成数组。

3. 结合映射函数：在转换的同时，可以利用第二个参数对转换后的数组元素进行处理，实现类似于 map() 函数的功能。

4. 数组填充：可以配合空数组和映射函数，快速创建一个由特定值填充的数组。

// 创建一个长度为5的全零数组
let zeros = Array.from({length: 5}, () => 0);
console.log(zeros); // 输出: [0, 0, 0, 0, 0]
123

总结来说，Array.from() 是一个非常实用的方法，用于将非数组对象转化为数组，并且在转化过程中提供了额外的灵活性和功能。它尤其适用于那些不支持迭代器接口的老式浏览器环境下的类数组对象转换，以及需要结合映射操作创建新数组的场景。