【JavaScript ECMAScript】Array::Array.from静的メソッドの使い方
Array.from()静的メソッドの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
Array.from()メソッドは、配列ライクなオブジェクトや反復可能なオブジェクトから新しいArrayインスタンスを生成するメソッドです。このメソッドを使用すると、HTMLコレクションやNodeList、Setオブジェクト、Mapオブジェクト、または文字列など、直接Arrayではないものの、要素を繰り返し処理できるデータ構造を、本物の配列に変換できます。
第一引数には、配列に変換したいオブジェクト（例えば、インデックスとlengthプロパティを持つオブジェクトや、for...ofループで反復可能なオブジェクト）を指定します。
さらに、第二引数としてオプションでマップ関数を指定することも可能です。このマップ関数は、新しい配列に格納される各要素に対して一度ずつ実行され、変換された値を新しい配列の要素として返します。マップ関数を指定した場合、その関数内でthisとして使用する値を第三引数で指定することもできます。
Array.from()は、これらの引数に基づいて新しいArrayインスタンスを作成し、それを戻り値として返します。この処理は元のオブジェクトを変更せず、常に新しい配列を生成します。開発者が様々なデータソースから柔軟に配列を作成したい場合に非常に役立つため、JavaScriptでのデータ操作において重要なメソッドの一つです。
公式リファレンス: Array.from()
構文(syntax)
1Array.from(arrayLike);
引数(parameters)
arrayLike, mapFn, thisArg
- arrayLike: Array.from() メソッドの基となる、配列風オブジェクトまたはイテラブルオブジェクト
- mapFn: (オプション) 各要素に対して実行されるマッピング関数
- thisArg: (オプション) mapFn を実行する際に this として使用される値
戻り値(return)
Array
配列ライクなオブジェクトまたはイテラブルオブジェクトから新しいArrayインスタンスを生成します。