Sto cercando di passare in rassegna un array. Ho il codice seguente:

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

Sto cercando di ottenere tutti i dati dall'array. Qualcuno può guidarmi sulla strada giusta, per favore?

(Aggiornamento: la mia altra risposta qui espone le opzioni non jQuery in modo molto più approfondito. La terza opzione in basso, tuttavia jQuery.each, non è inclusa.)

Quattro opzioni:

Loop generico:

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

o in ES2015 +:

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

Vantaggi : diretto, nessuna dipendenza da jQuery, facile da capire, nessun problema con la preservazione del significato thisall'interno del corpo del loop, nessun sovraccarico inutile di chiamate di funzione (ad es., In teoria più veloce, anche se in realtà dovresti avere così tanti elementi che le probabilità sono che avresti altri problemi; dettagli ).

ES5 forEach:

A partire da ECMAScript5, gli array hanno una forEachfunzione su di essi che semplifica il loop attraverso l'array:

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

Link ai documenti

(Nota: ci sono molte altre funzioni, non solo forEach; vedere la risposta a cui si fa riferimento sopra per i dettagli.)

Vantaggi : dichiarativo, può utilizzare una funzione predefinita per l'iteratore se ne hai una a portata di mano, se il tuo corpo del ciclo è complesso lo scoping di una chiamata di funzione è talvolta utile, non è necessaria una ivariabile nel tuo ambito di contenimento.

Svantaggi : Se utilizzi thisil codice che contiene e che si desidera utilizzare thisall'interno forEachdi richiamata, è necessario sia a) del bastone in una variabile in modo da poter utilizzare all'interno della funzione, B) Far passare come secondo argomento di forEachcosì forEachimposta come thisdurante il callback, o C) Utilizzare una funzione freccia ES2015 + , che si chiude this. Se non si esegue una di queste operazioni, nella richiamata thissarà undefined(in modalità rigorosa) o l'oggetto globale ( window) in modalità libera. C'era un secondo svantaggio che forEachnon era universalmente supportato, ma qui nel 2018, l'unico browser in cui ti imbatterai non ha forEachIE8 (e non può essere correttamente lì polifillato).

ES2015 + for-of:

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

Vedi la risposta collegata nella parte superiore di questa risposta per i dettagli su come funziona.

Vantaggi : semplice, diretto, offre una variabile di ambito contenuto (o costante, sopra) per l'ingresso dall'array.

Svantaggi : non supportato in nessuna versione di IE.

jQuery.each:

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

( Link ai documenti )

Vantaggi : tutti gli stessi vantaggi di forEach, inoltre sai che è lì poiché stai usando jQuery.

Svantaggi : se si utilizza thisnel codice contenente, è necessario inserirlo in una variabile in modo da poterlo utilizzare all'interno della funzione, poiché thissignifica qualcos'altro all'interno della funzione.

Puoi evitare la thiscosa però, usando $.proxy:

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

... o Function#bind:

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

... o in ES2015 ("ES6"), una funzione freccia:

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

Cosa NON fare:

Non usare for..inper questo (o se lo fai, fallo con le dovute garanzie). Vedrai le persone dire (in effetti, qui brevemente c'è stata una risposta che lo dice), ma for..innon fa ciò che molte persone pensano che faccia (fa qualcosa di ancora più utile!). In particolare, for..inscorre i nomi delle proprietà enumerabili di un oggetto (non gli indici di un array). Poiché le matrici sono oggetti e le loro uniche proprietà enumerabili per impostazione predefinita sono gli indici, sembra quasi funzionare in una distribuzione blanda. Ma non è un presupposto sicuro che puoi semplicemente usarlo per quello. Ecco un'esplorazione: http://jsbin.com/exohi/3

Dovrei ammorbidire il "non" sopra. Se hai a che fare con array sparsi (ad esempio, l'array ha 15 elementi in totale ma i loro indici sono sparsi nell'intervallo da 0 a 150.000 per qualche motivo, e quindi lengthè 150.001), e se usi le garanzie appropriate come hasOwnPropertye controllando il il nome della proprietà è veramente numerico (vedi link sopra), for..inpuò essere un modo perfettamente ragionevole per evitare molti cicli inutili, poiché verranno elencati solo gli indici popolati.

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

iterazione di array

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

iterazione dell'oggetto

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

esempio :

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>

loop javascript per array

per loop

for (initialExpression; condition; incrementExpression)
  statement

esempio

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])
}

