Array.fromは配列風オブジェクトや反復可能オブジェクトから配列を作る標準組み込み関数です。
主な使い道1 イテレータからの変換
javascriptでは、mapやreduceと言った便利な高階関数がArrayにしか標準実装されていない割に、
MapやSetと言った組み込みオブジェクトから要素を順番に取り出そうとすると大体イテレータや列挙可能オブジェクト経由です。
(それ自体は良い抽象化だと思うんですが、whileとかfor ofになるのが辛い)
イテレータを配列に変換したい場合がしばしばあります。
const array = Array.from(someIterator);
そのような場合このようなコードでイテレータから変換が可能です。
(終了するイテレータに限る。また内部的にイテレータを回すので、引数で渡したイテレータは使用済みになります)
主な使い道2 配列風オブジェクトからの配列の生成
ただ、上記のイテレータの変換だけなら、スプレッド構文でも同じことが可能です。
const array = [...someIterator];
しかし、配列風オブジェクトからの配列の生成はこちらでしかできません。
配列風オブジェクトとは？
javascriptにおいて、配列風オブジェクトとは以下の要素を満たすオブジェクトです。
- lengthプロパティを持っている
- 数値で添え字アクセス可能
1のlengthは数値でないと正しく動きませんが、2については返すものがundefinedでもいいので、以下のようなコードも動きます。
const array = Array.from({length:3});//[undefined,undefined,undefined]
先日、new Array(数値)で作った配列はundefinedすら入らないので使いにくいという記事を書きましたが、
この方法ならundefinedが詰まった任意の長さの配列を作ることが出来るため高階関数との組み合わせも問題ありません。
それどころか、Array.from自体が第二引数としてmap用のコールバック引数を受けてくれます。
const array = Array.from({length:100},(_,i) => i + 1);//1から100までの配列
まとめ
- Array.fromで配列風オブジェクトや列挙可能オブジェクトから配列を作ることが出来る。
- 任意の長さの配列(undefined入り)を使ったり即mapをかけることも可能。