Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Array.from()

Array.from() 静的メソッドは、反復可能オブジェクトや配列風オブジェクトからシャローコピーされた、新しい Array インスタンスを生成します。

配列ES2015

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
Array.from
45
12
32
9
45
9
TypedArray.from

TypedArray.from() メソッドは、配列風オブジェクトや反復可能オブジェクトから新しい型付き配列を生成します。このメソッドは Array.from() とほぼ同じです。
45
12
38
10
45
10
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
// NodeList → Array
const divs = Array.from(document.querySelectorAll('div'));

// String → Character array
Array.from('Hello'); // ['H', 'e', 'l', 'l', 'o']

// With mapping
Array.from({ length: 5 }, (_, i) => i * 2);
// [0, 2, 4, 6, 8]

ライブデモ

文字列から配列を生成

文字列の各文字を要素に持つ配列を生成します。

プレビュー全画面表示

Set から配列を生成

重複のない Set オブジェクトを配列に変換します。

プレビュー全画面表示

マッピング関数を利用

生成と同時に各要素を加工（例：インデックスに基づく生成）します。

プレビュー全画面表示

実務での使いどころ

  • Array.from() の活用

    Array.from() 静的メソッドは、反復可能オブジェクトや配列風オブジェクトからシャローコピーされた、新しい Array インスタンスを生成します。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク