表示中の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
追記(2): 最初からmap呼べばよい
いちどArrayに変換する必要はなくて,[].map.callにNodeListと関数を渡せばよい,というのも教えてもらった.たしかに.
[].map.call(document.querySelectorAll('a'), a => a.href)
追記(3): Array.fromの第二引数にmapFn渡せる
Array.fromに関数を渡すとmapしてくれるらしい.ふつうにドキュメントに書いてあったのでちゃんと読もう,という気になりました……
Array.from(document.querySelectorAll('a'), a => a.href)
mapFn
任意。配列のすべての要素に対して呼び出される Map 関数。
Array.from() - JavaScript | MDN