querySelectorAllによって返された擬似配列に対してforEachを使用するにはどうすればよいですか？

Question

プレーンJavaScriptで素敵な何かがdocument.querySelectorAllによって返された項目に、forEach、map、filter、などを使用できるようになり、document.getElementsBy*など

This'dはjQueryのにはあまり依存し、単にクリーンなコードにつながります。今、これは醜いやり方で私たちがやり遂げる方法です：

[].forEach.call(document.querySelectorAll(sel), function(el) { 
}); 

これは冗長です。

forEachなどの要素をすぐに返すことができる方法はありますか？

Answer 1

素朴な方法は、あなたがChromeでテストした場合は、これを行うには、次のようになります。

NodeList.prototype.forEach = Array.prototype.forEach; 

これは動作します。 WebkitについてFirefoxではそうはしません。 FFはHTMLCollection ...

私が見つけた最もクロスブラウザの道を返すので：

NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach; 

それはIE8で動作すると、オブジェクトをホストするプロパティを追加するとき、彼らはチョークので、しかし低下しませんプロトタイプ。

全リスト：

NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach; 
NodeList.prototype.map = HTMLCollection.prototype.map = Array.prototype.map; 
NodeList.prototype.filter = HTMLCollection.prototype.filter = Array.prototype.filter; 
NodeList.prototype.reduce = HTMLCollection.prototype.reduce = Array.prototype.reduce; 
NodeList.prototype.reduceRight = HTMLCollection.prototype.reduceRight = Array.prototype.reduceRight; 
NodeList.prototype.every = HTMLCollection.prototype.every = Array.prototype.every; 
NodeList.prototype.some = HTMLCollection.prototype.some = Array.prototype.some; 

それとも、私たちの愛するBergiを喜ばせるために（そしてそれがクリーナーですので、また）：

['forEach', 'map', 'filter', 'reduce', 'reduceRight', 'every', 'some'].forEach(
    function(p) { 
    NodeList.prototype[p] = HTMLCollection.prototype[p] = Array.prototype[p]; 
}); 

がperfectionkillsへのリンクを考えると、それはそこにほとんど無関係です。問題は、DOMが拡張されたときにブラウザでほとんど同じように動作していないことです。この変更はIE < = 8を除くすべてのブラウザで正常です。

Answer 2

function forEach(a, fn) { 
    return [].forEach.call(a, fn); 
}; 

forEach(document.querySelectorAll(sel), function(el) { 
}); 

そして、もっと多く：

function map(a, fn) { 
    return [].map.call(a, fn); 
}; 
function filter(a, fn) { 
    return [].filter.call(a, fn); 
}; 
function reduce(a, fn) { 
    return [].reduce.call(a, fn); 
}; 
function reduceRight(a, fn) { 
    return [].reduceRight.call(a, fn); 
}; 
function every(a, fn) { 
    return [].every.call(a, fn); 
}; 
function some(a, fn) { 
    return [].some.call(a, fn); 
}; 

たぶんあなたには、いくつかの状況で

[].slice.call(a) 

が必要になります。

function forEach(a, fn) { 
    return [].forEach.call([].slice.call(a), fn); 
} 

Answer 3

あなたはプロトタイプを変更したいとして、すべてのアレイの機能はそれだけのアレイにあなたのコレクションを変換する方が簡単な場合があり、仕事だけしたくない場合は、次の

Array.from(document.querySelectorAll('a')) 

すべての配列の機能が利用できるようになりますJavaScriptの新バージョンがリリースされたときにコードを更新する必要はありません：

Array.from(document.querySelectorAll('a')).forEach(a => console.log(a))