Per-su un array in JavaScript?




foreach javascript (23)

Come posso scorrere tutte le voci di un array usando JavaScript?

Ho pensato che fosse qualcosa del genere:

forEach(instance in theArray)

Dove theArray è il mio array, ma questo sembra essere errato.


Puoi chiamare per questo In questo modo:

let Array = [1,3,2];

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

l'elemento avrà il valore di ogni indice da 0 alla lunghezza dell'array.

Produzione:

1    
3    
2

spiegazione:

forEach è in classe prototipo. puoi anche chiamare questo come theArray.prototype.forEach (...);

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

Puoi anche modificare un array come questo:

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

Se stai usando la libreria jQuery , puoi usare jQuery.each :

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

MODIFICARE :

Come da domanda, l'utente desidera il codice in javascript al posto di jquery, quindi la modifica è

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

Probabilmente il for(i = 0; i < array.length; i++)ciclo non è la scelta migliore. Perché? Se hai questo:

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

Il metodo chiamerà da array[0]a array[2]. Innanzitutto, questo farà riferimento a variabili che non hai nemmeno, in secondo luogo non avresti le variabili nell'array, e terzo questo renderà il codice più audace. Guarda qui, è quello che uso:

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

E se vuoi che sia una funzione, puoi farlo:

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

Se vuoi rompere, un po 'più di logica:

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

Esempio:

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

Restituisce:

//Hello
//World
//!!!

So che questo è un vecchio post, e ci sono già tante grandi risposte. Per un po 'più di completezza ho pensato di AngularJS un'altra usando AngularJS . Ovviamente, questo si applica solo se stai usando Angular, ovviamente, comunque mi piacerebbe metterlo lo stesso.

angular.forEachprende 2 argomenti e un terzo argomento opzionale. Il primo argomento è l'oggetto (array) per iterare sopra, il secondo argomento è la funzione iteratore, e il terzo argomento opzionale è il contesto dell'oggetto (fondamentalmente riferito all'interno del ciclo come 'questo'.

Esistono diversi modi per utilizzare il ciclo forEach di angular. Il più semplice e probabilmente il più usato è

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

Un altro modo è utile per copiare elementi da una matrice all'altra

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);

Tuttavia, non devi farlo, puoi semplicemente fare quanto segue ed è equivalente all'esempio precedente:

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

Ora ci sono vantaggi e svantaggi nell'usare la angular.forEachfunzione in contrasto con il forloop integrato al gusto di vaniglia .

Professionisti

  • Facile leggibilità
  • Facile scrivibilità
  • Se disponibile, angular.forEachutilizzerà il ciclo ESE forEach. Ora, arriverò all'efficacia nella sezione contro, poiché i cicli di Everybody sono molto più lenti dei cicli for. Lo dico come professionista perché è bello essere coerenti e standardizzati.

Considera i seguenti 2 cicli annidati, che fanno esattamente la stessa cosa. Diciamo che abbiamo 2 matrici di oggetti e ogni oggetto contiene una serie di risultati, ognuno dei quali ha una proprietà Value che è una stringa (o qualsiasi altra cosa). E diciamo che abbiamo bisogno di scorrere su ciascuno dei risultati e se sono uguali, allora esegui qualche azione:

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

Certo, questo è un esempio ipotetico molto semplice, ma ho scritto triple embedded per loop usando il secondo approccio ed era molto difficile da leggere e scrivere per quella materia.

Contro

  • Efficienza. angular.forEache il nativo forEach, peraltro, è molto più lento del normale forloop .... circa il 90% più lento . Pertanto, per i set di dati di grandi dimensioni, è meglio attenersi al forciclo nativo .
  • Nessuna interruzione, continuazione o restituzione del supporto. continueè effettivamente supportato da " accident ", per continuare in un modo angular.forEachsemplice inserire una return;dichiarazione nella funzione come la angular.forEach(array, function(item) { if (someConditionIsTrue) return; });quale farà sì che continui fuori dalla funzione per quella iterazione. Ciò è dovuto anche al fatto che il nativo forEachnon supporta né interrompe né continua.

Sono sicuro che ci sono anche altri pro e contro, e per favore sentiti libero di aggiungere qualsiasi cosa tu ritenga opportuno. Ritengo che, in conclusione, se hai bisogno di efficienza, segui semplicemente il forciclo nativo per le tue esigenze di ciclo. Ma, se i tuoi set di dati sono più piccoli e un po 'di efficienza va bene a rinunciare in cambio di leggibilità e scrivibilità, allora con tutti i mezzi gettare un angular.forEachin quel ragazzo cattivo.


