arrays methods - Für-über einem Array in JavaScript?




push of (24)

Wie kann ich mit JavaScript alle Einträge eines Arrays durchlaufen?

Ich dachte, es wäre so etwas:

forEach(instance in theArray)

Wobei theArray mein Array ist, aber das scheint falsch zu sein.


Answers

Eine Methode, die Ihrer Idee am nächsten kommt, wäre die Verwendung Array.forEach()einer Clojure-Funktion, die für jedes Element des Arrays ausgeführt wird.

myArray.forEach(
  (item) => {
    // do something 
    console.log(item);
  }
);

Ein anderer praktikabler Weg wäre die Verwendung, Array.map()die auf dieselbe Weise funktioniert, aber auch mutatesjedes Element und gibt es wie folgt zurück:

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}

jQuery Weg mit $.map:

var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];

Wenn Sie ein Array durchlaufen möchten, verwenden Sie die standardmäßige dreiteilige for Schleife.

for (var i = 0; i < myArray.length; i++) {
    var arrayItem = myArray[i];
}

Sie können einige Leistungsoptimierungen erhalten, indem Sie myArray.length oder rückwärts iterieren.


TL; DR

  • Verwenden Sie kein for-in sei denn, Sie verwenden es mit Sicherheitsmaßnahmen oder wissen zumindest, warum es Sie beißen könnte.
  • Ihre besten Einsätze sind normalerweise

    • eine for-of Schleife (nur ES2015 +),
    • Array#forEach ( spec | MDN ) (oder dessen Verwandten und so) (nur ES5 +),
    • eine einfache altmodische for Schleife,
    • oder mit Schutzmaßnahmen.

Aber es gibt noch viel mehr zu entdecken, lesen Sie weiter ...

JavaScript verfügt über eine leistungsstarke Semantik für das Durchschleifen von Arrays und arrayähnlichen Objekten. Ich habe die Antwort in zwei Teile aufgeteilt: Optionen für echte Arrays und Optionen für Dinge, die nur arrayähnlich sind, wie z. B. das arguments , andere iterierbare Objekte (ES2015 +), DOM-Sammlungen usw.

Ich werde schnell feststellen, dass Sie die ES2015-Optionen jetzt auch auf ES5-Engines verwenden können, indem Sie ES2015 auf ES5 umstellen. Suche nach "ES2015 transpiling" / "ES6 transpiling" für mehr ...

Okay, schauen wir uns unsere Optionen an:

Für tatsächliche Arrays

In ECMAScript 5 ("ES5") stehen drei Optionen zur Verfügung, die derzeit am meisten unterstützte Version, und zwei weitere in ECMAScript 2015 ("ES2015", "ES6"):

  1. Verwenden Sie forEach und verwandte (ES5 +)
  2. Verwenden Sie eine einfache for Schleife
  3. for-in richtig verwenden
  4. for-of (implizit einen Iterator verwenden) (ES2015 +)
  5. Einen Iterator explizit verwenden (ES2015 +)

Einzelheiten:

1. Verwenden Sie forEach und verwandte

In einer vage modernen Umgebung (also nicht IE8), in der Sie Zugriff auf die von ES5 hinzugefügten Array Funktionen (direkt oder mithilfe von Polyfills) haben, können Sie forEach ( spec | MDN ) verwenden:

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

forEach akzeptiert eine Callback-Funktion und optional einen Wert, der beim Aufruf dieses Callbacks verwendet werden soll (oben nicht verwendet). Der Rückruf wird für jeden Eintrag im Array aufgerufen, und zwar in der Reihenfolge, in der nicht vorhandene Einträge in dünn besetzten Arrays übersprungen werden. Obwohl ich nur ein Argument oben verwendet habe, wird der Rückruf mit drei aufgerufen: Der Wert jedes Eintrags, der Index dieses Eintrags und ein Verweis auf das Array, über das Sie iterieren (falls Ihre Funktion es noch nicht zur Hand hat ).

Wenn Sie nicht veraltete Browser wie IE8 unterstützen (was NetApps im September 2016 mit etwas mehr als 4% Marktanteil zu verzeichnen hatte), können Sie forEach in einer allgemeinen Webseite ohne Shim verwenden. Wenn Sie veraltete Browser unterstützen müssen, können Sie das Shimming / Polyfilling forEach einfach ausführen (suchen Sie nach "es5 shim", um mehrere Optionen zu erhalten).

forEach hat den Vorteil, dass Sie keine Indizierungs- und Wertvariablen im übergeordneten Gültigkeitsbereich deklarieren müssen, da sie als Argumente für die Iterationsfunktion angegeben werden und daher genau diese Iteration betreffen.

Wenn Sie sich wegen der Laufzeitkosten für einen Funktionsaufruf für jeden Array-Eintrag Sorgen machen, sollten Sie dies nicht tun. blog.niftysnippets.org/2012/02/foreach-and-runtime-cost.html .

