Ich versuche, ein Array zu durchlaufen. Ich habe folgenden Code:

 var currnt_image_list= '21,32,234,223';
 var substr = currnt_image_list.split(','); // array here

Ich versuche, alle Daten aus dem Array zu bekommen. Kann mich bitte jemand auf den richtigen Weg führen?

(Update: Meine andere Antwort hier beschreibt die Nicht-jQuery-Optionen viel gründlicher. Die dritte Option unten jQuery.eachist jedoch nicht enthalten.)

Vier Optionen:

Generische Schleife:

var i;
for (i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

oder in ES2015 +:

for (let i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

Vorteile : Unkompliziert, keine Abhängigkeit von jQuery, leicht zu verstehen, keine Probleme mit der Beibehaltung der Bedeutung thisinnerhalb des Schleifenkörpers, kein unnötiger Overhead von Funktionsaufrufen (z. B. theoretisch schneller, obwohl dies tatsächlich erforderlich wäre haben so viele Elemente, dass die Chancen stehen, dass Sie andere Probleme haben würden; Details ).

ES5 forEach:

Ab ECMAScript5 verfügen Arrays über eine forEachFunktion, die das Durchlaufen des Arrays erleichtert:

substr.forEach(function(item) {
    // do something with `item`
});

Link zu Dokumenten

(Hinweis: Es gibt viele andere Funktionen, nicht nur forEach; Einzelheiten finden Sie in der oben genannten Antwort .)

Vorteile : Deklarativ, kann eine vorgefertigte Funktion für den Iterator verwenden, wenn Sie eine zur Hand haben. Wenn Ihr Schleifenkörper komplex ist, ist ider Umfang eines Funktionsaufrufs manchmal nützlich, ohne dass eine Variable in Ihrem enthaltenen Bereich erforderlich ist .

Nachteile : Wenn Sie mit thisim Code enthalten und die Sie verwenden möchten thisin Ihrem forEachRückruf, müssen Sie entweder A) Halten Sie es in einer Variablen , so können Sie es innerhalb der Funktion, B) als zweites Argument Pass verwenden , um forEachso forEachlegt es als thiswährend des Rückrufs oder C) Verwendung ein ES2015 + Funktion Pfeil , der über schließt this. Wenn Sie nicht eines dieser Dinge tun, in der Callback thiswird undefined(im Strict - Modus) oder das globale Objekt ( window) in losen Modus. Früher gab es einen zweiten Nachteil, forEachder nicht allgemein unterstützt wurde, aber hier im Jahr 2018 ist der einzige Browser, auf den Sie stoßen werden, der nicht vorhanden forEachist, IE8 (und er kann nicht richtig sein dort auch polygefüllt).

ES2015 + 's for-of:

for (const s of substr) { // Or `let` if you want to modify it in the loop body
    // do something with `s`
}

Weitere Informationen zur Funktionsweise finden Sie in der Antwort oben in dieser Antwort.

Vorteile : Einfach, unkompliziert, bietet eine Variable (oder Konstante oben) für den Eintrag aus dem Array.

Nachteile : Wird in keiner IE-Version unterstützt.

jQuery.each:

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

( Link zu Dokumenten )

Vorteile : Die gleichen Vorteile wie forEach, und Sie wissen, dass es da ist, da Sie jQuery verwenden.

Nachteile : Wenn Sie thisden enthaltenen Code verwenden, müssen Sie ihn in eine Variable einfügen, damit Sie ihn innerhalb der Funktion verwenden können, da thisdies etwas anderes innerhalb der Funktion bedeutet.

Sie können die thisSache jedoch vermeiden , indem Sie entweder Folgendes verwenden $.proxy:

jQuery.each(substr, $.proxy(function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}, this));

... oder Function#bind:

jQuery.each(substr, function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}.bind(this));

... oder in ES2015 ("ES6") eine Pfeilfunktion:

jQuery.each(substr, (index, item) => {
    // do something with `item` (`this` is the same as it was outside)
});

Was NICHT zu tun ist:

