18

プレーンなJavaScriptの優れた点は、などによって返されるアイテムに、、、などを使用できることforEachですmap。filterdocument.querySelectorAlldocument.getElementsBy*

これにより、jQueryへの依存度が低くなり、コードがよりクリーンになります。今のところ、これは私たちが醜い方法でそれを行う方法です：

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

これは...冗長です。

forEach返された要素をすぐに使用できるようにする方法はありますか？

4

4 に答える 4

14

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;

または、私たちの愛するベルギを喜ばせるために（そしてそれがよりきれいだから）：

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

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

于 2012-12-19T17:00:00.073 に答える
6 
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);
}
于 2012-12-19T18:43:41.603 に答える
2

プロトタイプを変更するのが好きではなく、すべての配列関数を正しく機能させたい場合は、コレクションを配列に変換する方が簡単な場合があります。

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

すべての配列関数が使用可能になります。新しいバージョンのJavaScriptがリリースされたときにコードを更新する必要はありません。

Array.from(document.querySelectorAll('a')).forEach(a => console.log(a))
于 2016-06-21T10:08:02.630 に答える
0

forEach変換せずに直接使用できるようになりました

https://developer.mozilla.org/en-US/docs/Web/API/NodeList

于 2019-03-11T22:26:32.753 に答える