web-dev-qa-db-ja.com

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

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

測定値に基づいて、次のオプションのいずれかを使用します。

[...nodelist].filter

または

Array.from(nodelist).filter

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

javascriptarraysfilterecmascript-6nodelist
47
Christophe
  • [...nodelist]は、オブジェクトが反復可能な場合、オブジェクトの配列を作成します。
  • Array.from(nodelist)は、オブジェクトが反復可能な場合はオブジェクトから配列を作成しますまたはオブジェクトが配列に似ている場合（.lengthおよび数値小道具）

NodeList.prototype[Symbol.iterator]が存在する場合、2つの例はイテラブルをカバーするため、2つの例は同一です。ただし、NodeListが反復可能なように環境が構成されていない場合、最初の例は失敗し、2番目の例は成功します。 Babel現在 このケースを適切に処理しない 。

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

76
loganfsmyth

TL; DR;

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

Slice（）メソッドは配列を返します。返される配列は、コレクション（NodeList）の浅いコピーですしたがって、** Array.from（）**よりも高速に動作します

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

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

引数に関する簡単な説明

Array.prototype.slice（beginIndex、endIndex）

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

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

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

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

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

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

4
goweon