Ci sono tre implementazioni di foreachin jQuery come segue.

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

Vorrei anche aggiungere questo come una composizione di un ciclo inverso e una risposta sopra per qualcuno che gradirebbe anche questa sintassi.

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

Professionisti:

Il vantaggio per questo: hai già il riferimento nel primo come non sarà necessario dichiararlo in seguito con un'altra linea. È utile quando si esegue il ciclo attraverso l'array di oggetti.

Contro:

Questo si interromperà ogni volta che il riferimento è falso - falso (indefinito, ecc.). Può essere usato come un vantaggio però. Tuttavia, lo renderebbe un po 'più difficile da leggere. Inoltre, a seconda del browser, può essere "non" ottimizzato per funzionare più velocemente di quello originale.


Non c'è alcun for eachciclo nel JavaScript nativo . È possibile utilizzare le librerie per ottenere questa funzionalità (io consiglio Underscore.js ), utilizzare un forciclo semplice .

for (var instance in objects) {
   ...
}

Tuttavia, tieni presente che potrebbero esserci motivi per utilizzare un forciclo ancora più semplice (vedi question Perché usare "for ... in" con iterazione dell'array è una cattiva idea? )

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

Un modo più vicino alla tua idea sarebbe quello di utilizzare Array.forEach()quale accetta una funzione di clojure che verrà eseguita per ogni elemento dell'array.

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

Un altro modo percorribile sarebbe utilizzare ciò Array.map()che funziona allo stesso modo ma anche mutatesogni elemento e lo restituisce come:

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

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

A partire da ES6:

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

Dove ofevita le stranezze associate ine lo fa funzionare come il forloop di qualsiasi altra lingua, e si letlega iall'interno del ciclo anziché all'interno della funzione.

Le parentesi ( {}) possono essere omesse quando c'è un solo comando (ad esempio nell'esempio sopra).


Un'attuazione forEach ( vedi 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
  }
);

modo jQuery utilizzando $.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];

Sommario:

Durante l'iterazione su un array, spesso è possibile raggiungere uno dei seguenti obiettivi:

  1. Vogliamo iterare sull'array e creare un nuovo array:

    Array.prototype.map

  2. Vogliamo iterare sull'array e non creare un nuovo array:

    Array.prototype.forEach

    for..of ciclo continuo

In JS ci sono molti modi per raggiungere entrambi questi obiettivi. Tuttavia, alcuni sono più competenti di altri. Di seguito è possibile trovare alcuni metodi comunemente utilizzati (il più convinto) per eseguire l'iterazione dell'array in javascript.

Creazione di un nuovo array: Map

map()è una funzione su Array.prototypecui è possibile trasformare ogni elemento di un array e quindi restituisce un nuovo array. map()prende come argomento una funzione di callback e funziona nel modo seguente:

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

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

Il callback che abbiamo passato map()come argomento viene eseguito per ogni elemento. Quindi viene restituito un array che ha la stessa lunghezza dell'array originale. In questo nuovo elemento di matrice viene trasformato dalla funzione di callback passata come argomento a map().

La netta differenza tra mape un altro meccanismo di loop come forEache un for..ofloop sono che mapritorna come nuovo array e lascia intatto il vecchio array (eccetto se lo si manipola esplicitamente con pensieri simili splice).

Si noti inoltre che la mapfunzione callback fornisce come secondo argomento il numero di indice dell'iterazione corrente. Inoltre, il terzo argomento fornisce l'array su cui è mapstato chiamato. A volte queste proprietà possono essere molto utili.

Loop usando forEach

forEachè una funzione su Array.prototypecui si basa una funzione di callback come argomento. Quindi esegue questa funzione di callback per ogni elemento dell'array. In contrasto con la map()funzione, la funzione forEach restituisce nulla ( undefined). Per esempio:

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

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

Proprio come la mapfunzione, il forEachcallback fornisce come secondo argomento il numero di indice dell'iterazione corrente. Inoltre, il terzo argomento fornisce l'array su cui è forEachstato chiamato.

Passa attraverso gli elementi usando for..of

Il for..ofloop scorre attraverso ogni elemento di un array (o qualsiasi altro oggetto iterabile). Funziona nel modo seguente:

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

for(let element of arr) {
  console.log(element * 2);
}

