JavaScript NodeList を配列に変換する最速の方法

このチュートリアルでは、JavaScript NodeList を Array に変換する最速の方法を学びます。 NodeList は配列のような構造であり、DOM (Document Object Model) 要素のコレクションです。ただし、「map( )」、「filter( )」、「slice( )」などの配列メソッドは NodeList オブジェクトでは使用できません。

NodeList を Array に変換する方法はたくさんありますが、このタスクは次の 2 つの方法を使用するとより速く完了できます -

• for ループを反復処理することで

• Array.from( ) 関数を使用する

for ループを繰り返すことによって

JavaScript では、for ループを使用して NodeList を反復処理し、特定のタスクを実行するすべての要素を取得できます。したがって、NodeList を反復処理することにより、配列内の NodeList のすべての要素をコピーします。

＃＃＃文法＃＃＃ リーリー

nodeList の長さを変数に保存し、そのサイズの配列を宣言します。配列サイズがわかっている場合は、固定サイズの配列を宣言することをお勧めします。次に、for ループを使用して配列に値を割り当てます。

＃＃＃アルゴリズム＃＃＃

ステップ 1

- nodeList の長さを len 変数に保存します。

• ステップ 2
- サイズ len の配列を宣言します。

• ステップ 3
- for ループで、カウンター変数 "i" を値 0 で初期化します。

• ステップ 3.1
- 「i」が len と等しくなるまでループを繰り返します。

• ステップ 3.2
- 更新条件で、「i」を 1 ずつ増やします。

• ステップ 3.3
- for ループ本体で、NodeList の i 番目のインデックスの値を配列の i 番目のインデックスに割り当てます。

• ＃＃＃例＃＃＃ 次の例では、Document メソッド document.querySelectorAll() を使用して、タイプ セレクター "div" の NodeList を取得します。この NodeList を配列に変換しています。

  リーリー 上記のコードでは、for ループを使用して NodeList から実際の配列を作成していることがわかります。 const を使用して NodeList の長さを「len」に保存し、サイズ「len」の配列を宣言します。これにより、操作が高速化されます。

「div」要素が 3 つあります。したがって、出力に示されているように、サイズ 3 の配列が得られます。

Array.from() 関数を使用する

このメソッドは、反復可能オブジェクトまたは配列のようなオブジェクトの Array インスタンスを作成するために使用できます。配列と同様の構造を持つ NodeList を変換しています。

#ES6

(ECMAScript 6) を使用すると、Array.from() 関数を使用して NodeList から配列を非常に簡単に取得できます。 NodeList を反復処理したくないが、単に変換したい場合は、これが最も速い方法になります。

＃＃＃文法＃＃＃ リーリー

ここでは、Document メソッドの document.querySelectorAll() を使用して、タイプ セレクター "p" の NodeList を作成します。この NodeList をパラメータとして Array.from() 関数に渡します。この関数は配列を返します。配列に変換するのに必要なコードは 1 行だけなので、覚えやすく、理解しやすいです。

＃＃＃例＃＃＃

次の例では、タイプ セレクター "p" の NodeList を作成します。 Array.from() 関数を使用して、この NodeList を配列に変換します。

リーリー 上記の出力では、2 つの「p」要素を含む配列を取得したことがわかります。したがって、NodeList は 1 回の関数呼び出しだけで正常に配列に変換されます。

注

- 上記の方法は、すべての最新のブラウザでうまく動作しますが、古いブラウザでは正しく動作しない可能性があります。

NodeList を Array に変換する方法を学びました。 1 つ目の方法は、NodeList を反復処理して for ループを使用することです。 2 番目の方法は、Array.from() メソッドを使用することです。ユーザーが NodeList を反復処理するのではなく、変換するだけの場合は、Array.from() メソッドを使用することをお勧めします。

以上がJavaScript NodeList を配列に変換する最速の方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。