JavaScript で `.forEach.call()` で空の配列を使用する理由

JavaScript の [].forEach.call() の動作を理解する

forEach メソッドの前に空の配列があるこの型破りなコード スニペットは、開発者を困惑させてきました。 。それがどのように機能するかを詳しく見てみましょう。

空の配列 - 配列プロトタイプにアクセスするためのトリック

空の配列は独特の目的を果たします。それは、.forEach のような配列プロトタイプへのアクセスを提供します。配列を直接使用すると、Array.prototype.forEach.call(...); を明示的に記述する必要がなく、この機能が得られます。

forEach - カスタマイズによる反復

forEach は、次の関数です。別の関数を入力として受け取ります。配列のようなオブジェクト (ノード リストなど) の各要素に対して、次の 3 つの引数を渡します:

• 要素自体
• 要素のインデックス
• 配列のようなオブジェクトへの参照

.call - このコンテキストの変更

.call メソッドを使用すると、特定の this コンテキストで関数を呼び出すことができます。この場合、内部関数の this をノード リストでオーバーライドし、関数がインデックスによって要素にアクセスできるようにします。

例

次のように考えます:

[1,2,3].forEach.call( document.querySelectorAll('a'), function(el) { /* logic */ });

このコードは、空の配列を使用して .forEach プロトタイプにアクセスし、ノード リストを forEach に渡し、各 を反復処理します。

関数型プログラミングの問題を暴く

この手法の使用は手動ループに比べて洗練されていないと主張する人もいますが、実際には役に立ちます。要素またはインデックス情報にアクセスする際に、外部の世界 (DOM など) を複数回変更する必要がある場合の目的。

ES6 以降の最新のソリューション

最新の JavaScript バージョンと次のようなツールを使用Babel さん、...rest 演算子と Spread 演算子を使用すると、同様の機能をよりきれいに実現できます。ただし、配列プロトタイプへのアクセスに空の配列を使用すること、および .call を使用してこのコンテキストを変更するという基本原則は引き続き重要です。

以上がJavaScript で `.forEach.call()` で空の配列を使用する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。