document.querySelectorAll の結果を map や reduce したい

JavaScript

document.querySelectorAll の結果は NodeList で、forEach はできるが map や reduce はできない。

例えば、いくつかのテキストボックスに入力された数字を合計したい場合、document.querySelectorAll の結果をスプレッド構文で配列にするとよさそう。

const sum = [...document.querySelectorAll('.foo')]
        .map(e => e.value)
        .reduce((acc, e) => acc + parseInt(e), 0)

(追記) ドキュメントに書いてあった...。

NodeList - Web API | MDN

メモ: NodeList は Array とは異なりますが、forEach() メソッドで処理を反復適用することは可能です。Array.from() を使うことで Array に変換することができます。