Darüber hinaus ist forEach die Funktion "Schleife durch sie alle". In ES5 wurden jedoch einige andere nützliche Funktionen definiert, um sich durch das Array zu bewegen und Funktionen auszuführen. Dazu gehören:

  • every (stoppt beim ersten Mal, wenn der Rückruf false oder etwas Falsey zurückgegeben wird)
  • some (stoppt die Schleife, wenn der Callback das erste Mal true oder etwas true zurückgibt)
  • filter (erstellt ein neues Array mit Elementen, bei denen die Filterfunktion " true zurückgibt und die Felder weglassen, bei denen " false ).
  • map (erstellt ein neues Array aus den vom Callback zurückgegebenen Werten)
  • reduce (baut einen Wert auf, indem der Callback wiederholt aufgerufen wird und vorherige Werte übergeben werden; siehe die Spezifikation für die Details; nützlich zum Summieren des Inhalts eines Arrays und vieler anderer Dinge)
  • reduceRight (wie reduce , aber absteigend statt aufsteigend)

2. Verwenden Sie eine einfache for Schleife

Manchmal sind die alten Wege die besten:

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}

Wenn sich die Länge des Arrays während der Schleife nicht ändert und es sich dabei um leistungsabhängigen Code handelt (unwahrscheinlich), kann eine etwas kompliziertere Version, die die Länge nach vorne zieht, ein wenig schneller sein:

var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}

Und / oder rückwärts zählen:

var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}

Bei modernen JavaScript-Engines ist es jedoch selten, dass Sie das letzte bisschen Saft herausholen müssen.

In ES2015 und höher können Sie Ihre Index- und Wertvariablen lokal für die for Schleife machen:

let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
}
//console.log(index); // Would cause "ReferenceError: index is not defined"
//console.log(value); // Would cause "ReferenceError: value is not defined"

Und wenn Sie das tun, wird nicht nur der value sondern auch der index für jede Schleifeniteration neu erstellt. Das bedeutet, dass im Schleifenkörper erstellte Abschlüsse einen Verweis auf den index (und den value ) beibehalten, die für diese bestimmte Iteration erstellt wurden:

let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        alert("Index is: " + index);
    });
}

Wenn Sie fünf Divs hatten, würden Sie "Index is: 0" erhalten, wenn Sie auf das erste geklickt haben, und "Index ist: 4", wenn Sie auf das letzte geklickt haben. Dies funktioniert nicht , wenn Sie var anstelle von let .

3. Verwenden Sie for-in richtig

Sie erhalten Leute, die Ihnen sagen, dass Sie for-in , aber dafür ist for-in nicht gedacht . for-in durchläuft die aufzählbaren Eigenschaften eines Objekts , nicht die Indizes eines Arrays. Die Bestellung ist nicht garantiert , auch nicht in ES2015 (ES6). ES2015 definiert eine Reihenfolge für Objekteigenschaften (über [[OwnPropertyKeys]] , [[Enumerate]] und Dinge, die sie wie Object.getOwnPropertyKeys ), definiert jedoch nicht , dass das for-in dieser Reihenfolge folgt. (Details in dieser anderen Antwort .)

Es kann jedoch insbesondere für spärliche Arrays nützlich sein, wenn Sie geeignete Sicherheitsmaßnahmen verwenden:

// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These are explained
        /^0$|^[1-9]\d*$/.test(key) &&    // and then hidden
        key <= 4294967294                // away below
        ) {
        console.log(a[key]);
    }
}

Beachten Sie die beiden Prüfungen:

  1. Dass das Objekt eine eigene Eigenschaft mit diesem Namen hat (nicht eine, die es von seinem Prototyp erbt) und

  2. Der Schlüssel ist eine numerische Basis-10-Zeichenfolge in seiner normalen Zeichenfolgenform und sein Wert ist <= 2 ^ 32 - 2 (was 4.294.967.294 ist). Woher kommt diese Nummer? Dies ist Teil der Definition eines Array-Index in der Spezifikation . Andere Zahlen (nicht ganze Zahlen, negative Zahlen, Zahlen größer als 2 ^ 32 - 2) sind keine Array-Indizes. Der Grund dafür ist 2 ^ 32 - 2 , weil der größte Indexwert um eins niedriger als 2 ^ 32 - 1 ist. Dies ist der maximale Wert, den ein Array haben kann. (Beispielsweise passt die Länge eines Arrays in eine vorzeichenlose 32-Bit-Ganzzahl.) (Stellt fest, dass RobG in einem Kommentar in meinem Blogbeitrag darauf hingewiesen hat, dass mein vorheriger Test nicht ganz richtig war.)

Dies ist ein kleines bisschen zusätzlicher Overhead pro Loop-Iteration bei den meisten Arrays. Wenn Sie jedoch ein spärliches Array haben, kann dies eine effizientere Schleifenmethode sein, da es nur Schleifen für tatsächlich vorhandene Einträge durchläuft. Für das obige Array wird beispielsweise eine Schleife dreimal ausgeführt (für die Schlüssel "0" , "10" und "10000" - denken Sie daran, dass es sich um Strings handelt), nicht um 10.001-mal.

Nun wollen Sie das nicht jedes Mal schreiben, deshalb könnten Sie dies in Ihr Toolkit aufnehmen:

function arrayHasOwnIndex(array, prop) {
    return array.hasOwnProperty(prop) && /^0$|^[1-9]\d*$/.test(prop) && prop <= 4294967294; // 2^32 - 2
}

Und dann würden wir es so verwenden:

for (key in a) {
    if (arrayHasOwnIndex(a, key)) {
        console.log(a[key]);
    }
}

