it-swarm.dev

Per ognuno su un array in JavaScript?

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 non essere corretto.

4056
Dante1986

Modifica: questa risposta è irrimediabilmente obsoleta. Per un approccio più moderno, guarda a 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 è un ciclo for- di Vanilla:

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, poiché si eseguiranno iterazioni su molti indici che non esistono realmente nell'array. In questo caso, un ciclo for .. in- 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 le proprietà aggiuntive sono definite come enumerable.

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

473
PatrikAkerstrand

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].
}
214
Poonam

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

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

C'è un problema. for..in eseguirà il looping di ciascuno dei membri enumerabili dell'oggetto e dei 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 forEach metodo a Array.prototype che può essere usato per enumerare su un array usando un calback (il polyfill è presente nei documenti in modo da poterlo usare ancora 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.

75
zzzzBov

Se si desidera eseguire il loop su un array, utilizzare il ciclo for standard in tre parti.

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

È possibile ottenere alcune ottimizzazioni delle prestazioni memorizzando nella cache myArray.length o eseguendo il iterating al contrario.

34
Quentin

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

angular.forEach accetta 2 argomenti e un terzo argomento opzionale. Il primo argomento è l'oggetto (array) per iterare su, 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 forAach 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 pro e contro nell'usare la funzione angular.forEach rispetto al ciclo for con aroma Vanilla.

Professionisti

  • Facile leggibilità
  • Facile scrivibilità
  • Se disponibile, angular.forEach utilizzerà il ciclo forEach di ES5. Ora, arriverò all'efficacia nella sezione contro, poiché i cicli forE sono molto più lenti dei cicli for. Lo dico come un 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 very difficile da leggere e scrivere per quella materia.

Contro

  • Efficienza. angular.forEach, e il forEach nativo, del resto, sono entrambi così tanto più lento del normale for loop .... circa 90% più lento . Pertanto, per i set di dati di grandi dimensioni, è meglio attenersi al ciclo for nativo.
  • Nessuna interruzione, continuazione o restituzione del supporto. continue è attualmente supportato da " accident ", per continuare in un angular.forEach è sufficiente inserire un'istruzione return; nella funzione come angular.forEach(array, function(item) { if (someConditionIsTrue) return; }); che farà sì che continui a uscire dalla funzione per quella iterazione. Ciò è anche dovuto al fatto che il nativo forEach non supporta l'interruzione o il proseguimento.

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 ciclo for 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 lanciare un angular.forEach in quel ragazzaccio.

28
user2359695

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.

27
gaby de wilde

Implementazione di 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
  }
);
27
nmoliveira

Una soluzione facile ora sarebbe usare la libreria underscore.js . Fornisce molti strumenti utili, come each e delegherà automaticamente il lavoro al nativo forEach se disponibile.

Un esempio di CodePen di come funziona è:

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

Guarda anche

24
Micka

Ci sono tre implementazioni di foreach in 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
24
Rajesh Paul

Probabilmente il ciclo for(i = 0; i < array.length; i++) 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]. In primo luogo, questo per prima cosa si riferirà 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
//!!!
22

A partire da ES6:

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

Dove of evita le stranezze associate a in e lo fa funzionare come il ciclo for di qualsiasi altra lingua, e let collega i all'interno del ciclo anziché all'interno della funzione.

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

21
Zaz

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.

17
Tim

Non esiste alcun ciclo for each in nativo JavaScript . Puoi usare le librerie per ottenere questa funzionalità (ti consiglio Underscore.js ), usa un semplice for in loop.

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

Tuttavia, si noti che potrebbero esserci motivi per utilizzare un ciclo for ancora più semplice (si veda Stack Overflow question Perché si sta usando "for ... in" con iterazione dell'array una cattiva idea?)

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

Ci sono pochi modi per scorrere un array in JavaScript, come di seguito:

for - è 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>

I loop funzionali - forEach, map, filter, anche reduce (passano in rassegna la funzione, ma vengono usati se devi fare qualcosa con il tuo array, ecc.

// 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, consultare il post del blog Programmazione funzionale in JavaScript: mappare, filtrare e ridurre.

16
Alireza

ECMAScript5 (la versione su Javascript) per lavorare con gli array.

forEach - Iterates attraverso ogni elemento dell'array e fa tutto il necessario con ogni elemento.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

Nel caso, più interessato al funzionamento su array utilizzando alcune funzionalità integrate.

map - Crea una nuova matrice con il risultato della funzione di callback. Questo metodo è utile quando è necessario formattare gli elementi dell'array.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

reduce - Come dice il nome, riduce la matrice a un singolo valore chiamando la funzione data passando nell'elemento currenct e il risultato dell'esecuzione precedente.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

every - Restituisce true o false se tutti gli elementi dell'array superano il test nella funzione di callback.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - Molto simile a tutti tranne che al filtro restituisce una matrice con gli elementi che restituiscono true alla funzione data.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

Spero che questo sia utile.

14
Anil Kumar Arya

Non esiste alcuna abilità intrinseca di intromissione di forEach. Per interrompere l'esecuzione usa Array#some come di seguito:

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

Questo perché some restituisce true non appena uno dei callback, eseguito in ordine di array, restituisce true, cortocircuitando l'esecuzione del resto. Risposta originale Vedere Prototipo di matrice per alcuni

14

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 looping 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.

modo jQuery usando $.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];
10
DanFromGermany

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

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

Un altro modo possibile sarebbe utilizzare Array.map() che funziona allo stesso modo ma anche mutates ogni elemento e lo restituisce come:

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

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

Utilizzo di loop con ES6 destrutturazione e operatore di spread

La destrutturazione e l'utilizzo 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 for...of statement e .forEach method.

Gli esempi 6, 7 e 8 possono essere utilizzati con qualsiasi loop funzionale come .map, .filter, .reduce, .sort, .every, .some, per ulteriori informazioni su questi metodi, consultare Array Object .

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

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

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

Esempio 2: Dividi parole ai 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 key e value 

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

6
darklightcode

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);
});
5
Murtuza Husain

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
}
4
Nouman Dilshad