Nell'esempio precedente elementsta per un elemento dell'array ed arrè l'array che vogliamo fare il ciclo. Non che il nome elementsia arbitrario e potremmo aver scelto qualsiasi altro nome come "el" o qualcosa di più dichiarativo quando questo è applicabile.

Non confondere il for..inciclo con il for..ofciclo. for..inpasserà in rassegna tutte le proprietà enumerabili dell'array mentre il for..ofciclo passerà solo attraverso gli elementi dell'array. Per esempio:

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

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}


Loop indietro

Penso che il reverse per loop meriti una menzione qui:

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

vantaggi:

  • Non è necessario dichiarare una variabile len temporanea o confrontarla con array.length a ogni iterazione, che potrebbe essere una ottimizzazione minima.
  • Rimozione di fratelli dal DOM in ordine inverso è di solito più efficiente . (Il browser deve fare meno spostamento degli elementi nei suoi array interni).
  • Se si modifica la matrice durante il ciclo, a o dopo l'indice i (ad esempio si rimuove o si inserisce un elemento array[i] ), un ciclo in avanti salta l'elemento spostato a sinistra in posizione i , oppure rielabora i l'oggetto che è stato spostato a destra. In un ciclo for tradizionale, è possibile aggiornare i per puntare all'elemento successivo che richiede l'elaborazione - 1, ma invertire semplicemente la direzione dell'iterazione è spesso una soluzione più semplice ed elegante .
  • Allo stesso modo, quando si modificano o si rimuovono gli elementi DOM nidificati , l'elaborazione al contrario può aggirare gli errori . Ad esempio, prendere in considerazione la possibilità di modificare l'innerHTML di un nodo genitore prima di gestirne i figli. Quando viene raggiunto il nodo figlio, verrà staccato dal DOM, dopo essere stato sostituito da un figlio appena creato quando è stato scritto il innerHTML del genitore.
  • È più breve da digitare e leggere , rispetto ad alcune delle altre opzioni disponibili. Anche se perde per forEach() e per ES6 for ... of .

svantaggi:

  • Elabora gli articoli in ordine inverso. Se stavi creando un nuovo array dai risultati, o stampando cose sullo schermo, naturalmente l'output sarà invertito rispetto all'ordine originale.
  • L'inserimento ripetuto di fratelli nel DOM come primo figlio per mantenere il loro ordine è meno efficiente . (Il browser continuerebbe a dover spostare le cose a posto.) Per creare nodi DOM in modo efficiente e in ordine, basta eseguire il ciclo avanti e aggiungere come di consueto (e utilizzare anche un "frammento di documento").
  • Il ciclo inverso è fonte di confusione per gli sviluppatori junior. (Puoi considerare che un vantaggio, a seconda della tua prospettiva.)

Dovrei sempre usarlo?

Alcuni sviluppatori utilizzano il ciclo inverso per impostazione predefinita , a meno che non vi sia una buona ragione per eseguire il ciclo avanti.

Sebbene i guadagni in termini di prestazioni siano in genere insignificanti, è una specie di urla:

"Basta fare questo per ogni elemento della lista, non mi interessa per l'ordine!"

Tuttavia, in pratica, questo non è in realtà un indicatore affidabile di intento, poiché non è distinguibile da quelle occasioni in cui ti interessi per l'ordine, e in realtà è necessario eseguire il ciclo al contrario. Quindi, in realtà, sarebbe necessario un altro costrutto per esprimere con precisione l'intento "non interessa", qualcosa che al momento non è disponibile nella maggior parte delle lingue, incluso ECMAScript, ma che potrebbe essere chiamato, ad esempio, forEachUnordered() .

Se l'ordine non ha importanza e l' efficienza è un problema (nel ciclo più interno di un motore di gioco o di animazione), può essere accettabile utilizzare il ciclo inverso come schema di partenza. Ricorda solo che vedere un'inversione di loop nel codice esistente non significa necessariamente che l'ordine sia irrilevante!

È meglio usare forEach ()

In generale per codici di livello superiore in cui chiarezza e sicurezza sono problemi maggiori, ti consiglio di utilizzare Array::forEach come schema predefinito:

  • È chiaro da leggere.
  • Indica che non ho intenzione di essere spostato all'interno del blocco (che è sempre una possibile sorpresa che si nasconde in loop lunghi e continui).
  • Ti dà una portata gratuita per chiusure.
  • Riduce la perdita di variabili locali e la collisione accidentale con (e la mutazione di) variabili esterne.

