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，不是真正的陣列
const divs = document.querySelectorAll('div');

// Array from a Nodelist
const divArray = Array.from(divs);
divArray.forEach(function (div) {
  console.log(div.textContent);
});

從 arguments 建立陣列

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

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

從 Set 建立陣列

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

從 Map 建立陣列

const 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]