JavaScript – Array.from(變數) 與 […變數] 結構比較

Array

Array (注意開頭大寫) 是針資料轉成陣列的操作方法，針對不同的資料型態有不同的方式來轉換。

如果在瀏覽器下直接輸入 Array 會回應出一個 function Array()，而展開後可以看到相關的方法列表。

Array.from() 會將「類陣列物件」或是「可迭代的物件」轉換成陣列。
Array.from() 有兩個參數-
– 第一個參數為「類陣列物件」或「可迭代的物件」( 必填 )
– 第二個參數則是改變轉換成陣列元素的函式 ( 選填 )。

let a = 'abcde';
let b = Array.from(a);
console.log(b);
// Array(5) [ "a", "b", "c", "d", "e" ]

let a = 'abcde';

let b = Array.from(a);

console.log(b);

// Array(5) [ "a", "b", "c", "d", "e" ]

輸出結果會得到回應是個整列，內容上有有 0-4 的 5 個長度 length 的索引值。

另外使用解構 [...變數名] 的方式，所產生出來的新陣列也是一樣，解構一樣處理「類陣列物件」或是「可迭代的物件」轉換，將所轉換的每筆內容加到陣列去。

let a = 'abcde';
let b = [...a];
console.log(b);
// Array(5) [ "a", "b", "c", "d", "e" ]

let a = 'abcde';

let b = [...a];

console.log(b);

// Array(5) [ "a", "b", "c", "d", "e" ]

類陣列物件具有 length 屬性以及索引化 index 的元素，可迭代物件表示具有可以利用迭代的方式取得它自己本身的元素，例如 Map 和 Set…等。