Works by

Ren's blog

@rennnosuke_rk 技術ブログです

【JavaScript】反復可能なオブジェクトをArrayとして扱う

Array.from

Array.fromメソッドは、配列型オブジェクトや反復可能なオブジェクトをArray型にキャストするために用います。

// 配列
let ary = Array.from([1,2,3]);
console.log(ary);// [1, 2, 3]

// Set
let set = Array.from(new Set(["a",2,{}]));
console.log(set);// ["a", 2, Object {}]

// Map
let map_ = Array.from(new Map([[1,2], ["a", 3]]));
console.log(map_);// [[1, 2], ["a", 3]]

// String
let str = Array.from("Array");
console.log(str);// ["A", "r", "r", "a", "y]

ちなみに反復可能なオブジェクトなら変換可能なので、前回記事で扱った<input type='file'>でイベントリスナーを登録したときに取得できるFileListオブジェクトもArray.fromで配列に変換できます。

HTML
<input id="input_file" type="file" multiple/>
JS
function onChange(event) {
  // 複数選択したファイルをFileList型オブジェクトとして取得->Arrayに変換
  let files = Array.from(event.target.files);
  //  ...
}
document.getElementById("input_file").addEventListener('change', onChange, false);