Array.fromの活用術

JavaScriptで、配列を作るのに使えるArray.fromというメソッドがありますが、これにはいろんな使い方があります。

引数に指定できるオブジェクト

Array.from(obj)とできるオブジェクトには、大きく分けて2種類あります。

• iterable
• 配列のようなオブジェクト

iterable

最初のiterableとは、[Symbol.iterator]メソッドを持つものです（for-ofに使えるもの、と言っても同じです）。配列そのものやMap、Setといったデータ構造、document.querySelectorAll()で得られるNodeList、さらには文字列もiterableなので、Array.fromに投げ込むことができます。

配列をArray.fromで処理した場合、配列がコピーされる効果以外に、疎な配列をundefinedで埋める、という動作も行います。Array(10)で長さだけ決めた配列は、要素が空となってforEachが1回も回らない、みたいなことになりますが、Array.from(Array(10))として作成された配列は全部undefinedで埋まり、forEachも各要素ごとに実行されるようになります。

ただし、この機能性については[...obj]と書いても同様に動くので、Array.fromを呼ぶまでもないかもしれません。

配列のようなオブジェクト

曖昧な表現のように見えて「配列のようなオブジェクト」はJavaScriptの技術用語となっていて、「非負整数のlengthプロパティを持つオブジェクト」を意味します。たとえば、jQueryの$()で生成されるオブジェクトもこの種のものです。

極端な話、lengthさえあればいいので、Array.from({length: 10})と書いても動作します（{length: 10}[0]などはundefinedなので、undefinedが10個入った配列が出来上がります）¹。こちらはスプレッド構文では動作しません。

第2引数に関数を渡す

さらに、Array.fromには第2引数として関数を渡すことができます。この場合、

• 引数：値、配列のインデックスの2つ
• 返り値：配列に入れたい値

のように実行されます。結果としてはArray.fromで得られた配列をmapするのと同じではあるのですが、いったん配列を作らなくて済むので効率的です。

1. Array.from(Array(10))のほうが文字数が短いですし、Arrayが2回現れるので圧縮をかける上ではさらに有利と思われます。 ↩