ES6でノードリストをフィルタリングまたはマップする

Question 1

ES6でノードリストをフィルタリングまたはマップする最も効率的な方法は何ですか？

私の読書に基づいて、私は次のオプションのいずれかを使用します：

[...nodelist].filter

または

Array.from(nodelist).filter

どちらをお勧めしますか？そして、たとえば配列を使用せずに、より良い方法はありますか？

Question 2

[...nodelist] オブジェクトが反復可能である場合、オブジェクトから配列を作成します。
Array.from(nodelist)オブジェクトが反復可能である場合、またはオブジェクトが配列に似ている場合（has.lengthおよびnumeric props）、オブジェクトから配列を作成します

NodeList.prototype[Symbol.iterator]どちらの場合も反復可能であるため、2つの例が存在する場合は同じになります。NodeListただし、環境が反復可能なように構成されていない場合、最初の例は失敗し、2番目の例は成功します。Babel現在、このケースを適切に処理していません。

したがって、NodeList反復可能である場合、使用するのは本当にあなた次第です。私はおそらくケースバイケースで選ぶでしょう。利点の1つArray.fromは、マッピング関数の2番目の引数を取るのに対し、最初の引数は[...iterable].map(item => item)一時配列を作成するArray.from(iterable, item => item)必要があることです。ただし、リストをマッピングしていない場合は問題ありません。

Question 3

TL; DR;

Array.prototype.slice.call(nodelist).filter

スライス（）メソッドは配列を返します。返される配列は、コレクション（NodeListの）の浅いコピーがあること、それはより速く動作しますのでArray.from（） 、それは限り速く動作しますので）（Array.from

元のコレクションの要素は、次のように返された配列にコピーされます。

オブジェクト参照（実際のオブジェクトではない）の場合、sliceはオブジェクト参照を新しい配列にコピーします。元の配列と新しい配列の両方が同じオブジェクトを参照しています。参照されるオブジェクトが変更された場合、その変更は新しい配列と元の配列の両方に表示されます。
文字列、数値、ブール値（String、Number、およびBooleanオブジェクトではない）の場合、sliceは値を新しい配列にコピーします。一方の配列の文字列、数値、またはブール値を変更しても、もう一方の配列には影響しません。

議論に関する簡単な説明

Array.prototype.slice（beginIndex、endIndex）

オプションの引数beginIndexおよびendIndexを取ります。それらが提供されていない場合、スライスはbeginIndex == 0を使用するため、コレクションからすべてのアイテムが抽出されます

Array.prototype.slice.call（namespace、beginIndex、endIndex）

最初の引数としてオブジェクトを取ります。コレクションをオブジェクトとして使用する場合、文字通り、そのオブジェクトから直接スライスメソッドを呼び出すことを意味しますnamespace.slice（）

Question 4

NodeListで直接使用する参照を見つけましたmap

Array.prototype.map.call(nodelist, fn)

私はそれをテストしていませんが、NodeListに直接アクセスする必要があるため、これがより高速であると考えられます。

Question 5

これはどう：

// Be evil. Extend the prototype.
if (window.NodeList && !NodeList.prototype.filter) {
  NodeList.prototype.filter = Array.prototype.filter;
}

// Use it like you'd expect:
const noClasses = document
  .querySelectorAll('div')
  .filter(div => div.classList.length === 0)

これは、NodeList.forEachのMDNドキュメント（「Polyfill」の下）に記載されているのと同じアプローチであり、IE11、Edge、Chrome、およびFFで機能します。