Quindi, quando vedi il ciclo inverso per il codice, è un suggerimento che è invertito per una buona ragione (forse uno dei motivi sopra descritti). E vedere un tradizionale "forward loop" può indicare che lo spostamento può aver luogo.

(Se la discussione sull'intento non ha senso per te, allora tu e il tuo codice potreste trarre beneficio dall'osservare la lezione di Crockford su Programming Style e Your Brain .)

Come funziona?

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

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

Noterai che i-- è la clausola media (dove di solito vediamo un confronto) e l'ultima clausola è vuota (dove di solito vediamo i++ ). Ciò significa che i-- è anche usato come condizione per la continuazione. Fondamentalmente, viene eseguito e controllato prima di ogni iterazione.

  • Come può iniziare a array.length senza esplodere?

    Siccome i-- viene eseguito prima di ogni iterazione, alla prima iterazione effettivamente array.length - 1 all'elemento in array.length - 1 che evita qualsiasi problema con gli elementi undefined Array-out-of-bounds .

  • Perché non smette di iterare prima dell'indice 0?

    Il ciclo interromperà l'iterazione quando la condizione i-- valuterà su un valore falso (quando produce 0).

    Il trucco è che a differenza di --i , il trailing i-- operator decrementa i ma restituisce il valore prima del decremento. La tua console può dimostrarlo:

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

    [5, 5, 4]

    Quindi, nell'ultima iterazione, ero precedentemente 1 e l'espressione i-- cambia a 0 ma in realtà produce 1 (verità), e quindi la condizione passa. Alla successiva iterazione i-- cambia i in -1 ma restituisce 0 (falsey), causando l'eliminazione immediata del fondo del ciclo.

    Nel tradizionale ciclo forwards, i++ e ++i sono intercambiabili (come fa notare Douglas Crockford). Comunque al contrario per loop, perché il nostro decremento è anche la nostra espressione di condizione, dobbiamo attenerci a i-- se vogliamo elaborare l'elemento all'indice 0.

banalità

Ad alcune persone piace disegnare una piccola freccia sul retro for ciclo e terminare con un occhiolino:

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

I crediti vanno alla WYL per avermi mostrato i vantaggi e gli orrori del ciclo inverso.


Modifica : questa risposta è irrimediabilmente obsoleta. Per un approccio più moderno, guarda i metodi disponibili su un array . I metodi di interesse potrebbero essere:

  • per ciascuno
  • carta geografica
  • filtro
  • cerniera lampo
  • ridurre
  • ogni
  • alcuni

Il modo standard per iterare un array in JavaScript è una vaniglia for -loop:

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

Si noti, tuttavia, che questo approccio è valido solo se si dispone di un array denso e ogni indice è occupato da un elemento. Se la matrice è sparsa, è possibile che si verifichino problemi di prestazioni con questo approccio, dal momento che si andrà a scorrere su molti indici che non esistono realmente nell'array. In questo caso, un for .. in -loop potrebbe essere un'idea migliore. Tuttavia , è necessario utilizzare le protezioni appropriate per garantire che vengano applicate solo le proprietà desiderate dell'array (ovvero, gli elementi dell'array), dal momento che il for..in -loop verrà enumerato anche nei browser legacy, o se il comando aggiuntivo le proprietà sono definite come enumerable .

In ECMAScript 5 ci sarà un metodo forEach sul prototipo dell'array, ma non è supportato nei browser legacy. Pertanto, per poterlo utilizzare in modo coerente, è necessario disporre di un ambiente che lo supporti (ad esempio, Node.js per JavaScript lato server) o utilizzare un "Polyfill". Il Polyfill per questa funzionalità è, tuttavia, banale e poiché rende il codice più facile da leggere, è un buon polyfill da includere.


Questo è un iteratore per l'elenco NON-sparse in cui l'indice inizia da 0, che è lo scenario tipico quando si ha a che fare con document.getElementsByTagName o document.querySelectorAll)

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;  

Esempi di utilizzo:

Esempio 1

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

Esempio # 2

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

Ogni tag p ottiene class="blue"

Esempio # 3

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

Ogni altro tag p ottiene class="red">

Esempio # 4

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

E infine i primi 20 tag blu p sono cambiati in verde