Oder wenn Sie nur an einem Test für "gut genug für die meisten Fälle" interessiert sind, können Sie dies verwenden, aber obwohl es nahe ist, ist es nicht ganz richtig:

for (key in a) {
    // "Good enough" for most cases
    if (String(parseInt(key, 10)) === key && a.hasOwnProperty(key)) {
        console.log(a[key]);
    }
}

4. for-of (implizit einen Iterator verwenden) (ES2015 +)

ES2015 fügt JavaScript Iteratoren hinzu. Die einfachste Möglichkeit, Iteratoren zu verwenden, ist die neue for-of Anweisung. Es sieht aus wie das:

var val;
var a = ["a", "b", "c"];
for (val of a) {
    console.log(val);
}

Ausgabe:

a
b
c

Unter den Covers bekommt das einen Iterator aus dem Array und durchläuft es, um die Werte daraus zu erhalten. Dies hat nicht das Problem, das for-in , da es einen durch das Objekt (das Array) definierten Iterator verwendet, und Arrays definieren, dass ihre Iteratoren ihre Einträge durchlaufen (nicht ihre Eigenschaften). Im Gegensatz zu for-in in ES5 ist die Reihenfolge, in der die Einträge besucht werden, die numerische Reihenfolge ihrer Indizes.

5. Verwenden Sie einen Iterator explizit (ES2015 +)

Manchmal möchten Sie möglicherweise explizit einen Iterator verwenden. Sie können das auch tun, obwohl es viel klobiger als for-of . Es sieht aus wie das:

var a = ["a", "b", "c"];
var it = a.values();
var entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
}

Der Iterator ist ein Objekt, das der Iterator-Definition in der Spezifikation entspricht. Die next Methode gibt bei jedem Aufruf ein neues Ergebnisobjekt zurück . Das Ergebnisobjekt verfügt über eine Eigenschaft done , die uns sagt, ob es fertig ist, und einen Eigenschaftswert mit dem Wert für diese Iteration. ( done ist optional, wenn es false , value ist optional, wenn es undefined .)

Die Bedeutung des value variiert je nach Iterator. Arrays unterstützen (mindestens) drei Funktionen, die Iteratoren zurückgeben:

  • values() : Dies ist das, das ich oben verwendet habe. Sie gibt einen Iterator zurück, wobei jeder value der Array-Eintrag für diese Iteration ist ( "a" , "b" und "c" im vorherigen Beispiel).
  • keys() : Gibt einen Iterator zurück, bei dem jeder value der Schlüssel für diese Iteration ist (für unser a oben wäre dies "0" , dann "1" , dann "2" ).
  • entries() : Gibt einen Iterator zurück, bei dem jeder value ein Array in der Form [key, value] für diese Iteration ist.

Für Array-ähnliche Objekte

Abgesehen von echten Arrays gibt es auch Array-ähnliche Objekte mit einer length Eigenschaft und Eigenschaften mit numerischen Namen: NodeList Instanzen, das arguments Objekt usw. Wie durchlaufen wir deren Inhalte?

Verwenden Sie eine der obigen Optionen für Arrays

Zumindest einige, möglicherweise die meisten oder sogar alle der oben genannten Array-Ansätze treffen häufig gleichermaßen auf Array-ähnliche Objekte zu:

  1. Verwenden Sie forEach und verwandte (ES5 +)

    Die verschiedenen Funktionen in Array.prototype sind "absichtlich generisch" und können normalerweise auf Array-ähnliche Objekte über den Function#call Function#apply oder Function#apply angewendet werden. (Am Ende dieser Antwort finden Sie die Vorsichtsmaßnahmen für vom Host bereitgestellte Objekte. Dies ist jedoch ein seltenes Problem.)

    Angenommen, Sie wollten forEach für die childNodes Eigenschaft eines Node childNodes . Sie würden das tun:

    Array.prototype.forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
    

    Wenn Sie dies häufig tun, möchten Sie möglicherweise eine Kopie der Funktionsreferenz in eine Variable zur Wiederverwendung packen, z.

    // (This is all presumably in some scoping function)
    var forEach = Array.prototype.forEach;
    
    // Then later...
    forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
    
  2. Verwenden Sie eine einfache for Schleife

    Offensichtlich gilt eine einfache for Schleife für Array-ähnliche Objekte.

  3. for-in richtig verwenden

    for-in mit den gleichen Sicherheitsvorkehrungen wie bei einem Array sollte auch mit Array-artigen Objekten funktionieren; der Vorbehalt für vom Host bereitgestellte Objekte in # 1 oben kann zutreffen.

  4. for-of (implizit einen Iterator verwenden) (ES2015 +)

    for-of verwendet den vom Objekt bereitgestellten Iterator (falls vorhanden); Wir müssen sehen, wie dies mit den verschiedenen Array-ähnlichen Objekten spielt, insbesondere den vom Host zur Verfügung gestellten. Beispielsweise wurde die Spezifikation für die NodeList aus querySelectorAll zur Unterstützung der Iteration aktualisiert. Die Spezifikation für die HTMLCollection von getElementsByTagName war nicht.

  5. Einen Iterator explizit verwenden (ES2015 +)

    Siehe Nummer 4, wir müssen sehen, wie sich Iteratoren entwickeln.

Erstellen Sie ein echtes Array

