Differenza tra Foreach e Map Loop in JavaScript

Differenza tra Foreach e Map Loop in JavaScript
JavaScript ha un pacchetto di metodi integrati per eseguire diverse operazioni matematiche sugli elementi dell'array. IL carta geografica() E per ciascuno() sono due metodi che iterano sugli elementi dell'array esistente. IL carta geografica() Il metodo applica una funzione su ciascun elemento dell'array e restituisce un nuovo array mentre il metodo foreach () utilizza anche la stessa funzione, ma cambia gli elementi dell'array corrente.

Questo post descrive in dettaglio i metodi Map () e Foach () per differenziare questi metodi in JavaScript.

Come funziona il metodo foreach () in javascript?

IL per ciascuno() Il metodo viene impiegato per eseguire alcune operazioni sugli elementi dell'array. Ti consente di eseguire un metodo di callback. IL per ciascuno() Il tipo di restituzione del metodo non è definito in quanto dipende totalmente dalla funzionalità della funzione di richiamata.

È un modo più nuovo di scrivere meno codice che itera su un array. La sintassi del metodo foreach () è fornita di seguito:

Sintassi

vettore.foreach (funzione (elemento, indice, array), thisval)

La descrizione della sintassi è la seguente:

  • funzione (elemento, indice, array): è una funzione richiesta per iterare su elementi dell'array.
  • elemento: Specifica l'elemento array esistente.
  • indice: Rappresenta l'indice dell'elemento esistente.
  • vettore: Specifica il nome dell'array a cui il elemento appartiene a.
  • thisval: rappresenta questo valore della funzione.

Esempio

Il seguente codice di esempio è adattato per discutere dell'uso del per ciascuno() Metodo in JavaScript.

Codice


Un esempio di utilizzo del foreach ()






La descrizione del codice è la seguente:

  • Viene creato un tag che verrà utilizzato per visualizzare l'array.
  • Dopodiché, un array UN è inizializzato con sei elementi da Da 10 a 15.
  • Inoltre, il per ciascuno() il metodo viene utilizzato per iterare sugli elementi dell'array .
  • La proprietà InnerText recupererà tutto il contenuto dell'elemento "div".
  • La proprietà AppendChild viene utilizzata per aggiungere gli elementi figlio all'elemento con ID "id1".

Produzione

Si osserva che gli elementi dell'array sono stampati sulla finestra del browser.

Come funziona il metodo Map () in JavaScript?

Il metodo Map () restituisce elementi trasformati in un nuovo array applicando la funzione di callback a ciascun elemento dell'array. Il metodo è immutabile e può cambiare/alternare i dati. È più veloce rispetto al metodo foreach (). Fornisce caratteristiche metalliche; Gli utenti possono associare i metodi Ord (), Filter () e ridurre () dopo aver applicato la mappa () agli array. Inoltre, restituisce le stesse dimensioni dell'array esistente.

La sintassi è riportata di seguito.

Sintassi

vettore.mappa (funzione (elemento, indice, array), thisval)

La descrizione dei parametri è la seguente:

  • funzione (elemento, indice, array): indica la funzione da applicare su ciascun elemento dell'array.
  • elemento: Specificare l'elemento corrente dell'array
  • indice: rappresentano l'indice dell'elemento corrente
  • vettore: Specificare il nome dell'array per il metodo di callback
  • thisval: mostra il valore corrente della funzione.

Codice

console.log ('un esempio di utilizzo della mappa ()')
const num = [10, 9, 8, 7, 6]
console.registro (num.mappa (ele =>
ele * ele))

La descrizione del codice è elencata qui.

  • In primo luogo, viene visualizzato un messaggio utilizzando il “Console.tronco d'albero()" metodo.
  • Dopodiché, un vettore è impiegato con il nome Num in cui sono definiti cinque elementi.
  • Finalmente il carta geografica() Il metodo viene utilizzato per restituire un nuovo array in cui tutti i suoi elementi sono i multipli di loro stessi.

Produzione

Il risultato del codice mostra che il carta geografica() Il metodo restituisce i valori quadrati 10, 9, 8, 7, E 6 A 100, 81, 64, 49, E 36.

Conclusione

I metodi Map () e Foreach () utilizzano la funzione per eseguire l'iterazione sugli elementi dell'array. Di conseguenza, i metodi Map () creano un array mentre il tipo di ritorno del foreach (0 metodo non è definito. In questo post, è descritta una spiegazione dettagliata del metodo Map () e Foreach () per differenziare questi due metodi iterativi. Entrambi i metodi sono usati per ripetere gli elementi dell'array, tuttavia, il loro modo di lavorare differisce, il che può essere compreso dal contenuto scritto sopra.