JS进阶：手把手教你用Array.from实现数组魔法（附超实用案例）

还在为JavaScript中类数组对象和可迭代对象转数组而烦恼吗？本文为你详细解读`Array.from`这一实用技巧，助你轻松解决问题！`Array.from`可以将`arguments`对象、`NodeList`等类数组对象，以及`Set`、`Map`、字符串等可迭代对象快速转换为真正的数组，从而方便地使用`map`、`filter`等数组方法。文章深入剖析`Array.from(arrayLike, mapFn, thisArg)`的语法，并通过实例讲解如何将`arguments`转换为数组、拆分字符串、转换`Set`或`Map`，以及配合`map`函数进行元素转换。同时，对比`Array.from`与展开运算符的优劣，强调其在支持映射函数和兼容性方面的优势。掌握`Array.from`，让你的JavaScript代码更简洁高效！

Array.from 是 JavaScript 中用于将类数组对象或可迭代对象转换为真正数组的方法。它适用于处理如 arguments 对象、NodeList 等类数组对象，以及 Set、Map、字符串等可迭代对象，例如 Array.from('hello') 会将其拆分为字符数组。其完整语法为 Array.from(arrayLike, mapFn, thisArg)，其中 arrayLike 是必须参数，mapFn 是可选的映射函数，thisArg 是执行 mapFn 时的 this 值。常见用法包括：1. 将 arguments 转换为数组；2. 将字符串拆分为字符数组；3. 将 Set 或 Map 转换为数组；4. 配合 map 函数进行元素转换。与展开运算符相比，Array.from 的优势在于支持直接传入映射函数，并且在某些需要兼容旧浏览器的场景中可通过 polyfill 实现支持。

Array.from 是 JavaScript 中一个非常实用的方法，用来把类数组对象或者可迭代对象转换成真正的数组。简单来说，它能帮你快速从一些“像数组但不是数组”的东西里生成数组，方便后续操作。

什么情况下会用到 Array.from？

最常见的场景就是处理类数组对象（array-like objects）。比如函数内部的 arguments 对象、DOM 操作中获取的 NodeList 等，它们看起来像数组，有 length 属性，也能通过索引访问元素，但并不是真正的数组，因此不能直接使用 map、filter 这些数组方法。

这时候，Array.from 就派上用场了。例如：

function example() {
  console.log(Array.isArray(arguments)); // false
  const args = Array.from(arguments);
  console.log(Array.isArray(args)); // true
}
example(1, 2, 3);

除了类数组对象，它还能处理 Set、Map、字符串等可迭代对象。

怎么用？基本语法和常见用法

Array.from 的完整语法是这样的：

Array.from(arrayLike, mapFn, thisArg)

• arrayLike：必须，要转换成数组的对象。
• mapFn：可选，在新数组元素上执行的映射函数。
• thisArg：可选，执行 mapFn 函数时使用的 this 值。

常见的几种用法如下：

• 把 arguments 转为数组
• 把字符串拆成字符数组
• 把 Set 或 Map 转换为数组
• 配合 map 函数进行转换处理

举个例子：

Array.from('hello'); // ['h', 'e', 'n', 'l', 'o']
Array.from(new Set([1, 2, 3])); // [1, 2, 3]

和展开运算符的区别？

你可能会问，那我为什么不直接用 [...arrayLike]？确实，展开运算符在很多情况下可以替代 Array.from。比如：

const arr1 = [...'hello']; // ['h', 'e', 'l', 'l', 'o']
const arr2 = Array.from('hello'); // 效果一样

两者都能实现同样的结果。区别在于 Array.from 提供了第二个参数，可以在生成数组的同时对每个元素做处理，有点像 map：

Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

而展开运算符没有这个功能，只能配合 map 单独再调用一次。

另外，对于某些浏览器兼容性要求较高的项目，Array.from 可以搭配 polyfill 使用，而展开运算符在老旧浏览器中可能完全不支持。

基本上就这些。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~