per 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
}

per di

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

per ciascuno

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

risorse

Loop e iteratori MDN

Non c'è bisogno di jquery qui, solo un forciclo funziona:

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

Opzione 1: il tradizionale for-loop

Le basi

Un forloop tradizionale ha tre componenti:

1. l'inizializzazione: eseguita prima che il blocco visivo venga eseguito per la prima volta
2. la condizione: controlla una condizione ogni volta prima che venga eseguito il blocco di loop e chiude il loop se falso
3. il ripensamento: eseguito ogni volta che viene eseguito il loop loop

Questi tre componenti sono separati l'uno dall'altro da un ;simbolo. Il contenuto di ciascuno di questi tre componenti è facoltativo, il che significa che il seguente è il più forscarso possibile:

for (;;) {
    // Do stuff
}

Ovviamente, dovrai includere un if(condition === true) { break; } o un if(condition === true) { return; }posto all'internofor -loop per farlo smettere di funzionare.

Di solito, tuttavia, l'inizializzazione viene utilizzata per dichiarare un indice, la condizione viene utilizzata per confrontare quell'indice con un valore minimo o massimo e il ripensamento viene utilizzato per incrementare l'indice:

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

Usando un tradtional for tradlo -loop per eseguire il loop in un array

Il modo tradizionale per eseguire il loop in un array è questo:

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

Oppure, se si preferisce eseguire il looping all'indietro, procedere come segue:

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

Vi sono, tuttavia, molte varianti possibili, come ad es. questo :

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

... o questo ...

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

... o questo:

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

Qualunque cosa funzioni meglio è in gran parte una questione di gusti personali e del caso d'uso specifico che stai implementando.

Ognuna di queste varianti è supportata da tutti i browser, compresi quelli più vecchi!

Opzione 2: il while-loop

Un'alternativa a un for-loop è un while-loop. Per eseguire il loop attraverso un array, è possibile effettuare ciò:

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

Come i tradizionali for-loops, while-loops sono supportati anche dal più vecchio dei browser.

Inoltre, ogni ciclo while può essere riscritto come for-loop. Ad esempio, il while-loop qui sopra si comporta esattamente allo stesso modo di questo for-loop:

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

Opzione 3: for...inefor...of

In JavaScript, puoi anche fare questo:

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

Questo dovrebbe essere usato con cautela, tuttavia, poiché non si comporta in modo simile a un forcerchio tradizionale in tutti i casi e ci sono potenziali effetti collaterali che devono essere considerati. Vedi Perché usare "for ... in" con l'iterazione dell'array è una cattiva idea?per ulteriori dettagli.

In alternativa a for...in, ora c'è anche per for...of. L'esempio seguente mostra la differenza tra un for...ofloop e un for...inloop:

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
}

È inoltre necessario considerare che nessuna versione di Internet Explorer supporta for...of( Edge 12+ ) e che for...inrichiede almeno IE10.

Opzione 4: Array.prototype.forEach()

Un'alternativa a For-loops è Array.prototype.forEach(), che utilizza la sintassi seguente:

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

Array.prototype.forEach() è supportato da tutti i browser moderni, nonché da IE9 +.

Opzione 5: jQuery.each()

Oltre alle altre quattro opzioni menzionate, anche jQuery aveva le sue foreach variante.

Utilizza la sintassi seguente:

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

Utilizzare il each() funzione di jQuery.

Ecco un esempio:

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

Usa jQuery each(). Ci sono altri modi, ma ognuno è progettato per questo scopo.

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

E non inserire la virgola dopo l'ultimo numero.

Puoi usare un for()loop:

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

Sintassi ES6 con funzione freccia e interpolazione:

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

Prova questo:

$.grep(array, function(element) {

})

Modi alternativi di iterazione tramite array / stringa con effetti collaterali

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