In anderen Fällen möchten Sie möglicherweise ein Array-ähnliches Objekt in ein echtes Array konvertieren. Das ist überraschend einfach:

  1. Verwenden Sie die slice Methode von Arrays

    Wir können die slice Methode von Arrays verwenden, die wie die anderen oben genannten Methoden "absichtlich generisch" ist und daher mit arrayähnlichen Objekten wie folgt verwendet werden kann:

    var trueArray = Array.prototype.slice.call(arrayLikeObject);
    

    Wenn Sie beispielsweise eine NodeList in ein echtes Array konvertieren möchten, können Sie NodeList tun:

    var divs = Array.prototype.slice.call(document.querySelectorAll("div"));
    

    Siehe die Warnung für vom Host bereitgestellte Objekte unten. Beachten Sie insbesondere, dass dies in IE8 und früheren Versionen fehlschlagen wird. In diesem Fall dürfen Sie keine vom Host bereitgestellten Objekte verwenden.

  2. Spread-Syntax verwenden ( ... )

    Es ist auch möglich, die Spread-Syntax von ES2015 mit JavaScript-Engines zu verwenden, die diese Funktion unterstützen:

    var trueArray = [...iterableObject];
    

    Wenn wir zum Beispiel eine NodeList in ein echtes Array konvertieren wollen, wird dies mit der Spread-Syntax recht knapp:

    var divs = [...document.querySelectorAll("div")];
    
  3. Verwenden Sie Array.from (spec) | (MDN)

    Array.from (ES2015 +, jedoch leicht polyfilled) erstellt ein Array aus einem Array-ähnlichen Objekt, wobei die Einträge optional zuerst durch eine Zuordnungsfunktion geleitet werden. So:

    var divs = Array.from(document.querySelectorAll("div"));
    

    Oder wenn Sie ein Array der Tag-Namen der Elemente mit einer bestimmten Klasse erhalten möchten, verwenden Sie die Mapping-Funktion:

    // Arrow function (ES2015):
    var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
    
    // Standard function (since `Array.from` can be shimmed):
    var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
        return element.tagName;
    });
    

Vorbehalt für vom Host bereitgestellte Objekte

Wenn Sie Array.prototype Funktionen mit vom Host bereitgestellten, Array.prototype Objekten (DOM-Listen und andere vom Browser bereitgestellte Dinge anstelle der JavaScript-Engine) verwenden, müssen Sie unbedingt in Ihren Zielumgebungen testen, um sicherzustellen, dass der vom Host bereitgestellte verfügbar ist Objekt verhält sich richtig. Die meisten verhalten sich jetzt richtig , aber es ist wichtig zu testen. Der Grund ist, dass die meisten Array.prototype Methoden, die Sie wahrscheinlich verwenden möchten, auf das vom Host bereitgestellte Objekt angewiesen sind, das eine ehrliche Antwort auf die abstrakte Operation [[HasProperty]] . Zum gegenwärtigen Zeitpunkt tun Browser dies sehr gut, aber die 5.1-Spezifikation erlaubte die Möglichkeit, dass ein vom Host bereitgestelltes Objekt nicht ehrlich ist. In §8.6.2 , mehrere Absätze unterhalb der großen Tabelle am Anfang dieses Abschnitts) heißt es:

Host-Objekte können diese internen Methoden auf beliebige Weise implementieren, sofern nicht anders angegeben. Eine Möglichkeit ist beispielsweise, dass [[Get]] und [[Put]] für ein bestimmtes Host-Objekt zwar Eigenschaftswerte [[HasProperty]] und speichern, [[HasProperty]] immer false generiert.

(Ich konnte das entsprechende Wort nicht in der ES2015-Spezifikation finden, aber es ist wahrscheinlich immer noch der Fall.) Wieder einmal schreiben die üblichen, vom Host bereitgestellten, NodeList Objekte in modernen Browsern [beispielsweise NodeList Instanzen] [[HasProperty]] richtig behandeln, aber es ist wichtig zu testen.)


Wenn es Ihnen nichts ausmacht, das Array zu leeren:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

xenthält den letzten Wert von yund wird aus dem Array entfernt. Sie können auch verwenden, shift()welche das erste Element ausgeben und entfernen wird y.


ECMAScript5 (die Version auf Javascript), um mit Arrays zu arbeiten.

forEach - Durchläuft jedes Element im Array und führt mit jedem Element alles durch, was Sie benötigen.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

In diesem Fall ist der Betrieb des Arrays mit einer eingebauten Funktion interessanter.

map - Erstellt ein neues Array mit dem Ergebnis der Rückruffunktion. Diese Methode eignet sich gut, wenn Sie die Elemente Ihres Arrays formatieren müssen.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

verkleinern - Wie der Name sagt, wird das Array auf einen einzelnen Wert reduziert, indem die angegebene Funktion im currenct-Element und das Ergebnis der vorherigen Ausführung übergeben wird.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

every - Gibt true oder false zurück, wenn alle Elemente des Arrays den Test in der Rückruffunktion bestehen.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - Sehr ähnlich zu jedem, außer dass filter ein Array mit den Elementen zurückgibt, die true für die angegebene Funktion zurückgeben.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

Hoffe das wird nützlich sein.


Ich weiß, dass dies ein alter Beitrag ist, und es gibt bereits so viele großartige Antworten. Für ein bisschen mehr Vollständigkeit dachte ich, ich würde eine andere mit AngularJS einwerfen . Dies gilt natürlich nur, wenn Sie Angular verwenden. Natürlich möchte ich es trotzdem sagen.

