Array.prototype.forEach.callで要素リストのイテレーション


またまた、HTML5 テクニックバイブルで知ったことのメモ。

今まで、document.querySelectorAllや開発者ツールのコンソールの$$($$はdocument.querySelectorAllと同じ動き)で取得した要素リストを巡回するのに、面倒だと思いながらも下記のように書いていました。

上記はページ内にあるaタグのhref属性内(つまり、リンク先)を一覧としてコンソールに表示するコードです。いちいち要素の長さを取得してループする回数を指定しなきゃいけなくて正直面倒だと思ってました。jQueryみたいにリストの数を意識せずにループすることができないもんかとずっと思っていたのですが、先日、下記のように書くことで上記と同じ動きをすることが発覚。

Array.prototype.forEach.callという長い構文を覚えなければいけませんが、これなら要素の数を意識せずにループすることができるようです。

ちなみに、forEachをmapにし、console.logをreturnとすると、href属性が入った配列が返される。

コメントを残す

メールアドレスが公開されることはありません。