Array.from() 的五個神仙用法，徹底告別 for 循環初始化！
在 JavaScript 中，當我們需要創建一個特定長度或內容的數組時，腦海里第一個閃過的念頭可能就是 for 循環。
// 需求：創建一個長度為 5，內容為 [0, 1, 2, 3, 4] 的數組
const arr = [];
for (let i = 0; i < 5; i++) {
arr.push(i);
}這當然沒問題，但有沒有更優雅、更函數式的方式呢？
今天，就讓我們來認識一下數組的“創造魔法師”——Array.from()。它不僅能將類數組對象和可迭代對象轉換為真正的數組，其強大的第二個參數（一個 map 函數）更是能讓我們玩出各種花樣，徹底告別繁瑣的 for 循環初始化。
用法一：創建數字序列（替代 for 循環）
這是最基礎也是最實用的一個用法。Array.from() 的第一個參數可以是一個具有 length 屬性的對象。
解析：
(1) { length: 5 }：我們創建了一個類似數組的對象，它只有 length 屬性。
(2) (value, index) => index：這是 Array.from() 的第二個參數，一個映射函數。它會對新數組的每一個位置都執行一次。
- index 是當前元素的索引 (0, 1, 2, 3, 4)。
- value 在這種情況下是 undefined，因為 { length: 5 } 對象沒有實際的值。
- 我們直接返回 index 作為新數組元素的值。
就這樣，一行代碼就優雅地替代了整個 for 循環。
用法二：生成特定規則的數組
for 循環能做的，Array.from() 都能做得更漂亮。比如，生成一個由偶數組成的數組，或者一個平方數序列。
// 需求 1：創建一個包含 5 個偶數的數組 [0, 2, 4, 6, 8]
const evens = Array.from({ length: 5 }, (_, i) => i * 2);
console.log(evens); // [0, 2, 4, 6, 8]
// 需求 2：創建一個包含 1 到 5 的平方的數組 [1, 4, 9, 16, 25]
const squares = Array.from({ length: 5 }, (_, i) => (i + 1) ** 2);
console.log(squares); // [1, 4, 9, 16, 25]
// 需求 3：創建 5 個內容相同的元素
const fives = Array.from({ length: 5 }, () => 5);
console.log(fives); // [5, 5, 5, 5, 5]技巧：如果我們在映射函數中用不到 value 參數，可以用下劃線 _ 來占位，這是一種廣為接受的代碼風格，表示“這個參數我故意忽略了”。
用法三：快速初始化對象數組
在寫測試用例或 mock 數據時，我們經常需要創建一組結構相同的對象。Array.from() 在這個場景下簡直是神器。
一行代碼，一個結構清晰、內容隨機的對象數組就誕生了。是不是比寫三遍 for 循環 push 一個對象要爽得多？
用法四：復制并深度處理數組
Array.from() 不僅能從零創建，還能基于現有數組進行“深加工”。它在轉換的同時進行映射，一步到位，避免了先 map 再 filter 等可能產生的中間數組。
const original = [1, '2', 3, null, '4', 5];
// 需求：從一個混合數組中，只提取出數字，并將非數字轉為 0
// 返回 [1, 0, 3, 0, 0, 5]
const processed = Array.from(original, item => {
const num = Number(item);
return isNaN(num) ? 0 : num;
});
console.log(processed); // [1, 2, 3, 0, 4, 5] <-- 修正：Number('2') 是 2，Number(null) 是 0
// Let's correct the example to be more illustrative
// 需求：將所有數字乘以2，非數字項保持為 null
const processedV2 = Array.from(original, item => {
return typeof item === 'number' ? item * 2 : null;
});
console.log(processedV2); // [2, null, 6, null, null, 10]對比 map:
Array.from(array, mapFn) 的效果和 array.map(mapFn) 幾乎一樣。但 Array.from 的優勢在于它的第一個參數可以是類數組對象。
比如，處理函數的 arguments 對象或者 DOM 查詢結果 NodeList。
用法五：巧妙生成字母序列
誰說只能處理數字？Array.from() 結合字符編碼，可以輕松生成字母表。
// 需求：生成一個從 'A' 到 'Z' 的字母數組
const alphabet = Array.from({ length: 26 }, (_, i) => {
// 'A' 的 ASCII 碼是 65
return String.fromCharCode(65 + i);
});
console.log(alphabet);
// ["A", "B", "C", ..., "Z"]這個用法雖然不常用，但它絕佳地展示了 Array.from() 的靈活性和表現力，是面試中展示我們技術深度的小亮點。