angular.forEachnimmt 2 Argumente und ein optionales drittes Argument. Das erste Argument ist das Objekt (Array), über das iteriert werden soll, das zweite Argument ist die Iteratorfunktion und das optionale dritte Argument ist der Objektkontext.

Es gibt verschiedene Möglichkeiten, die forEach-Schleife zu verwenden. Das einfachste und wahrscheinlich am meisten verwendete ist

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

Eine andere Möglichkeit zum Kopieren von Elementen von einem Array in ein anderes ist die

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

Sie müssen das jedoch nicht tun, Sie können einfach Folgendes tun und entspricht dem vorherigen Beispiel:

angular.forEach(temp, function(item) {
    temp2.push(item);
});

Nun gibt es Vor- und Nachteile, die angular.forEachFunktion im Gegensatz zur eingebauten Vanille- forSchleife zu verwenden.

Pros

  • Einfache Lesbarkeit
  • Einfache Beschreibbarkeit
  • Wenn verfügbar, angular.forEachwird die ES5 forEach-Schleife verwendet. Nun werde ich im Cons-Bereich effizienter arbeiten, da die forEach-Schleifen viel langsamer sind als die for-Schleifen. Ich erwähne dies als Profi, weil es schön ist, konsequent und standardisiert zu sein.

Betrachten Sie die folgenden 2 geschachtelten Schleifen, die genau dasselbe tun. Nehmen wir an, wir haben 2 Arrays von Objekten und jedes Objekt enthält ein Array von Ergebnissen, von denen jedes eine Value-Eigenschaft hat, die eine Zeichenfolge ist (oder was auch immer). Nehmen wir an, wir müssen jedes Ergebnis durchlaufen und wenn sie gleich sind, führen Sie eine Aktion aus:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

Zugegeben, dies ist ein sehr einfaches hypothetisches Beispiel, aber ich habe mit dem zweiten Ansatz dreifach eingebettete Schleifen geschrieben, und es war sehr schwer zu lesen und zu schreiben.

Cons

  • Effizienz angular.forEachund das Native forEachsind beide so viel langsamer als die normale forSchleife ... etwa 90% langsamer . Halten Sie sich daher für große Datensätze am besten an die native forSchleife.
  • Keine Unterbrechung, Fortsetzung oder Rückgabe der Unterstützung. continuewird eigentlich von " accident " unterstützt, um in einer angular.forEacheinfach fortzufahren, fügen Sie eine return;Anweisung in die Funktion ein, angular.forEach(array, function(item) { if (someConditionIsTrue) return; });die dazu führt, dass sie für diese Iteration aus der Funktion heraus fortgesetzt wird. Dies ist auch auf die Tatsache zurückzuführen, dass der native forEachweder break noch weiter unterstützt.

Ich bin sicher, dass es auch andere Vor-und Nachteile gibt, und fügen Sie bitte alles hinzu, was Sie für richtig halten. Unter dem Strich denke ich, wenn Sie Effizienz brauchen, bleiben Sie bei der nativen forSchleife für Ihre Schleifenanforderungen. Wenn Ihre Datensätze jedoch kleiner sind und eine gewisse Effizienz in Kauf genommen werden kann, um Lesbarkeit und Schreibbarkeit zu erhalten, werfen Sie auf jeden Fall einen angular.forEachin diesen bösen Jungen.


Die Lambda-Syntax funktioniert normalerweise nicht in IE 10 oder darunter.

Ich benutze normalerweise die

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});

Schleife rückwärts

Ich denke, die umgekehrte for-Schleife verdient hier eine Erwähnung:

for (var i = array.length; i--; ) {
     // process array[i]
}

Vorteile:

  • Es ist nicht erforderlich, eine temporäre len Variable zu deklarieren oder bei jeder Iteration mit array.length zu vergleichen. array.length kann eine Minute-Optimierung sein.
  • Das Entfernen von Geschwistern aus dem DOM in umgekehrter Reihenfolge ist normalerweise effizienter . (Der Browser muss weniger Elemente in seinen internen Arrays verschieben.)
  • Wenn Sie das Array während des Loops am oder nach dem Index i ändern (z. B. entfernen oder fügen Sie ein Element im array[i] ), würde eine Vorwärtsschleife das Element, das sich nach links in Position i verschoben hat, überspringen oder das i erneut verarbeiten der Punkt, der nach rechts verschoben wurde. In einer traditionellen for-Schleife könnten Sie i aktualisieren, um auf das nächste Element zu verweisen, das bearbeitet werden muss - 1. Die Umkehrung der Iteration ist jedoch oft einfacher und eleganter .
  • Wenn Sie verschachtelte DOM-Elemente ändern oder entfernen, kann eine umgekehrte Verarbeitung Fehler vermeiden . Ziehen Sie beispielsweise in Betracht, die innerHTML eines übergeordneten Knotens zu ändern, bevor Sie die untergeordneten Knoten behandeln. Wenn der untergeordnete Knoten erreicht ist, wird er vom DOM getrennt und durch ein neu erstelltes untergeordnetes Element ersetzt, als das innerHTML des übergeordneten Objekts geschrieben wurde.
  • Es ist kürzer zu tippen und zu lesen als einige der anderen verfügbaren Optionen. Obwohl es für forEach() und für ES6 for ... of verliert.

