Passa attraverso un array in JavaScript

In Java è ansible utilizzare un ciclo for per attraversare gli oggetti in un array come segue:

 String[] myStringArray = {"Hello", "World"}; for (String s : myStringArray) { // Do something } 

Puoi fare lo stesso in JavaScript?

Usa un ciclo sequenziale for :

 var myStringArray = ["Hello","World"]; var arrayLength = myStringArray.length; for (var i = 0; i < arrayLength; i++) { alert(myStringArray[i]); //Do something } 

@zipcodeman suggerisce l'uso di for...in statement, ma per l'iterazione di array for-in dovrebbe essere evitato, tale istruzione è pensata per enumerare le proprietà dell'object.

Non dovrebbe essere usato per oggetti di tipo array perché:

  • L'ordine di iterazione non è garantito, gli indici di array non possono essere visitati in ordine numerico.
  • Anche le proprietà ereditate sono elencate.

Il secondo punto è che può darti un sacco di problemi, ad esempio, se estendi l'object Array.prototype per includere un metodo, quella proprietà verrà anche enumerata.

Per esempio:

 Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { alert(array[i]); } 

Il codice sopra avviserà "a", "b", "c" e "foo!".

Questo è particolarmente un problema se si utilizza una libreria che si basa molto sul potenziamento dei prototipi nativi (come ad esempio MooTools).

L'istruzione for-in come ho detto prima è lì per enumerare le proprietà dell'object, ad esempio:

 var obj = { "a": 1, "b": 2, "c": 3 }; for (var prop in obj) { if (obj.hasOwnProperty(prop)) { // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety... alert("prop: " + prop + " value: " + obj[prop]) } } 

Nell'esempio precedente il metodo hasOwnProperty consente di enumerare solo le proprie proprietà , ovvero, solo le proprietà che l'object ha fisicamente, nessuna proprietà ereditata.

Ti consiglierei di leggere il seguente articolo:

  • Enumerazione VS Iterazione

Sì, ma solo se l’implementazione include il … of funzionalità introdotte in ECMAScript 2015 (la versione “Harmony”).

Funziona così:

 // REQUIRES ECMASCRIPT 2015+ var s, myStringArray = ["Hello", "World"]; for (s of myStringArray) { // ... do something with s ... } 

O meglio ancora, poiché ECMAScript 2015 fornisce anche variabili con scope di blocco tramite let e const :

 // REQUIRES ECMASCRIPT 2015+ const myStringArray = ["Hello", "World"]; for (const s of myStringArray) { // ... do something with s ... } // s is no longer defined here 

Molti sviluppatori JavaScript stanno ancora lavorando in un ambiente che non c’è ancora, tuttavia, specialmente se si scrive codice per essere eseguito nei browser web, dove gli sviluppatori del sito spesso non sono sicuri di quale browser / versione useranno i propri client.

Se si può supporre che l’interprete JavaScript sia conforms alla precedente edizione della specifica ECMAScript (che esclude, ad esempio, versioni di Internet Explorer precedenti alla 9), è ansible utilizzare il metodo per forEach iteratore invece di un ciclo. In tal caso, si passa una funzione da chiamare su ciascun elemento dell’array:

 var myStringArray = [ "Hello", "World" ]; myStringArray.forEach( function(s) { // ... do something with s ... } ); 

Ma se anche questo è troppo da assumere e vuoi qualcosa che funzioni in tutte le versioni di JavaScript, devi utilizzare un ciclo di conteggio esplicito. La versione più sicura, che gestisce correttamente gli array sparsi, è qualcosa del genere:

 var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length; for (i=0; i 

Assegnare il valore della lunghezza alla variabile locale (invece di includere l'espressione myStringArray.length completa nella condizione di loop) può fare una differenza significativa nelle prestazioni poiché ignora ogni volta una ricerca di proprietà; usando Rhino sulla mia macchina, la velocità è del 43%.

Vedrai spesso la cache di lunghezza eseguita nella clausola di inizializzazione del ciclo, come questa:

 var i, len, myStringArray = [ "Hello", "World" ]; for (len = myStringArray.length, i=0; i 

Il for ... in syntax menzionata da altri è per il looping sulle proprietà di un object; dal momento che una matrice in JavaScript è solo un object con nomi di proprietà numeriche (e una proprietà di length aggiornata automaticamente), è ansible eseguire il loop teorico su una matrice con esso. Ma il problema è che non si limita ai valori delle proprietà numeriche (ricorda che anche i metodi sono in realtà solo proprietà il cui valore è una chiusura), né itera su quelli in ordine numerico. Pertanto, la syntax for ... in syntax non deve essere utilizzata per il looping degli array.

Puoi usare la map , che è una tecnica di programmazione funzionale che è disponibile anche in altre lingue come Python e Haskell .

 [1,2,3,4].map( function(item) { alert(item); }) 

La syntax generale è:

 array.map(func) 

In generale func richiederebbe un parametro, che è un elemento dell’array. Ma nel caso di JavaScript, può prendere un secondo parametro che è l’indice dell’object e un terzo parametro che è l’array stesso.

Il valore di ritorno di array.map è un altro array, quindi puoi usarlo in questo modo:

 var x = [1,2,3,4].map( function(item) {return item * 10;}); 

E ora x è [10,20,30,40] .

Non è necessario scrivere la funzione in linea. Potrebbe essere una funzione separata.

 var item_processor = function(item) { // Do something complicated to an item } new_list = my_list.map(item_processor); 

che sarebbe in qualche modo equivalente a:

  for (item in my_list) {item_processor(item);} 

Tranne che non ottieni la new_list .

In JavaScript non è consigliabile eseguire il ciclo di una matrice con un ciclo for-in, ma è meglio utilizzare un ciclo for come:

 for(var i=0, len=myArray.length; i < len; i++){} 

È anche ottimizzato ("memorizzazione nella cache" della lunghezza dell'array). Se vuoi saperne di più, leggi il mio post sull'argomento .

for (var s of myStringArray) {

(Rispondendo direttamente alla tua domanda: ora puoi!)

La maggior parte delle altre risposte sono corrette, ma non menzionano (come da questo scritto) che ECMA Script 6 2015 sta introducendo un nuovo meccanismo per fare iterazione, il ciclo for..of .

Questa nuova syntax è il modo più elegante per iterare un array in javascript (a patto che non sia necessario l’indice di iterazione), ma non è ancora ampiamente supportato dai browser.

Attualmente funziona con Firefox 13+, Chrome 37+ e non funziona in modo nativo con altri browser (vedi la compatibilità del browser sotto). Fortunatamente abbiamo compilatori JS (come Babel ) che ci consentono di utilizzare le funzionalità di prossima generazione oggi.

Funziona anche su Node (l’ho testato sulla versione 0.12.0).

Iterazione di un array

 // You could also use "let" instead of "var" for block scope. for (var letter of ["a", "b", "c"]) { console.log(letter); } 

Iterazione di una matrice di oggetti

 var band = [ {firstName : 'John', lastName: 'Lennon'}, {firstName : 'Paul', lastName: 'McCartney'} ]; for(var member of band){ console.log(member.firstName + ' ' + member.lastName); } 

Iterazione di un generatore:

(esempio estratto da https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for…of )

 function* fibonacci() { // a generator function let [prev, curr] = [1, 1]; while (true) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (let n of fibonacci()) { console.log(n); // truncate the sequence at 1000 if (n >= 1000) { break; } } 

Tabella di compatibilità: http://kangax.github.io/es5-compat-table/es6/#For..of loops

Spec: http://wiki.ecmascript.org/doku.php?id=harmony:iterators

}

Opera, Safari, Firefox e Chrome condividono ora una serie di metodi Array avanzati per l’ottimizzazione di molti loop comuni.

Potresti non averne bisogno tutti, ma possono essere molto utili, o lo sarebbero se tutti i browser li supportassero.

Mozilla Labs ha pubblicato gli algoritmi utilizzati da loro e WebKit , in modo che tu possa aggiungerli tu stesso.

filtro restituisce una serie di elementi che soddisfano alcune condizioni o test.

ogni restituisce true se ogni membro dell’array supera il test.

alcuni restituiscono true se qualcuno supera il test.

forEach esegue una funzione su ogni membro dell’array e non restituisce nulla.

la mappa è come perOppure, ma restituisce una matrice dei risultati dell’operazione per ciascun elemento.

Questi metodi hanno tutti una funzione per il loro primo argomento e hanno un secondo argomento opzionale, che è un object il cui ambito si desidera imporre ai membri dell’array mentre passano attraverso la funzione.

Ignoralo finché non ne hai bisogno.

indexOf e lastIndexOf trovano la posizione appropriata del primo o dell’ultimo elemento che corrisponde esattamente al suo argomento.

 (function(){ var p, ap= Array.prototype, p2={ filter: function(fun, scope){ var L= this.length, A= [], i= 0, val; if(typeof fun== 'function'){ while(i< L){ if(i in this){ val= this[i]; if(fun.call(scope, val, i, this)){ A[A.length]= val; } } ++i; } } return A; }, every: function(fun, scope){ var L= this.length, i= 0; if(typeof fun== 'function'){ while(i= L) i= L-1; else if(i< 0) i += L; while(i> -1){ if(this[i]=== what) return i; --i; } return -1; }, map: function(fun, scope){ var L= this.length, A= Array(this.length), i= 0, val; if(typeof fun== 'function'){ while(i< L){ if(i in this){ A[i]= fun.call(scope, this[i], i, this); } ++i; } return A; } }, some: function(fun, scope){ var i= 0, L= this.length; if(typeof fun== 'function'){ while(i 

Usa il ciclo while …

 var i=0, item, items = ['one','two','three']; while(item = items[i++]){ console.log(item); } 

registri: ‘uno’, ‘due’, ‘tre’

E per l’ordine inverso, un ciclo ancora più efficiente

 var items = ['one','two','three'], i = items.length; while(i--){ console.log(items[i]); } 

registri: ‘tre’, ‘due’, ‘uno’

O il classico ciclo

 var items = ['one','two','three'] for(var i=0, l = items.length; i < l; i++){ console.log(items[i]); } 

registri: 'uno', 'due', 'tre'

Riferimento: http://www.sitepoint.com/google-closure-how-not-to-write-javascript/

Intro

Da quando sono al college, ho programmato in Java, JavaScript, Pascal, ABAP , PHP, Progress 4GL, C / C ++ e forse in alcune altre lingue a cui non riesco a pensare al momento.

Mentre tutti hanno le loro idiosincrasie linguistiche, ognuna di queste lingue condivide molti degli stessi concetti di base. Tali concetti includono procedure / funzioni, istruzioni IF , FOR -loops e WHILE -loops.


Un tradizionale for -loop

Un ciclo for tradizionale ha tre componenti:

  1. L’inizializzazione: eseguita prima che il blocco di visualizzazione venga eseguito la prima volta
  2. La condizione: controlla una condizione ogni volta prima che venga eseguito il blocco del ciclo e chiude il ciclo se falso
  3. Il ripensamento: eseguito ogni volta dopo l’esecuzione del blocco del ciclo

Queste tre componenti sono separate l’una dall’altra da a ; simbolo. Il contenuto di ciascuno di questi tre componenti è facoltativo, il che significa che quanto segue è il ciclo più minimale ansible:

 for (;;) { // Do stuff } 

Naturalmente, è necessario includere un if(condition === true) { break; } if(condition === true) { break; } o un if(condition === true) { return; } if(condition === true) { return; } da qualche parte all’interno che for -loop per farlo smettere di funzionare.

Di solito, tuttavia, l’inizializzazione viene utilizzata per dichiarare un indice, la condizione viene utilizzata per confrontare tale 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); } 

Utilizzo di un ciclo tradizionale for eseguire il ciclo di un array

Il modo tradizionale di scorrere un array è questo:

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

Oppure, se preferisci eseguire il looping all'indietro, fai questo:

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

Ci sono, tuttavia, molte varianti possibili, come ad esempio questa:

 for (var key = 0, value = myArray[key], 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 dipende in gran parte sia dal gusto personale che dal caso d'uso specifico che stai implementando.

Nota che ognuna di queste variazioni è supportata da tutti i browser, compresi quelli molto vecchi!


Un ciclo di tempo

Un'alternativa a un ciclo for è un ciclo while . Per eseguire il ciclo di un array, è ansible eseguire questa operazione:

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

Come i loop tradizionali, while loop sono supportati anche dai più vecchi browser.

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

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

For...in e for...of

In JavaScript, puoi anche fare questo:

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

Questo dovrebbe essere usato con caucanvas, tuttavia, poiché non si comporta come un ciclo tradizionale in tutti i casi, e ci sono potenziali effetti collaterali che devono essere considerati. Vedi Perché l'uso di "for ... in" con l'iterazione degli array è una ctriggers idea? per ulteriori dettagli.

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

 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+ fa) e che for...in richiede almeno Internet Explorer 10.


Array.prototype.forEach()

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

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

Array.prototype.forEach() è supportato da tutti i browser moderni, nonché da Internet Explorer 9 e Array.prototype.forEach() successive.


biblioteche

Infine, molte librerie di utilità hanno anche la loro variazione foreach . AFAIK, i tre più popolari sono questi:

jQuery.each() , in jQuery :

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

_.each() , in Underscore.js :

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

_.forEach() , in Lodash.js :

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

Se vuoi un modo teso per scrivere un ciclo veloce e puoi scorrere al contrario:

 for (var i=myArray.length;i--;){ var item=myArray[i]; } 

Questo ha il vantaggio di memorizzare nella cache la lunghezza (simile a for (var i=0, len=myArray.length; i e diversamente for (var i=0; i ) pur essendo meno caratteri da digitare.

Ci sono persino delle volte in cui dovresti eseguire iterazioni al contrario, ad esempio quando si esegue un'iterazione su un NodeList attivo in cui prevedi di rimuovere elementi dal DOM durante l'iterazione.

C’è un modo per farlo in cui si ha un campo d’azione implicito molto piccolo nel ciclo e si eliminano variabili extra.

 var i = 0, item; // note this is weak to sparse arrays or falsey values for ( ; item = myStringArray[i++] ; ){ item; // This is the string at the index. } 

O se vuoi davvero ottenere l’id e avere un loop davvero classico:

 var i = 0, len = myStringArray.length; // cache the length for ( ; i < len ; i++ ){ myStringArray[i]; // Don't use this if you plan on changing the length of the array } 

I browser moderni supportano tutti i metodi di iteratore forEach , map , reduce , filter e una miriade di altri metodi sul prototipo di Array .

Esistono vari modi per eseguire il looping della matrice in JavaScript.

Ciclo generico:

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

ES5's forEach:

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

jQuery.each:

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

Dai un'occhiata a questo per informazioni dettagliate o puoi anche controllare MDN per il looping attraverso un array in JavaScript e usando jQuery per controllare jQuery per ognuno .

Consiglio vivamente di utilizzare la libreria underscore.js . Fornisce varie funzioni che è ansible utilizzare per iterare su array / raccolte.

Per esempio:

 _.each([1, 2, 3], function(num){ alert(num); }); => alerts each number in turn... 

Ciclo di array:

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

Loop dell'object:

 for(var prop in obj){ var propValue = obj[prop]; console.log(propValue); } 

Sì, puoi fare lo stesso in JavaScript usando il ciclo, ma non limitato a questo, molti modi per fare loop su array in JavaScrip, immagina di avere questo array sotto e ti piacerebbe fare un ciclo su di esso:

 var arr = [1, 2, 3, 4, 5]; 

Queste sono le soluzioni:

1) Per loop

Per ciclo è un modo comune di eseguire il ciclo attraverso gli array in JavaScript, ma non considerati come le soluzioni più veloci per i grandi array:

 for (var i=0, l=arr.length; i 

2) Durante il loop

Mentre il ciclo è considerato il modo più veloce per effettuare il ciclo su array lunghi, ma di solito meno utilizzato in JavaScript:

 let i=0; while (arr.length>i) { console.log(arr[i]); i++; } 

3) Fai mentre
Fai mentre fai la stessa cosa mentre con qualche differenza di syntax come di seguito:

 let i=0; do { console.log(arr[i]); i++; } while (arr.length>i); 

Questi sono i modi principali per fare loop javascript, ma ci sono alcuni modi per farlo.

Inoltre usiamo for in ciclo for in loop per il loop su oggetti in javascript.

Guarda anche le funzioni map() , filter() , reduce() etc su Array in JavaScript. Possono fare le cose molto più velocemente e meglio che usare while e for .

Questo è un buon articolo se ti piace saperne di più sulle funzioni asincrone sugli array in JavaScript.

Al giorno d'oggi la programmazione funzionale ha fatto un bel salto nel mondo dello sviluppo. E per una buona ragione: le tecniche funzionali possono aiutarti a scrivere più codice dichiarativo che è più facile da capire a colpo d'occhio, refactoring e test.

Uno dei capisaldi della programmazione funzionale è l'uso speciale delle liste e delle operazioni di lista. E quelle cose sono esattamente ciò che il suono è come sono: matrici di cose e cose che fai a loro. Ma la mentalità funzionale li tratta un po 'diversamente da come ci si potrebbe aspettare.

Questo articolo darà un'occhiata da vicino a ciò che mi piace chiamare le "grandi tre" operazioni dell'elenco: mappare, filtrare e ridurre. Avvolgere la testa attorno a queste tre funzioni è un passo importante verso la possibilità di scrivere codice funzionale pulito e apre le porte alle tecniche di programmazione funzionale e retriggers estremamente potenti.

Significa anche che non dovrai mai più scrivere un ciclo for.

Leggi di più >> qui :

Se stai usando la libreria jQuery, considera l’utilizzo di http://api.jquery.com/jQuery.each/

Dalla documentazione:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

Restituisce: object

Descrizione: una funzione di iteratore generica, che può essere utilizzata per iterare senza interruzioni su oggetti e array. Le matrici e gli oggetti tipo array con una proprietà length (come l’object arguments di una funzione) sono iterati da un indice numerico, da 0 a length-1. Other objects are iterated via their named properties.

The $.each() function is not the same as $(selector).each() , which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.) The method returns its first argument, the object that was iterated.

Some use cases of looping through an array in the functional programming way in JavaScript:

1. Just loop through an array

 const myArray = [{x:100}, {x:200}, {x:300}]; myArray.forEach((element, index, array) => { console.log(element.x); // 100, 200, 300 console.log(index); // 0, 1, 2 console.log(array); // same myArray object 3 times }); 

Note: Array.prototype.forEach() is not a functional way strictly speaking, as the function it takes as the input parameter is not supposed to return a value, which thus cannot be regarded as a pure function.

2. Check if any of the elements in an array pass a test

 const people = [ {name: 'John', age: 23}, {name: 'Andrew', age: 3}, {name: 'Peter', age: 8}, {name: 'Hanna', age: 14}, {name: 'Adam', age: 37}]; const anyAdult = people.some(person => person.age >= 18); console.log(anyAdult); // true 

3. Transform to a new array

 const myArray = [{x:100}, {x:200}, {x:300}]; const newArray= myArray.map(element => element.x); console.log(newArray); // [100, 200, 300] 

Note: The map() method creates a new array with the results of calling a provided function on every element in the calling array.

4. Sum up a particular property, and calculate its average

 const myArray = [{x:100}, {x:200}, {x:300}]; const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0); console.log(sum); // 600 = 0 + 100 + 200 + 300 const average = sum / myArray.length; console.log(average); // 200 

5. Create a new array based on the original but without modifying it

 const myArray = [{x:100}, {x:200}, {x:300}]; const newArray= myArray.map(element => { return { ...element, x: element.x * 2 }; }); console.log(myArray); // [100, 200, 300] console.log(newArray); // [200, 400, 600] 

6. Count the number of each category

 const people = [ {name: 'John', group: 'A'}, {name: 'Andrew', group: 'C'}, {name: 'Peter', group: 'A'}, {name: 'James', group: 'B'}, {name: 'Hanna', group: 'A'}, {name: 'Adam', group: 'B'}]; const groupInfo = people.reduce((groups, person) => { const {A = 0, B = 0, C = 0} = groups; if (person.group === 'A') { return {...groups, A: A + 1}; } else if (person.group === 'B') { return {...groups, B: B + 1}; } else { return {...groups, C: C + 1}; } }, {}); console.log(groupInfo); // {A: 3, C: 1, B: 2} 

7. Retrieve a subset of an array based on particular criteria

 const myArray = [{x:100}, {x:200}, {x:300}]; const newArray = myArray.filter(element => element.x > 250); console.log(newArray); // [{x:300}] 

Note: The filter() method creates a new array with all elements that pass the test implemented by the provided function.

8. Sort an array

 const people = [ { name: "John", age: 21 }, { name: "Peter", age: 31 }, { name: "Andrew", age: 29 }, { name: "Thomas", age: 25 } ]; let sortByAge = people.sort(function (p1, p2) { return p1.age - p2.age; }); console.log(sortByAge); 

inserisci la descrizione dell'immagine qui

9. Find an element in an array

 const people = [ {name: "john", age:23}, {name: "john", age:43}, {name: "jim", age:101}, {name: "bob", age:67} ]; const john = people.find(person => person.name === 'john'); console.log(john); 

inserisci la descrizione dell'immagine qui

The Array.prototype.find() method returns the value of the first element in the array that satisfies the provided testing function.

Riferimenti

  • Array.prototype.some()
  • Array.prototype.forEach()
  • Array.prototype.map()
  • Array.prototype.filter()
  • Array.prototype.sort()
  • Spread syntax
  • Array.prototype.find()

I did not yet see this variation, which I personally like the best:

Given an array:

 var someArray = ["some", "example", "array"]; 

You can loop over it without ever accessing the length property:

 for (var i=0, item; item=someArray[i]; i++) { // item is "some", then "example", then "array" // i is the index of item in the array alert("someArray[" + i + "]: " + item); } 

See this JsFiddle demonstrating that: http://jsfiddle.net/prvzk/

This only works for arrays that are not sparse. Meaning that there actually is a value at each index in the array. However, I found that in practice I hardly ever use sparse arrays in Javascript… In such cases it’s usually a lot easier to use an object as a map/hashtable. If you do have a sparse array, and want to loop over 0 .. length-1, you need the for (var i=0; i

Also, as CMS mentions in a comment below, you can only use this on arrays that don’t contain any falsish values. The array of strings from the example works, but if you have empty strings, or numbers that are 0 or NaN, etc. the loop will break off prematurely. Again in practice this is hardly ever a problem for me, but it is something to keep in mind, which makes this a loop to think about before you use it… That may disqualify it for some people 🙂

What I like about this loop is:

  • It’s short to write
  • No need to access (let alone cache) the length property
  • The item to access is automatically defined within the loop body under the name you pick.
  • Combines very naturally with array.push and array.splice to use arrays like lists/stacks

The reason this works is that the array specification mandates that when you read an item from an index >= the array’s length, it will return undefined. When you write to such a location it will actually update the length.

For me, this construct most closely emulates the Java 5 syntax that I love:

 for (String item : someArray) { } 

… with the added benefit of also knowing about the current index inside the loop

There are a couple of ways to do it in JavaScript. The first two examples are JavaScript samples. The third one makes use of a JavaScript library, that is, jQuery making use of the .each() function.

 var myStringArray = ["hello", "World"]; for(var i in myStringArray) { alert(myStringArray[i]); } 

The most elegant and fast way

 var arr = [1, 2, 3, 1023, 1024]; for (var value; value = arr.pop();) { value + 1 } 

http://jsperf.com/native-loop-performance/8


Edited (because I was wrong)


Comparing methods for looping through an array of 100000 items and do a minimal operation with the new value each time.

Preparation:

    

Tests:

  

There’s a method to iterate over only own object properties, not including prototype’s ones:

 for (var i in array) if (array.hasOwnProperty(i)) { // do something with array[i] } 

but it still will iterate over custom-defined properties.

In javascript any custom property could be assigned to any object including array.

If one wants to iterate over sparsed array, for (var i = 0; i < array.length; i++) if (i in array) or array.forEach with es5shim should be used.

The optimized approach is to cache the length of array and using single var pattern initializing all variables with single var keyword.

 var i, max, myStringArray = ["Hello","World"]; for (i = 0, max = myStringArray.length; i < max; i++) { alert(myStringArray[i]); //Do something } 

If order of iteration does not matter than you should try reversed loop, it is fastest as it reduce overhead condition testing and decrement is in one statement:

 var i,myStringArray = ["item1","item2"]; for (i = myStringArray.length; i--) { alert(myStringArray[i]); } 

or better and cleaner to use while loop:

 var myStringArray = ["item1","item2"],i = myStringArray.length; while(i--) { // do something with fruits[i] } 

In JavaScript, there are so many solutions to loop an array.

The code below are popular ones

 /** Declare inputs */ const items = ['Hello', 'World'] /** Solution 1. Simple for */ console.log('solution 1. simple for') for (let i = 0; i < items.length; i++) { console.log(items[i]) } console.log() console.log() /** Solution 2. Simple while */ console.log('solution 2. simple while') let i = 0 while (i < items.length) { console.log(items[i++]) } console.log() console.log() /** Solution 3. forEach*/ console.log('solution 3. forEach') items.forEach(item => { console.log(item) }) console.log() console.log() /** Solution 4. for-of*/ console.log('solution 4. for-of') for (const item of items) { console.log(item) } console.log() console.log() 

Short answer: yes. You can do with this:

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

In a browser console, you can see something like "element1", "element2", etc., printed.

The best way in my opinion is to use the Array.forEach function. If you cannot use that I would suggest to get the polyfill from MDN to make i available, it is certainly the safest way to iterate over an array in JavaScript.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

So as others has suggested, this is almost always what you want:

 var numbers = [1,11,22,33,44,55,66,77,88,99,111]; var sum = 0; numbers.forEach(function(n){ sum += n; }); 

This ensures that anything you need in the scope of processing the array stays within that scope, and that you are only processing the values of the array, not the object properties and other members, which is what for .. in does.

using a regular c style for loop works in most cases, it is just important to remember that everything within the loop shares it’s scope with the rest of your program, the { } does not create a new scope.

Hence:

 var sum = 0; var numbers = [1,11,22,33,44,55,66,77,88,99,111]; for(var i = 0; i 

will output "11" - which may or may not be what you want.

Working jsFiddle example: https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/

For example, I used in a Firefox console:

 [].forEach.call(document.getElementsByTagName('pre'), function(e){ console.log(e); }) 
 var x = [4, 5, 6]; for (i = 0, j = x[i]; i < x.length; j = x[++i]) { console.log(i,j); } 

A lot cleaner...

If you want to use jQuery, it has a nice example in its documentation:

  $.each([ 52, 97 ], function( index, value ) { alert( index + ": " + value ); }); 

Sure it’s inefficient and many despise it, but it’s one of the closest to the mentioned:

 var myStringArray = ["Hello","World"]; myStringArray.forEach(function(f){ // Do something }) 

Well, how about this:

 for (var key in myStringArray) { console.log(myStringArray[key]); } 
 var myStringArray = ["hello", "World"]; myStringArray.forEach(function(val, index){ console.log(val, index); })