Nicht dafür verwenden for..in(oder wenn Sie dies tun, tun Sie dies mit angemessenen Sicherheitsvorkehrungen). Sie werden Leute sehen, die zu sagen (tatsächlich gab es hier kurz eine Antwort, die das sagt), aber for..innicht das tun, was viele Leute denken (es tut etwas noch Nützlicheres!). Durchläuft insbesondere for..indie aufzählbaren Eigenschaftsnamen eines Objekts (nicht die Indizes eines Arrays). Da Arrays Objekte sind und ihre einzigen aufzählbaren Eigenschaften standardmäßig die Indizes sind, scheint dies in einer langweiligen Bereitstellung meistens eine Art Arbeit zu sein. Aber es ist keine sichere Annahme, dass Sie es einfach dafür verwenden können. Hier ist eine Erkundung: http://jsbin.com/exohi/3

Ich sollte das "nicht" oben weicher machen. Wenn Sie es zu tun mit spärlichen Arrays (zB das Array 15 Elemente insgesamt aber ihre Indizes werden über den Bereich von 0 bis 150.000 aus irgendeinem Grunde gestreut, und so das lengthist 150.001), und wenn Sie verwenden geeignete Garantien wie hasOwnPropertyund Überprüfung der Der Eigenschaftsname ist wirklich numerisch (siehe Link oben). for..inDies kann ein vernünftiger Weg sein, um viele unnötige Schleifen zu vermeiden, da nur die aufgefüllten Indizes aufgelistet werden.

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

Array-Iteration

jQuery.each(array, function(Integer index, Object value){});

Objektiteration

jQuery.each(object, function(string propertyName, object propertyValue){});

Beispiel :

var substr = [1, 2, 3, 4];
$.each(substr , function(index, val) { 
  console.log(index, val)
});