se si desidera eseguire il ciclo attraverso la matrice di oggetti con la funzione freccia:

let arr=[{name:'john',age:50},{name:'clark',age:19},{name:'mohan',age:26}];

arr.forEach((person)=>{
  console.log('i am '+person.name+' and i am '+person.age+ ' old');
})
3
subhashish negi

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 loop

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ù convincente) per eseguire l'iterazione dell'array in javascript.

Creazione di un nuovo array: Map

map() è una funzione situata su Array.prototype che può trasformare ogni elemento di un array e quindi restituisce un new array. map() accetta come argomento una funzione di callback e funziona nel seguente modo:

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 in 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 array viene trasformato dalla funzione di callback passata come argomento a map().

La netta differenza tra map e altri meccanismi del ciclo come forEach e un for..of loop sono chemap ritorna come nuovo array e lascia intatto il vecchio array (eccetto se lo si manipola esplicitamente con think splice). 

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

Loop usando forEach

forEach è una funzione che si trova su Array.prototype che accetta come argomento una funzione di callback. Quindi esegue questa funzione di callback per ogni elemento dell'array. A differenza della funzione map(), la funzione forE 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 funzione map, la callback forEach fornisce come secondo argomento il numero di indice dell'iterazione corrente. Inoltre, il terzo argomento fornisce l'array su cui è stato chiamato forEach

Passa attraverso gli elementi usando for..of

Il ciclo for..of scorre in ogni elemento di una matrice (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 sopra element sta per un elemento dell'array e arr è l'array che vogliamo fare il ciclo. Non che il nome element sia arbitrario e potremmo aver scelto qualsiasi altro nome come 'el' o qualcosa di più dichiarativo quando questo è applicabile. 

Non confondere il ciclo for..in con il ciclo for..of. for..in eseguirà il ciclo di tutte le proprietà enumerabili dell'array mentre il ciclo for..of eseguirà solo il loop degli 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);
}

2

Se disponi di un enorme array dovresti usare iterators per guadagnare un po 'di efficienza. Iterator sono una proprietà di alcune raccolte JavaScript (come Map , Set , String , Array ). Anche, for..of usa iterator sotto il cofano.

Gli iteratori migliorano l'efficienza consentendo di consumare gli elementi in un elenco uno alla volta come se fossero uno stream. Ciò che rende speciale un iteratore è come attraversa una collezione. Altri loop devono caricare l'intera raccolta in anticipo per iterare su di essa, mentre un iteratore deve solo conoscere la posizione corrente nella raccolta. 

Si accede all'elemento corrente chiamando il metodo next dell'iteratore. Il metodo successivo restituirà value dell'elemento corrente e un boolean per indicare quando hai raggiunto la fine della raccolta. Di seguito è riportato un esempio di creazione di un iteratore da un array. 

Trasforma il tuo array normale in iteratore usando values() metodo come questo: 

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Puoi anche trasformare il tuo array normale in iterator usando Symbol.iterator in questo modo: 

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Puoi anche trasformare il tuo array regolare in iterator in questo modo: 

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

NOTA

  • Gli iteratori sono di natura inesauribile. 
  • Gli oggetti non sono iterable per impostazione predefinita. Usa for..in in questo caso perché invece dei valori funziona con le chiavi.

Puoi leggere ulteriori informazioni su iteration protocolhere

1
BlackBeard
var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})
1
John

// Looping through arrays using foreach  ES6 way

var data = new Array(1,2,3,4,5);
data.forEach((val,index) => {
    console.log("index :",index); // index
	console.log("value :", val); // value
});

0
arul prince

È possibile utilizzare API forEach () (fornita da Javascript) che accetta una funzione come callback e viene eseguita una volta per ogni elemento presente all'interno dell'array.

https://fullstackgeek.blogspot.com/2019/01/arrays-in-javascript-part-2.html

0
Ayush Jain

Vengo da Python e ho trovato questo modo molto più chiaro.
theArray è l'array, l'istanza è l'elemento dell'array

for(let instance of theArray)
{
    console.log("The instance",instance);
}

o

for( instance in theArray)
{
  console.log("The instance",instance);
}

confrontare con:

theArray.forEach(function(instance) {
    console.log(instance);
});

ma alla fine del giorno stanno entrambi facendo la stessa cosa

0
Peko Chan

Se vuoi mantenere il tuo codice nel modo funzionale, usa la mappa:

theArray.map(instance => do_something);

In questo modo genererai un nuovo array per le operazioni future e salterai qualsiasi effetto collaterale non desiderabile.

0
alejoko

Se si desidera utilizzare forEach(), sarà simile a: 

theArray.forEach ( element => {
    console.log(element);
});

Se si desidera utilizzare for(), sarà simile a: 

for(let idx = 0; idx < theArray.length; idx++){
    let element = theArray[idx];
    console.log(element);
}
0
Harunur Rashid