Eingehende Analyse der JS-Array-Traversalmethode (empfohlen)

Freunde, die Underscore verwendet haben, wissen, dass es eine sehr vollständige API hat, um den Durchgang von Arrays (Sets) zu bezeichnen, und _.each () ist einer von ihnen. Hier ist ein einfaches Beispiel:

 var arr = [1, 2, 3, 4, 5]; _. jeweils (arr, function (el) {console.log (el);});

Der obige Code gibt wiederum 1, 2, 3, 4, 5 aus. Ist es nicht sehr interessant? Sie müssen nicht einmal selbst eine für Schleife schreiben. Die Methode _.each () ist für Traverse -Arrays sehr nützlich, aber ihre interne Implementierung ist überhaupt nicht schwierig. Schauen wir uns an, wie _.each () implementiert ist. Schauen wir uns vorher die API von _.each () an. _.each () wird allgemein wie folgt bezeichnet:

_.each (arr, fn, Kontext);

Es empfängt 3 Parameter,

Das erste ist ein Array, das durchquert werden muss (tatsächlich ist es auch möglich, ein Objekt zu sein, also lassen Sie uns dies später diskutieren).

Die zweite ist die Rückruffunktion (diese Rückruffunktion kann in 3 Parameter übergeben, wie z.

Der dritte ist der Kontext, an den die Rückruffunktion gebunden sein muss, dh diesen Wert der Rückruffunktion Fn.

Ok, die Bedürfnisse sind sehr klar, lass uns arbeiten!

Implementieren wir zunächst den einfachsten _.each (), der den Kontext nicht ändern kann und zwei Parameter empfängt. Der Code ist wie folgt:

 var _ = {}; // Angenommen, das ist die Unterstrahlung // Die einfachste Implementierung der _.each method_.each = function (arr, fn) {for (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr; // Geben Sie das ursprüngliche Array zurück} zurück

Wie wäre es damit? Ist es nicht sehr einfach? Verwenden Sie einfach eine für Schleife und rufen Sie die Rückruffunktion weiter auf. Es kann in nur wenigen Codezeilen erfolgen. Ich glaube, keine Freunde können es verstehen! Testen wir es, um festzustellen, ob es normal funktioniert:

 var arr = [1, 2, 3, 4, 5]; _. jeweils (arr, function (el, i, arr) {console.log (el);});

Öffnen im Browser und in der Konsole wird die richtige Ausgabe angezeigt.

Ein so einfacher Code hat überhaupt keine Bedeutung. Schauen wir uns ein herausforderndes Beispiel an. Zum Beispiel hat Array ARR eine Summeneigenschaft. Wir müssen alle Elemente des Arrays zusammenfassen und sie in der Summe speichern, wie folgt:

 var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // Das Summeattribut wird verwendet, um die Summe der Array -Elemente zu speichern.

Zu diesem Zeitpunkt wird dies in der Rückruffunktion verwendet. Wenn es nicht gebunden ist, ist dies standardmäßig ein Fenster. Das wollen wir nicht. Wir hoffen, dass es an das Array arr gebunden ist. Anruf oder Anwendung kann diese Funktion implementieren, der Code ist wie folgt:

 var _ = {}; // Angenommen, dies ist der Unterstrich // Binden Sie zwei Parameter Fn und Kontext // Bindfest an die Kontext var bind = Funktion (fn, context) {context = context || Null; Rückgabefunktion (el, i, arr) {fn.call (Kontext, El, i, arr); }} // _.eeach_.each = function (arr, fn, context) {// rufen Sie die Bind -Methode auf und binden Sie Fn an den Kontext fn = bind (fn, Kontext); für (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr;} // Testfall: var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // Das Summeattribut wird verwendet, um die Summe der Array -Elemente zu speichern. // 15

OK, dies ist bereits leistungsstark genug, um das Array normalerweise durch das Array zu iterieren, und Sie können diesen Wert auch nach Belieben angeben, um den Kontext der Rückruffunktion zu ändern. Wie wir bereits erwähnt haben, kann Underscore's _.each () auch Objekte durchqueren, und diese Implementierung ist nicht schwierig. Beurteilen Sie einfach, ob der erste in übergebene Parameter ein Objekt oder ein Array ist. Wenn es sich um ein Array handelt, iterieren Sie wie wir. Wenn es sich um ein Objekt handelt, verwenden Sie das Objekt für ... in der Schleifenquelle. Wenn Sie interessiert sind, können Sie es selbst ausprobieren oder den Quellcode von Unterstrich ansehen.

Hinweis: Da der ES5 -Standard native Arrays bereits durchquerische Methoden wie Array.Prototype.foreach, Array.Prototype.MAP usw. haben, können im Projekt native native verwendet werden.

Die oben genannte ist die vollständige Beschreibung der eingehenden Analyse der vom Editor eingeführten JS-Array-Traversal-Methode (empfohlen). Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!