Array.from 是 JavaScript 中用于將類數(shù)組對象或可迭代對象轉(zhuǎn)換為真正數(shù)組的方法。它適用于處理如 arguments 對象、nodelist 等類數(shù)組對象，以及 set、map、字符串等可迭代對象，例如 array.from(‘hello’) 會將其拆分為字符數(shù)組。其完整語法為 array.from(arraylike, mapfn, thisarg)，其中 arraylike 是必須參數(shù)，mapfn 是可選的映射函數(shù)，thisarg 是執(zhí)行 mapfn 時的 this 值。常見用法包括：1. 將 arguments 轉(zhuǎn)換為數(shù)組；2. 將字符串拆分為字符數(shù)組；3. 將 set 或 map 轉(zhuǎn)換為數(shù)組；4. 配合 map 函數(shù)進行元素轉(zhuǎn)換。與展開運算符相比，array.from 的優(yōu)勢在于支持直接傳入映射函數(shù)，并且在某些需要兼容舊瀏覽器的場景中可通過 polyfill 實現(xiàn)支持。
Array.from 是 JavaScript 中一個非常實用的方法，用來把類數(shù)組對象或者可迭代對象轉(zhuǎn)換成真正的數(shù)組。簡單來說，它能幫你快速從一些“像數(shù)組但不是數(shù)組”的東西里生成數(shù)組，方便后續(xù)操作。
什么情況下會用到 Array.from？
最常見的場景就是處理類數(shù)組對象（array-like objects）。比如函數(shù)內(nèi)部的 arguments 對象、dom 操作中獲取的 NodeList 等，它們看起來像數(shù)組，有 Length 屬性，也能通過索引訪問元素，但并不是真正的數(shù)組，因此不能直接使用 map、Filter 這些數(shù)組方法。
這時候，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);
除了類數(shù)組對象，它還能處理 Set、Map、字符串等可迭代對象。
怎么用？基本語法和常見用法
Array.from 的完整語法是這樣的：
Array.from(arrayLike, mapFn, thisArg)
- arrayLike：必須，要轉(zhuǎn)換成數(shù)組的對象。
- mapFn：可選，在新數(shù)組元素上執(zhí)行的映射函數(shù)。
- thisArg：可選，執(zhí)行 mapFn 函數(shù)時使用的 this 值。
常見的幾種用法如下：
- 把 arguments 轉(zhuǎn)為數(shù)組
- 把字符串拆成字符數(shù)組
- 把 Set 或 Map 轉(zhuǎn)換為數(shù)組
- 配合 map 函數(shù)進行轉(zhuǎn)換處理
舉個例子：
Array.from('hello'); // ['h', 'e', 'n', 'l', 'o'] Array.from(new Set([1, 2, 3])); // [1, 2, 3]
和展開運算符的區(qū)別？
你可能會問，那我為什么不直接用 […arrayLike]？確實，展開運算符在很多情況下可以替代 Array.from。比如：
const arr1 = [...'hello']; // ['h', 'e', 'l', 'l', 'o'] const arr2 = Array.from('hello'); // 效果一樣
兩者都能實現(xiàn)同樣的結(jié)果。區(qū)別在于 Array.from 提供了第二個參數(shù)，可以在生成數(shù)組的同時對每個元素做處理，有點像 map：
Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]
而展開運算符沒有這個功能，只能配合 map 單獨再調(diào)用一次。
另外，對于某些瀏覽器兼容性要求較高的項目，Array.from 可以搭配 polyfill 使用，而展開運算符在老舊瀏覽器中可能完全不支持。
基本上就這些。
