it-swarm.com.de

Wie durch Array in jQuery Schleife?

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?

211
Rickstar

(Update: Mein andere Antwort hier legt die Nicht-jQuery-Optionen viel ausführlicher dar. Die dritte Option unten, _jQuery.each_, ist jedoch nicht enthalten.)


Vier Möglichkeiten:

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, einfach zu verstehen, keine Probleme bei der Beibehaltung der Bedeutung von this innerhalb des Schleifenkörpers, kein unnötiger Overhead von Funktionsaufrufen (z. B. in der Theorie schneller, obwohl Sie in der Tat so viele Elemente haben müssten, dass die Chancen stehen, dass Sie andere Probleme haben würden; Details ).

ES5 forEach:

Ab ECMAScript5 verfügen Arrays über eine forEach -Funktion, 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; siehe die Antwort, auf die oben verwiesen wird für Details.)

Vorteile: Deklarativ, kann eine vorgefertigte Funktion für den Iterator verwenden, wenn Sie eine zur Hand haben. Wenn Ihr Schleifenrumpf komplex ist, ist das Scoping eines Funktionsaufrufs manchmal nützlich, es ist kein i erforderlich. Variable in Ihrem enthaltenden Bereich.

Nachteile: Wenn Sie this im enthaltenen Code verwenden und this in Ihrem forEach -Rückruf verwenden möchten, müssen Sie entweder A) Stick it In einer Variablen, damit Sie sie innerhalb der Funktion verwenden können. B) Übergeben Sie sie als zweites Argument an forEach, damit forEach sie während des Rückrufs als this festlegt. Oder C) Verwenden Sie eine ES2015 + Pfeilfunktion , die über this schließt. Wenn Sie eines dieser Dinge nicht tun, ist this im Rückruf undefined (im strikten Modus) oder das globale Objekt (window) im losen Modus. Früher gab es einen zweiten Nachteil, dass forEach nicht allgemein unterstützt wurde, aber hier im Jahr 2018 ist der einzige Browser, auf den Sie stoßen werden, der forEach nicht hat, der IE8 (und das kann er) wird dort auch nicht richtig polygefüllt).

ES2015 + _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 mit enthaltenem Gültigkeitsbereich (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: Alle die gleichen Vorteile wie forEach, und Sie wissen, dass es da ist, seit Sie jQuery verwenden.

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

Sie können das this -Ding jedoch vermeiden, indem Sie entweder $.proxy verwenden:

_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:

Don't ​​benutze dazu _for..in_ (oder wenn du dies tust, mache es mit angemessenen Sicherheitsvorkehrungen). Sie werden Leute sehen, die zu sagen haben (tatsächlich gab es hier kurz eine Antwort, die dies sagte), aber _for..in_ macht nicht das, was viele Leute denken (es macht etwas noch Nützlicheres!). Insbesondere durchläuft _for..in_ die 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 es meistens eine Art Arbeit in einer langweiligen Bereitstellung 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/

Ich sollte das "nicht" oben weicher machen. Wenn Sie es mit spärlichen Arrays zu tun haben (z. B. hat das Array insgesamt 15 Elemente, aber die Indizes sind aus irgendeinem Grund über den Bereich von 0 bis 150.000 verteilt, und daher ist length 150.001), nd Wenn Sie geeignete Sicherheitsvorkehrungen wie hasOwnProperty verwenden und prüfen, ob der Eigenschaftsname wirklich numerisch ist (siehe Link oben), kann _for..in_ eine vernünftige Möglichkeit sein, viele unnötige Schleifen zu vermeiden, da nur die ausgefüllten Indizes werden aufgezählt.

471
T.J. Crowder

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 jeden

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

Ressourcen

MDN-Schleifen und Iteratoren

70
skyfoot

Hier ist keine Abfrage erforderlich, es funktioniert nur eine for -Schleife:

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

Verwenden Sie die Funktion each() von jQuery.

Hier ist ein Beispiel:

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

Verwenden Sie jeweils JQuery. 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.

5

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]
}
2
SLaks

versuche dies:

$.grep(array, function(element) {

})
2
user11390602

es6-Syntax mit Pfeilfunktion und Interpolation:

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

Alternative Arten der Iteration 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
0