querySelectorAllしてmapしたいとき[...すると短い

表示中のHTMLから情報を雑に抜き出して利用するため，ブラウザのデベロッパツールなどでquerySelectorAllしてmapしたい．しかし，querySelectorAllはNodeListを返すので，mapするにはArrayに変換する必要がある．

NodeListをArrayに変換するときに短く書く方法ないですかって同僚に聞いたらいろいろ教えてもらえたのでメモ．

Array.prototype.slice.callする

オーソドックスな手法．昔からこれを書いていて，長くて困っていた．最近はアロー関数を使えるのでちょっと短くなったけど長い．

Array.prototype.slice.call(document.querySelectorAll('a')).map(a => a.href)

[].slice.callする

Array.prototypeのかわりに[]で書く．ちょっと短い．

[].slice.call(document.querySelectorAll('a')).map(a => a.href)

Array.fromする

最近はこれで書けると教えてもらった．[].sliceと文字数変わらないけど，こちらのほうが宣言的な気がする．

Array.from(document.querySelectorAll('a')).map(a => a.href)

Array.from() メソッドは、配列型 (array-like) オブジェクトや反復可能 (iterable) オブジェクトから新しい Array インスタンスを生成します。
Array.from() - JavaScript | MDN

[…する

スプレッド演算子を使った巧みな技．プロダクションのコードで使うことはなさそうだけど，デベロッパツールでちょっと書くくらいならこれが一番短くてよさそう．

[...document.querySelectorAll('a')].map(a => a.href)

developer.mozilla.org

---

調べたら同じような話題がstackoverflowで展開されていた．2010年の質問だけど，2015年になって，ES6ならこう書けるって回答がついていておもしろい．

stackoverflow.com

追記： $$

デベロッパツールではdocument.querySelectorAllは$$で呼べて，かつ返り値をArrayに変換してくれているので，直接map呼べるらしい．上記いろんな工夫は全くもって不要だった…

$$('a').map(a => a.href)

Arrayに変換してくれることはドキュメントに載ってないけど，たしかに返り値はArrayになっていた．

$$(selector) は、指定された CSS セレクターに一致する要素の配列を返します。このコマンドは、document.querySelectorAll() の呼び出しと同じです。
コマンドライン API リファレンス  |  Web  |  Google Developers

querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記

devtoolで書くなら、document.querySelectorAllはさらに$$に置き換えられそう / 最近のブラウザだとNodeListにmapとか生えてそう => mapはなくてforEachだけだった。($$はNodeListをArrayにしてくれてて勘違いしてしまった)

2017/04/19 12:19

追記(2): 最初からmap呼べばよい

いちどArrayに変換する必要はなくて，[].map.callにNodeListと関数を渡せばよい，というのも教えてもらった．たしかに．

[].map.call(document.querySelectorAll('a'), a => a.href)

querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記

• [javascript]
• [ES6]

アロー関数の存在をすっかり忘れていた(そっち！？)functionもreturnも省略できて楽だわー / 1,2番目の記法だとsliceするのは冗長。 [].map.call(document.querySelectorAll('a'), a => a.href) でOKです。

2017/04/19 13:04

追記(3): Array.fromの第二引数にmapFn渡せる

Array.fromに関数を渡すとmapしてくれるらしい．ふつうにドキュメントに書いてあったのでちゃんと読もう，という気になりました……

Array.from(document.querySelectorAll('a'), a => a.href)

mapFn
任意。配列のすべての要素に対して呼び出される Map 関数。
Array.from() - JavaScript | MDN

querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記

Array.fromの第二引数にコールバック関数を書いても良いのよ？（個人的にはそれなりに短く、分かり易い記述になるので好き）

2017/04/21 09:40