JavaScript の [].forEach.call() 関数に空の配列があるのはなぜですか?

JavaScript の [].forEach.call() 関数を理解する

[].forEach の興味深い使用方法に興味がありますか。 JavaScriptでcall()?その目的と機能について詳しく見てみましょう。

JavaScript では、配列には forEach と呼ばれる強力なメソッドがあり、これを使用すると、配列の各要素に対して操作を実行できます。ただし、場合によっては、forEach をノード リストに適用する前に空の配列が使用されるコードが発生することがあります。

コードの詳細

次の点を考慮してください。コード スニペット:

[].forEach.call(document.querySelectorAll('a'), function(el) {
  // Perform some operation on the current node
});

ここで何が起こっているのでしょうか?分解してみましょう:

• []: これは空の配列です。コード内では実際の目的はありません。この存在は、配列のプロトタイプである forEach メソッドへのアクセスを提供するだけです。
• forEach: forEach メソッドは、配列 (または配列のようなオブジェクト) 内の各要素を反復処理します。そして、要素、そのインデックス、配列自体の 3 つの引数を使用して、指定された関数を呼び出します。
• .call: .call メソッドは、指定された値を使用して関数を呼び出すために使用されます。 「これ」というキーワードです。この場合、forEach メソッドの "this" 値を空の配列から タグのリストに変更しています。これにより、関数はインデックスによって各 要素にアクセスできるようになります。

使用例

このコードがどのように機能するかをより深く理解するために例を見てみましょう。

const myNodeList = document.querySelectorAll('a');
[].forEach.call(myNodeList, function(el) {
  el.style.color = 'blue';
});

このコードでは:

• ページ上のすべての タグのノード リストを取得します。
• The [].forEach.call () メソッドは、「this」値を myNodeList に変更し、 要素に対して forEach メソッドを呼び出します。
• コールバック関数内で、el を使用して各 要素にアクセスし、そのスタイルを変更できます (この場合、色を青に変更します)。

ES6 の代替構文

ES6 (ECMAScript 2015) 以降では、より現代的で簡潔な構文同じ結果を得るために次の構文が存在します。

[...document.querySelectorAll('a')].forEach(el => {
  el.style.color = 'blue';
});

この更新された構文では、スプレッド演算子 (...) を使用してノード リストを配列に変換し、forEach を使用して反復できます。

結論

[].forEach.call() テクニックは、ノード リストなどの配列のようなオブジェクトに forEach メソッドを適用する簡潔で効果的な方法を提供します。この手法を利用すると、リスト内の各要素に対して簡単に操作を実行できます。ただし、最新の JavaScript では、スプレッド演算子のような代替構文がより洗練されたソリューションを提供する可能性があることに注意してください。

以上がJavaScript の [].forEach.call() 関数に空の配列があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。