Array.from用法详解及转换技巧

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《Array.from 如何将类数组转为真实数组？》，聊聊，我们一起来看看吧！

类数组对象是具有length属性和数值键的非数组对象，如arguments、NodeList；Array.from通过读取length及索引值将其转为真数组，并支持可迭代对象与映射函数，常用于DOM操作或参数处理。

Array.from 方法可以将类数组对象（array-like object）转换为真正的数组，主要通过读取对象的 length 属性，并根据索引从 0 到 length - 1 依次提取属性值，构造出一个新数组。

什么是类数组对象？

例如：

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

Array.from 是如何工作的？

• 读取对象的 length 属性，确定新数组的长度
• 从索引 0 开始，逐个读取对象中对应数字键的值
• 将这些值按顺序放入一个新的数组实例中
• 返回这个真实数组

示例：

const arrayLike = { 0: 'x', 1: 'y', length: 2 };
const arr = Array.from(arrayLike);
<p>console.log(arr);        // ['x', 'y']
console.log(Array.isArray(arr));  // true
</p>

支持可迭代对象和映射操作

带映射函数的例子：

const arrayLike = { 0: 2, 1: 4, 2: 6, length: 3 };
const doubled = Array.from(arrayLike, x => x * 2);
<p>console.log(doubled);  // [4, 8, 12]
</p>

这相当于先生成数组 [2, 4, 6]，然后对每个元素执行 x => x * 2。

实际应用场景

• 转换 NodeList： Array.from(document.querySelectorAll('div'))
• 转换 arguments： 在非箭头函数中，Array.from(arguments) 可替代 Array.prototype.slice.call(arguments)
• 字符串转字符数组： Array.from('hello') 得到 ['h', 'e', 'l', 'l', 'o']

基本上就这些。Array.from 提供了一种简洁、标准的方式，把看起来像数组的东西变成真正的数组，方便使用 map、filter 等方法。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Array.from用法详解及转换技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。