Attenzione quando si usa la stringa come funzione: la funzione viene creata fuori contesto e dovrebbe essere utilizzata solo quando si è certi dell'ambito della variabile. In caso contrario, è meglio passare le funzioni in cui l'ambito è più intuitivo.


Utilizzo di loop con operatore di destructuring e diffusione ES6

La destrutturazione e l'uso dell'operatore di diffusione si sono rivelati molto utili per i nuovi arrivati ​​a ES6 come più estetici / leggibili, anche se alcuni veterani javascript potrebbero considerarlo disordinato, juniors o qualche altra persona potrebbe trovarlo utile.

I seguenti esempi useranno la for...ofdichiarazione e il .forEachmetodo.

Esempi 6, 7 e 8 possono essere utilizzati con qualsiasi cicli funzionali come .map, .filter, .reduce, .sort, .every, .some, per ulteriori informazioni su questi metodi controllare l'oggetto Array .

Esempio 1:for...of loop normale - nessun trucco qui.

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

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

Esempio 2: divide le parole in caratteri

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);

}

Esempio 3: loop con un keyevalue

// 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);
}

Esempio 4: Ottieni proprietà dell'oggetto in linea

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

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

Esempio 5: Ottieni le proprietà dell'oggetto profondo di ciò che ti serve

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

Esempio 6: E ' Esempio 3 utilizzato con.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);
});

Esempio 7: E ' Esempio 4 utilizzato con.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)
});

Esempio 8: E ' Esempio 5 utilizzato con.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);
});


Se si desidera eseguire il loop su un array, utilizzare il loop standard a tre parti.

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

È possibile ottenere alcune ottimizzazioni delle prestazioni memorizzando myArray.length cache myArray.length o myArray.length al contrario.


Una soluzione facile ora sarebbe usare la libreria underscore.js . Fornisce molti strumenti utili, come ad esempio, eache delegherà automaticamente il lavoro al nativo, forEachse disponibile.

Un esempio CodePen di come funziona è:

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

Guarda anche

  • Array::forEach .
  • In for_each...in (MDN) viene spiegato che for each (variable in object)è deprecato come parte dello standard ECMA-357 ( EAX ).
  • for...of (MDN) descrive il prossimo modo di iterare usando for (variable of object)come parte della proposta di Harmony (ECMAScript 6).

Alcuni linguaggi C -style usano foreach per scorrere le enumerazioni. In JavaScript questo è fatto con la struttura for..in ciclo :

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

C'è un problema. for..in passerà in for..in tutti i membri enumerabili dell'oggetto e i membri sul suo prototipo. Per evitare di leggere valori ereditati attraverso il prototipo dell'oggetto, è sufficiente verificare se la proprietà appartiene all'oggetto:

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

Inoltre, ECMAScript 5 ha aggiunto un metodo forEach a Array.prototype che può essere utilizzato per enumerare su un array usando un calback (il polyfill è presente nei documenti in modo che tu possa ancora usarlo per i browser più vecchi):

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

È importante notare che Array.prototype.forEach non si interrompe quando il callback restituisce false . jQuery e Underscore.js forniscono le proprie varianti su each per fornire loop che possono essere cortocircuitati.


Se non ti dispiace svuotare l'array:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

x conterrà l'ultimo valore di y e verrà rimosso dall'array. Puoi anche usare shift() che darà e rimuoverà il primo elemento da y .


Esistono alcuni modi per eseguire il ciclo di un array in JavaScript, come di seguito:

per - è il più comune. Pieno blocco di codice per il loop

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 - loop mentre una condizione è passata. Sembra essere il ciclo più veloce

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

do / while - passa anche attraverso un blocco di codice mentre la condizione è vera, verrà eseguita almeno una volta

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

Loop funzionali - forEach, map, filter, anche reduce(loro ciclo attraverso la funzione, ma usato se avete bisogno di fare qualcosa con la matrice, etc.

// 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>

Per ulteriori informazioni ed esempi sulla programmazione funzionale sugli array, guarda il post del blog . Programmazione funzionale in JavaScript: mappare, filtrare e ridurre .


Non c'è alcuna abilità intrinseca di intromettersi forEach. Per interrompere l'esecuzione usa il Array#somecome sotto:

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

Funziona perché somerestituisce true non appena uno dei callback, eseguito in ordine di array, restituisce true, cortocircuitando l'esecuzione del resto. Risposta originale vedere il prototipo di array per some


La sintassi lambda normalmente non funziona in IE 10 o sotto.

Di solito uso il

[].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);
});




iteration