Nachteile:

  • Es verarbeitet die Artikel in umgekehrter Reihenfolge. Wenn Sie aus den Ergebnissen ein neues Array erstellen oder Dinge auf dem Bildschirm drucken, wird die Ausgabe natürlich in Bezug auf die ursprüngliche Reihenfolge umgekehrt .
  • Das wiederholte Einfügen von Geschwistern als erstes Kind in das DOM, um ihre Bestellung beizubehalten, ist weniger effizient . (Der Browser müsste die Dinge immer nach rechts verschieben.) Um DOM-Knoten effizient und in der richtigen Reihenfolge zu erstellen, müssen Sie nur vorwärts und normal anhängen (und auch ein "Dokumentfragment" verwenden).
  • Die umgekehrte Schleife ist für junge Entwickler verwirrend . (Abhängig von Ihrem Ausblick kann dies als Vorteil angesehen werden.)

Soll ich es immer benutzen?

Einige Entwickler verwenden standardmäßig die umgekehrte for-Schleife, es sei denn, es gibt einen guten Grund, Vorwärtsschleifen durchzuführen.

Obwohl die Leistungssteigerungen in der Regel unbedeutend sind, schreien sie:

"Tun Sie dies einfach mit jedem Artikel in der Liste, die Reihenfolge ist mir egal!"

In der Praxis ist dies jedoch kein verlässlicher Hinweis auf die Absicht, da es von den Gelegenheiten nicht zu unterscheiden ist, wenn Sie sich für die Reihenfolge interessieren und wirklich eine Umkehrung durchführen müssen. In der Tat wäre ein anderes Konstrukt erforderlich, um die Absicht "egal" genau auszudrücken, etwas, das derzeit in den meisten Sprachen nicht verfügbar ist, einschließlich ECMAScript, das jedoch beispielsweise forEachUnordered() .

Wenn die Reihenfolge keine Rolle spielt und die Effizienz ein Problem darstellt (in der innersten Schleife einer Spiel- oder Animations-Engine), kann es akzeptabel sein, die umgekehrte for-Schleife als Ihr Einstiegsmuster zu verwenden. Denken Sie daran, dass das Sehen einer umgekehrten for-Schleife in vorhandenem Code nicht unbedingt bedeutet, dass die Reihenfolge irrelevant ist!

Es ist besser, forEach () zu verwenden.

Generell empfehle ich für höherstufige Codes, bei denen Klarheit und Sicherheit von größter Bedeutung sind, die Verwendung von Array::forEach als Standardmuster:

  • Es ist klar zu lesen.
  • Es zeigt an, dass ich nicht innerhalb des Blocks verschoben werde (was immer eine mögliche Überraschung ist, die sich lange for und while Schleifen versteckt.)
  • Es gibt Ihnen einen Freiraum für Schließungen.
  • Es reduziert das Austreten lokaler Variablen und versehentlicher Kollision mit (und Mutation) äußerer Variablen.

Wenn Sie in Ihrem Code die umgekehrte for-Schleife sehen, ist dies ein Hinweis darauf, dass sie aus gutem Grund umgekehrt wird (vielleicht einer der oben beschriebenen Gründe). Wenn Sie eine traditionelle For-For-Schleife sehen, kann dies darauf hindeuten, dass das Schalten stattfinden kann.

(Wenn die Diskussion der Absicht für Sie keinen Sinn ergibt, könnten Sie und Ihr Code von Crockfords Vorlesung über Programmierstil & Ihr Gehirn profitieren.)

Wie funktioniert es?

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

Sie werden feststellen, dass i-- die mittlere Klausel ist (wo wir normalerweise einen Vergleich sehen) und die letzte Klausel leer ist (wo wir normalerweise i++ ). Das bedeutet, dass i-- auch als Bedingung für die Fortsetzung verwendet wird. Entscheidend ist, dass es vor jeder Iteration ausgeführt und geprüft wird.

  • Wie kann es bei array.length ohne zu explodieren?

    Da i-- vor jeder Iteration ausgeführt wird, greifen wir bei der ersten Iteration tatsächlich auf das Element array.length - 1 zu. array.length - 1 werden Probleme mit undefined Array-out-of-bounds- Elementen vermieden.

  • Warum hört es nicht auf, vor Index 0 zu iterieren?

    Die Schleife i-- zu iterieren, wenn die Bedingung i-- einen Falsey-Wert ergibt (wenn sie 0 ergibt).

    Der Trick ist, dass der --i i-- Operator im Gegensatz zu --i i verringert, aber den Wert vor dem Dekrement ergibt. Ihre Konsole kann dies demonstrieren:

    > var i = 5; [i, i--, i];

    [5, 5, 4]

    Bei der letzten Iteration war ich vorher 1 und der i-- Ausdruck ändert ihn in 0 , ergibt aber tatsächlich 1 (wahrheitsgemäß), und so geht die Bedingung vorüber. Bei der nächsten Iteration ändert sich i-- in -1 , ergibt aber 0 (falsey), wodurch die Ausführung sofort aus dem unteren Ende der Schleife fällt.

    In der traditionellen Forwards-for-Schleife sind i++ und ++i austauschbar (wie Douglas Crockford herausstellt). In der umgekehrten for-Schleife müssen wir jedoch, da unser Dekrement auch unser Bedingungsausdruck ist, bei i-- wenn wir das Element am Index 0 verarbeiten wollen.

