読者です 読者をやめる 読者になる 読者になる

hitode909の日記

趣味はマリンスポーツですの日記です

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