Array.from() 是 JavaScript 中的一个静态方法，它可以从类数组对象或可迭代对象中创建一个新的数组实例。这个方法非常有用，尤其是在处理那些不是真正的数组但可以像数组一样访问其元素的对象时。

基本语法

Array.from(arrayLike, mapFn, thisArg)

• arrayLike - 任何具有 length 属性和索引的类数组对象或可迭代对象。
• mapFn (可选) - 对新数组中的每个元素调用的映射函数。该函数接收三个参数：
  • 当前元素
  • 当前索引
  • 新数组本身
• thisArg (可选) - 执行 mapFn 时，用作 this 的值。

使用示例

从类数组对象创建数组

DOM 方法如 querySelectorAll 返回的是一个类数组对象（NodeList）。我们可以使用 Array.from 将其转换为真正的数组，以便使用数组的方法。

const divs = document.querySelectorAll('div'); // NodeList, 类数组对象
const divsArray = Array.from(divs); // 转换为真正的数组
console.log(divsArray instanceof Array); // true

使用映射函数

在创建数组的同时，我们还可以对每个元素应用一个函数来转换它们。

const numbers = [1, 2, 3];
const squares = Array.from(numbers, x => x * x);
console.log(squares); // 输出: [1, 4, 9]

处理非数组对象

即使对象没有显式地定义为数组，只要它有 length 属性和相应的索引属性，Array.from 就能将其转换为数组。

const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 4};
const newArray = Array.from(arrayLike,(item)=>{console.log(item) //'a'  //'b'  //'c'  //undefined
});
console.log(newArray); // 输出: ['a', 'b', 'c', undefined]

特性

• 处理空对象：如果 arrayLike 参数是一个空对象（即没有任何索引属性），则 Array.from 会返回一个空数组。
• 处理字符串：当 arrayLike 是一个字符串时，Array.from 会将字符串拆分成单个字符组成的数组。
• 处理稀疏数组：对于稀疏数组（某些索引位置没有值的数组），Array.from 会跳过这些缺失的位置，不会在结果数组中包含 undefined。

Array.from 提供了一种灵活且强大的方式来创建数组，并允许你在创建过程中对数据进行即时处理。这对于现代JavaScript开发来说是非常有用的工具。