JavaScript Array.from() (從類陣列建立陣列)

Array.from() 是一個靜態方法，用來從類陣列 (array-like) 或可迭代物件 (iterable) 建立一個新的陣列。

語法：

Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike 是要轉換成陣列的類陣列或可迭代物件
• mapFn 是可選的 map 函數，會對每個元素執行
• thisArg 代表 mapFn 裡面的 this 是指向哪一個物件

從字串建立陣列

Array.from('hello');
// ['h', 'e', 'l', 'l', 'o']

從 NodeList 建立陣列

// querySelectorAll 回傳的是 NodeList，不是真正的陣列
var divs = document.querySelectorAll('div');

// 轉成陣列後就可以使用陣列方法
var divArray = Array.from(divs);
divArray.forEach(function(div) {
    console.log(div.textContent);
});

從 arguments 建立陣列

function sum() {
    // arguments 是類陣列物件
    var args = Array.from(arguments);
    return args.reduce(function(a, b) {
        return a + b;
    }, 0);
}

sum(1, 2, 3, 4);  // 10

從 Set 建立陣列

var set = new Set([1, 2, 3, 2, 1]);
Array.from(set);  // [1, 2, 3]

從 Map 建立陣列

var map = new Map([['a', 1], ['b', 2]]);
Array.from(map);  // [['a', 1], ['b', 2]]

使用 mapFn 參數

// 產生 1 到 5 的陣列
Array.from({ length: 5 }, function(v, i) {
    return i + 1;
});
// [1, 2, 3, 4, 5]

// 產生數字的平方
Array.from([1, 2, 3], function(x) {
    return x * x;
});
// [1, 4, 9]

// 使用箭頭函數 (ES6)
Array.from({ length: 5 }, (_, i) => i + 1);

建立指定長度的陣列

// 建立長度為 5 的陣列，全部填入 0
Array.from({ length: 5 }, () => 0);
// [0, 0, 0, 0, 0]

// 建立連續數字陣列
Array.from({ length: 10 }, (_, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]