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

表示中の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のかわりに[]で書く．ちょっと短い

[Pasta-K]

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

[teramako]

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

[n2s]

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

[mtugb-main]

いつも for of を使ってたのが短くなってコーディングが速くなった

[youko03]

スプレッド演算子プロダクションだとだめなのはなぜだろ

[AirReader]

$$まじか

[teckl]

普段全く触ってないところなので短い書き方が無限にあって異次元に迷い込んだ感覚ｗ

[naari_3]

「そうなんだ〜」って記事呼んでる途中で4回言った

[gachapining]

$$ ってブラウザの実装によって Array が返るものと Array-Like Object (NodeList) が返るものとあって扱いに気をつけていたような記憶があるのだけど。/ DevTools 上でしか利用できないし気にするほどではないか。

[raimon49]

Array.from() + アロー演算子が1番平易で良い気がする。スプレッド演算子って後から読み返したら何やってるか理解できなさそう。

[side_tana]

$$ 便利だし使おうと思ったけど、開発者ツールからポチポチ選んで $0 で渡すときアーってなってスプレッド演算子使った

[tyru]

DevTool の $$ って勝手に Array.from() してくれるのか

[yug1224]

$$便利だ！

[love0hate]

$$!? しらなかった...

[miki_bene]

JSでNodeListをmapしたくてArrayに変換するのみんな通る道っぽいしいい加減変換を意識しないやり方を模索したい