Trivia

Manche Leute ziehen gerne einen kleinen Pfeil auf der Rückseite for Schleife und enden mit einem Augenzwinkern:

for (var i = array.length; i --> 0 ;) {

Credits gehen an WYL, weil sie mir die Vorzüge und Schrecken der umgekehrten for-Schleife gezeigt haben.


Ab ES6:

list = [0, 1, 2, 3]
for (let obj of list) {
    console.log(obj)
}

Where ofvermeidet die mit Kuriositäten verknüpften Eigenheiten inund lässt sie wie die forSchleife einer anderen Sprache arbeiten und letbindet sich iinnerhalb der Schleife und nicht innerhalb der Funktion.

Die Klammern ( {}) können weggelassen werden, wenn nur ein Befehl vorhanden ist (z. B. im obigen Beispiel).


Wahrscheinlich ist die for(i = 0; i < array.length; i++)Schleife nicht die beste Wahl. Warum? Wenn du das hast:

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

Die Methode ruft von array[0]an auf array[2]. Erstens referenziert dies zunächst Variablen, die Sie nicht einmal haben, zweitens würden Sie die Variablen nicht im Array haben, und drittens wird der Code dadurch mutiger. Schau mal, es ist was ich benutze:

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

Und wenn Sie möchten, dass es sich um eine Funktion handelt, können Sie Folgendes tun:

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

Wenn Sie brechen wollen, etwas mehr Logik:

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

Beispiel:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

Es gibt zurück:

//Hello
//World
//!!!

Wenn Sie die jQuery Bibliothek verwenden, können Sie jQuery.each :

$.each(yourArray, function(index, value) {
  // do your stuff here
});

BEARBEITEN:

Wie pro Frage möchte der Benutzer Code in Javascript anstelle von jquery, so dass die Bearbeitung erfolgt

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

Es gibt keine eingebaute Fähigkeit zum Einbruch forEach. Um die Ausführung zu unterbrechen, verwenden Sie das folgende Array#someBild:

[1,2,3].some(function(number) {
    return number === 1;
});

Dies funktioniert, weil sometrue zurückgegeben wird, sobald einer der in Array-Reihenfolge ausgeführten Callbacks true zurückgibt, was die Ausführung des Restes kurzschließt. Original Antwort Array Prototyp sehen some


Es gibt drei Implementierungen foreachin jQuery wie folgt.

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3

Bearbeiten : Diese Antwort ist hoffnungslos veraltet. Um einen moderneren Ansatz zu erhalten, sehen Sie sich die verfügbaren Methoden für ein Array an . Methoden von Interesse könnten sein:

  • für jeden
  • Karte
  • Filter
  • Postleitzahl
  • reduzieren
  • jeden
  • etwas

Die Standardmethode zum Durchlaufen eines Arrays in JavaScript ist eine Vanille for -loop:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

Beachten Sie jedoch, dass dieser Ansatz nur dann gut ist, wenn Sie ein dichtes Array haben und jeder Index von einem Element belegt wird. Wenn das Array spärlich ist, können Sie bei diesem Ansatz auf Leistungsprobleme stoßen, da Sie viele Indizes durchlaufen, die im Array nicht wirklich vorhanden sind. In diesem Fall könnte eine for .. in Schleife eine bessere Idee sein. Sie müssen jedoch die entsprechenden Sicherheitsvorkehrungen verwenden, um sicherzustellen, dass nur die gewünschten Eigenschaften des Arrays (d. for..in Der Array-Elemente) berücksichtigt werden, da der for..in -loop auch in älteren Browsern aufgelistet wird Eigenschaften sind als enumerable definiert.

In ECMAScript 5 gibt es eine forEach-Methode für den Array-Prototyp, die in älteren Browsern jedoch nicht unterstützt wird. Um es konsistent nutzen zu können, müssen Sie entweder über eine Umgebung verfügen, die es unterstützt (z. B. Node.js für serverseitiges JavaScript), oder eine "Polyfill" verwenden. Das Polyfill für diese Funktionalität ist jedoch trivial und da es den Code leichter lesbar macht, ist es ein guter Polyfill.


Dies ist ein Iterator für eine Liste mit wenig Sparen, bei der der Index bei 0 beginnt. Dies ist das typische Szenario, wenn mit document.getElementsByTagName oder document.querySelectorAll gearbeitet wird.

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

Anwendungsbeispiele:

Beispiel 1

var arr = [];
[1, 2, 3].each( function(a){ a.push( this * this}, arr);
arr = [1, 4, 9]

Beispiel # 2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

Jedes p-Tag erhält class="blue"

Beispiel # 3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

Jedes zweite p-Tag wird class="red">

Beispiel # 4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

Und schließlich werden die ersten 20 blauen p-Tags in grün geändert

Vorsicht bei der Verwendung von Zeichenfolge als Funktion: Die Funktion wird außerhalb des Kontextes erstellt und sollte nur verwendet werden, wenn Sie sich sicher sind, dass der Bereich der Variablen sicher ist. Andernfalls sollten Sie Funktionen besser übergeben, bei denen das Scoping intuitiver ist.


Eine forEach Implementierung ( siehe in jsFiddle ):

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);

Mit Loops mit ES6 destructuring und Verbreitung Betreiber

Die Umstrukturierung und die Verwendung des Spread-Operators haben sich für Neueinsteiger von ES6 als von Menschen lesbarer / ästhetischer als recht nützlich erwiesen, auch wenn einige Javascript-Veteranen dies als unordentlich ansehen, Junioren oder andere Personen dies für nützlich halten.

In den folgenden Beispielen werden for...ofAnweisung und .forEachMethode verwendet.

Beispiele 6, 7 und 8 können mit beliebigen Funktionsschleifen verwendet werden , wie .map, .filter, .reduce, .sort, .every, .some, für weitere Informationen zu diesen Methoden Besuche das Array - Objekt .

Beispiel 1: Normale for...ofSchleife - hier keine Tricks.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

Beispiel 2: Wörter in Zeichen aufteilen

let arrFruits = ['apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

Beispiel 3: Schleifen mit a keyundvalue

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

Beispiel 4: Objekteigenschaften inline abrufen

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

Beispiel 5: Erhalten Sie tiefe Objekteigenschaften von dem, was Sie benötigen

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

Beispiel 6: Wird Beispiel 3 mit verwendet.forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

Beispiel 7: Wird Beispiel 4 mit verwendet.forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

Beispiel 8: Wird Beispiel 5 mit verwendet.forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});


