表示中の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)
調べたら同じような話題がstackoverflowで展開されていた.2010年の質問だけど,2015年になって,ES6ならこう書けるって回答がついていておもしろい.