アンダースコアを使用した友人は、アレイのトラバーサル(セット)を呼び出すために非常に完全なAPIがあることを知っており、_.each()もその1つです。簡単な例を次に示します。
var arr = [1、2、3、4、5]; _。各(arr、function(el){console.log(el);});上記のコードは、順番に1、2、3、4、5を出力します。とても面白いですか?自分でループを書く必要さえありません。 _.each()メソッドは、配列を通過するのに非常に役立ちますが、内部実装はまったく難しくありません。 _.each()の実装方法を見てみましょう。この前に、_.each()のAPIを見てみましょう。 _.each()は通常、次のように呼ばれます。
_.each(arr、fn、context);
3つのパラメーターを受け取ります。
最初のものは、移動する必要がある配列です(実際、オブジェクトになることも可能ですので、後で説明しましょう)。
2番目はコールバック関数です(このコールバック関数は、それぞれ現在の要素、現在のインデックス、元の配列である関数(el、i、arr)などの3つのパラメーターを渡すことができます)。
3番目は、コールバック関数をバインドする必要があるコンテキスト、つまり、コールバック関数fnのこの値を指定する必要があるということです。
わかりました、ニーズは非常に明確です、仕事を始めましょう!
最初に最も単純な_.each()を実装しましょう。これは、このコンテキストを変更できず、2つのパラメーターを受信します。コードは次のとおりです。
var _ = {}; //それがアンダースコアであると仮定します} return arr; //元の配列を返します}それはどうですか?とても簡単ではありませんか? for loopを使用して、コールバック関数を呼び出し続けます。ほんの数行のコードで実行できます。友達はそれを理解できないと思います!それをテストして、それが正常に機能するかどうかを確認しましょう。
var arr = [1、2、3、4、5]; _。各(arr、function(el、i、arr){console.log(el);});ブラウザで開くとコンソールには、正しい出力が表示されます。
このような単純なコードには、まったく意味がありません。より挑戦的な例を見てみましょう。たとえば、配列ARRには合計プロパティがあります。次のように、配列のすべての要素を合計して合計で保存する必要があります。
var arr = [1、2、3、4、5]; arr.sum = 0; // sum属性は、配列要素の合計を保存するために使用されます。
この時点で、これはコールバック関数で使用されます。バインドされていない場合、これはデフォルトでウィンドウです。これは私たちが望むものではありません。アレイarrに縛られていることを願っています。呼び出しまたは適用はこの関数を実装できます。コードは次のとおりです。
var _ = {}; //これがアンダースコアであると仮定します// bind、2つのパラメーターfnとコンテキストを受信しますヌル; return function(el、i、arr){fn.call(context、el、i、arr); }} // _.each_.each = function(arr、fn、context){// bindメソッドを呼び出し、fnをコンテキストfn = bind(fn、context); for(var i = 0; i <arr.length; i ++){fn(arr [i]、i、arr); } return arr;} //テストケース:var arr = [1、2、3、4、5]; arr.sum = 0; // sum属性は、array elements_.eachの合計(arr、function(el、i、arr){this.sum += el;}、arr); console.log(arr.sum); // 15OK、この_.each()は、通常の配列を介して繰り返すほど強力であり、コールバック関数のコンテキストを変更するためにこの値を意志で指定することもできます。ただし、前述したように、Underscoreの_.each()もオブジェクトを通過する可能性があり、この実装は難しくありません。渡された最初のパラメーターがオブジェクトまたは配列であるかどうかを判断してください。それが配列の場合、私たちのように反復します。それ以外の場合、それがオブジェクトの場合、オブジェクトを使用して...ループトラバーサルで。興味がある場合は、自分で試してみるか、アンダースコアのソースコードをチェックしてください。
注:ES5標準であるため、ネイティブアレイには、array.prototype.foreach、array.prototype.mapなどなどのトラバーサル方法が既にあり、ネイティブの配列はプロジェクトで使用できます。
上記は、編集者によって導入されたJSアレイトラバーサル法(推奨)の詳細な分析の完全な説明です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!