var myObj = { firstName: "skyfoot"};
$.each(myObj, function(propName, propVal) {
  console.log(propName, propVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Javascript-Schleifen für Array

für Schleife

for (initialExpression; condition; incrementExpression)
  statement

Beispiel

var substr = [1, 2, 3, 4];

//loop from 0 index to max index
for(var i = 0; i < substr.length; i++) {
  console.log("loop", substr[i])
}

//reverse loop
for(var i = substr.length-1; i >= 0; i--) {
  console.log("reverse", substr[i])
}

//step loop
for(var i = 0; i < substr.length; i+=2) {
  console.log("step", substr[i])
}

für in

//dont really wnt to use this on arrays, use it on objects
for(var i in substr) {
    console.log(substr[i]) //note i returns index
}

für von

for(var i of subs) {
    //can use break;
    console.log(i); //note i returns value
}

für jedes

substr.forEach(function(v, i, a){
    //cannot use break;
    console.log(v, i, a);
})

Ressourcen

MDN-Schleifen und Iteratoren

Hier ist keine Abfrage erforderlich, nur eine forSchleife funktioniert:

var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
  alert(substr[i]);
}

Option 1: Die traditionelle forSchleife

Die Grundlagen

Eine traditionelle forSchleife besteht aus drei Komponenten:

1. Die Initialisierung: Wird ausgeführt, bevor der Look-Block zum ersten Mal ausgeführt wird
2. Die Bedingung: Überprüft jedes Mal eine Bedingung, bevor der Schleifenblock ausgeführt wird, und beendet die Schleife, wenn sie falsch ist
3. der nachträgliche Gedanke: wird jedes Mal ausgeführt, nachdem der Schleifenblock ausgeführt wurde

Diese drei Komponenten sind durch ein ;Symbol voneinander getrennt . Der Inhalt für jede dieser drei Komponenten ist optional, was bedeutet, dass Folgendes die minimalste forSchleife ist, die möglich ist:

for (;;) {
    // Do stuff
}

Natürlich müssen Sie ein if(condition === true) { break; } oder if(condition === true) { return; }irgendwo in diese forSchleife einfügen, damit sie nicht mehr läuft.

Normalerweise wird die Initialisierung jedoch verwendet, um einen Index zu deklarieren, die Bedingung wird verwendet, um diesen Index mit einem minimalen oder maximalen Wert zu vergleichen, und der nachträgliche Gedanke wird verwendet, um den Index zu erhöhen:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

Verwenden einer fortraditionellen Schleife zum Durchlaufen eines Arrays

Die traditionelle Art, ein Array zu durchlaufen, ist folgende:

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

Wenn Sie es vorziehen, rückwärts zu schleifen, gehen Sie folgendermaßen vor:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

Es sind jedoch viele Variationen möglich, wie z. dieses :

for (var key = 0, value = myArray[key], var length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... oder dieses ...

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

... oder dieses :

var key = 0, value;
for (; value = myArray[key++];){ 
    console.log(value);
}

Was am besten funktioniert, hängt hauptsächlich vom persönlichen Geschmack und dem spezifischen Anwendungsfall ab, den Sie implementieren.

Jede dieser Varianten wird von allen Browsern unterstützt, auch von sehr alten!

Option 2: Die whileSchleife

Eine Alternative zu einer forSchleife ist eine whileSchleife. Um ein Array zu durchlaufen, können Sie Folgendes tun:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

Wie herkömmliche for-loops werden while-loops auch von den ältesten Browsern unterstützt.

Außerdem kann jede while-Schleife als for-loop umgeschrieben werden . Zum Beispiel whileverhält sich die oben genannte Schleife genauso wie diese forSchleife:

for(var key = 0;value = myArray[key++];){
    console.log(value);
}

Option 3: for...inundfor...of

In JavaScript können Sie dies auch tun:

for (i in myArray) {
    console.log(myArray[i]);
}

Dies sollte jedoch mit Vorsicht angewendet werden, da es sich nicht forin allen Fällen wie eine traditionelle Schleife verhält und potenzielle Nebenwirkungen berücksichtigt werden müssen. Siehe Warum ist die Verwendung von "for ... in" mit Array-Iteration eine schlechte Idee?für mehr Details.

Als Alternative dazu for...ingibt es jetzt auch für for...of. Das folgende Beispiel zeigt den Unterschied zwischen einer for...ofSchleife und einer for...inSchleife:

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Sie müssen auch berücksichtigen, dass keine Version von Internet Explorer unterstützt for...of( Edge 12+ ) und dass for...inmindestens IE10 erforderlich ist.

Option 4: Array.prototype.forEach()

Eine Alternative zu For-loops ist Array.prototype.forEach()die folgende Syntax:

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});

Array.prototype.forEach() wird von allen modernen Browsern sowie von IE9 + unterstützt.

Option 5: jQuery.each()

Zusätzlich zu den vier anderen genannten Optionen hatte jQuery auch eine eigene foreach Variante.

Es verwendet die folgende Syntax:

$.each(myArray, function(key, value) {
    console.log(value);
});

Verwenden Sie die each()Funktion von jQuery.

Hier ist ein Beispiel:

$.each(currnt_image_list.split(','), function(index, value) { 
  alert(index + ': ' + value); 
});

Verwenden Sie jQuery each(). Es gibt andere Möglichkeiten, aber jede ist für diesen Zweck konzipiert.

$.each(substr, function(index, value) { 
  alert(value); 
});

Und setzen Sie das Komma nicht nach der letzten Zahl.

Sie können eine for()Schleife verwenden:

var things = currnt_image_list.split(','); 
for(var i = 0; i < things.length; i++) {
    //Do things with things[i]
}

ES6-Syntax mit Pfeilfunktion und Interpolation:

var data=["a","b","c"];
$(data).each((index, element) => {
        console.log(`current index : ${index} element : ${element}`)
    });

Versuche dies:

$.grep(array, function(element) {

})

Alternative Iterationsmethoden durch Array / String mit Nebenwirkungen

var str = '21,32,234,223';
var substr = str.split(',');

substr.reduce((a,x)=> console.log('reduce',x), 0)        // return undefined

substr.every(x=> { console.log('every',x); return true}) // return true

substr.some(x=> { console.log('some',x); return false})  // return false

substr.map(x=> console.log('map',x));                    // return array
 
str.replace(/(\d+)/g, x=> console.log('replace',x))      // return string