Einige C Stilsprachen verwenden foreach , um Enumerationen zu durchlaufen. In JavaScript geschieht dies mit der for..in Schleifenstruktur :

var index,
    value;
for (index in obj) {
    value = obj[index];
}

Es gibt einen Haken. for..in durchläuft jedes der for..in des Objekts und die Mitglieder des Prototyps. Um das Lesen von Werten zu vermeiden, die durch den Prototyp des Objekts vererbt werden, prüfen Sie einfach, ob die Eigenschaft zu dem Objekt gehört:

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

Darüber hinaus hat ECMAScript 5 eine forEach Methode zu Array.prototype hinzugefügt, Array.prototype der ein Array mithilfe eines Calbacks aufgezählt werden kann (die Polyfill-Datei befindet sich in den Dokumenten und kann daher auch für ältere Browser verwendet werden):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

Beachten Sie, dass Array.prototype.forEach nicht Array.prototype.forEach wird, wenn der Rückruf false zurückgibt. jQuery und Underscore.js bieten jeweils eigene Variationen, um Schleifen bereitzustellen, die kurzgeschlossen werden können.


Es gibt verschiedene Möglichkeiten , ein Array in JavaScript zu durchlaufen:

für - es ist das allgemeinste. Vollständiger Code-Block für das Looping

var languages = ["JAVA", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

while - Schleife, wenn eine Bedingung erfüllt ist. Es scheint die schnellste Schleife zu sein

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

do / while - Durchläuft auch einen Codeblock, solange die Bedingung erfüllt ist. Es wird mindestens einmal ausgeführt

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;
<p id="example"></p>

Funktionsschleifen - forEach, map, filter, auch reduce(sie Schleife durch die Funktion, sondern verwendet , wenn Sie etwas mit Ihrem Array tun müssen, usw.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>

Weitere Informationen und Beispiele zur funktionalen Programmierung von Arrays finden Sie im Blogbeitrag Funktionale Programmierung in JavaScript: Zuordnen, Filtern und Reduzieren .


Sie können forEach wie folgt anrufen:

var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})

Element hat den Wert jedes Index von 0 bis zur Länge des Arrays.

Ausgabe:

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

Erklärung:

forEach ist in der Prototypenklasse. Sie können dies auch als theArray.prototype.forEach (...) bezeichnen.

Prototyp: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

Sie können auch ein Array wie folgt ändern:

1    
3    
2

Ich möchte dies auch als Komposition einer umgekehrten Schleife und als Antwort oben für jemanden hinzufügen, der auch diese Syntax möchte.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

Pros:

Der Vorteil dabei: Sie haben die Referenz bereits im ersten Like, die später nicht mit einer anderen Zeile deklariert werden muss. Es ist praktisch, wenn Sie das Objektarray durchlaufen.

Nachteile:

Dies wird unterbrochen, wenn der Verweis falsch ist (falscher Wert usw.). Es kann jedoch als Vorteil genutzt werden. Es würde jedoch das Lesen etwas schwieriger machen. Und je nach Browser kann es "nicht" optimiert werden, um schneller als der ursprüngliche zu arbeiten.


underscore.js

Verwenden Sie den Unterstrich, es ist klein und ...

sortBy_.sortBy (Liste, Iterator, [Kontext]) Gibt eine sortierte Kopie der Liste zurück, sortiert in aufsteigender Reihenfolge nach den Ergebnissen der Ausführung jedes Werts durch den Iterator. Iterator kann auch der Name der Eigenschaft sein, nach der sortiert werden soll (z. B. length).

var objs = [ 
  { first_nom: 'Lazslo',last_nom: 'Jamf' },
  { first_nom: 'Pig', last_nom: 'Bodine'  },
  { first_nom: 'Pirate', last_nom: 'Prentice' }
];

var sortedObjs = _.sortBy( objs, 'first_nom' );




javascript arrays loops foreach iteration