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

Array.from()

Array.from() は配列風オブジェクト（NodeList, arguments 等）やイテラブル（Map, Set, 文字列等）から新しい Array インスタンスを生成します。マッピング関数も指定可能です。

配列ES2015

概要

Array.from() は配列風オブジェクト（NodeList, arguments 等）やイテラブル（Map, Set, 文字列等）から新しい Array インスタンスを生成します。マッピング関数も指定可能です。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
javascript.builtins.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]

ライブデモ

String from array generate

String. eachcharacter element to hasarray generate..

プレビュー全画面表示

Set from array generate

Duplicates. Set object array to convert..

プレビュー全画面表示

mappingfunction use

generate and simultaneous to eachelement (example: index to generate)..

プレビュー全画面表示

実務での使いどころ

  • Array.from() の活用

    配列風オブジェクトやイテラブルから新しい配列を生成する静的メソッド。

注意点

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

アクセシビリティ

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

参考リンク

Powered by web-features