Perché è possibile ' interrompere un ciclo forEach / ByteSize JS

Recentemente ho avuto un’intervista di codifica che ha coinvolto la valutazione di uno schema contro un altro. I dettagli di esso non sono così importanti, ma una cosa che ne è uscita (nel bel mezzo dell’intervista) era che non si può uscire da un ciclo forEach(). Avevo dimenticato quel piccolo bocconcino e probabilmente ha rovinato le mie possibilità di essere assunto. Dopo aver letto questo, si spera, non si farà lo stesso errore che ho fatto! Non essere come me.

https://media.giphy.com/media/nRkQduJDZ43bW/giphy.gif

Se si preferisce guardare che leggere, controllare la versione video di questo!

MDN conosce tutto

Come notato da MDN:

Non c’è modo di interrompere o interrompere un ciclo forEach() se non lanciando un’eccezione. Se hai bisogno di tale comportamento, il metodo forEach() è lo strumento sbagliato

Questo è un sass hardcore proveniente dai documenti MDN. Tuttavia, hanno ragione, sapendo quale strumento scegliere è importante.

Prima di entrare troppo in profondità nel motivo per cui non puoi uscire da un forEach(), esaminiamo cos’è un ciclo e da dove proviene forEach().

Che cos’è un ciclo

Un ciclo in programmazione risolve un problema piuttosto comune: Ho bisogno di eseguire lo stesso codice contro tutti questi dati. In parole povere, è:

Ripetendo lo stesso codice più e più volte (in loop) fino a raggiungere uno stato finale definito.

Il problema

Per motivi di confronto, risolveremo lo stesso problema usando i vari tipi di loop. Ecco il problema:

Confronta due array e vedi se gli elementi in essi contenuti sono gli stessi.

Ecco i dati che stiamo per confrontare:

 const jedis = const sith = 

Abbiamo due array, entrambi con un paio di nomi. Probabilmente noterai che Anakin è sia un Jedi che un Sith. Questo è un esempio banale, tuttavia non lontano da quello su cui sono stato testato durante la mia intervista.

Il vecchio modo

Quello che non voglio che tu ottenga da questo articolo è che un ciclo è migliore di un altro. Tutti offrono soluzioni di programmazione uniche e hanno un posto per casi d’uso specifici. Il trucco è sapere quale usare quando.

Tradizionale per Loop

Se hai mai preso qualsiasi tipo di corso di programmazione, probabilmente sei stato esposto al nostro buon amico il loop for. È stato uno strumento utile per i programmatori per molto tempo ed è ancora utile oggi. Risolviamo il nostro problema usandolo.

// Our data again, for referenceconst jedis = ;const sith = ;// start our loop, define our iterator variablefor (let i = 0; i < jedis.length; i++) { // create a variable we can reference const thisJedi = jedis; // see if the item in the array we are testing exists if (sith.includes(thisJedi)) { // If it does exist, then that jedi is also a sith console.log(`${thisJedi} is also a Sith`); // we can exit out break; } console.log(`${thisJedi} is not a Sith`);}

Il ciclo for offre un modo piuttosto pratico di uscire dal nostro codice se soddisfa una condizione che scegliamo. Questo è immensamente utile quando si esegue il loop su una TONNELLATA di dati. È stato molto utile per risolvere alcuni dei problemi del Progetto Euler, in particolare questo.

Il nuovo Another Way

Tra le altre cose, forEach() è stato timbrato nelle specifiche nel 2009 insieme a tutte le altre bontà che ci sono state date in ES5. Serve come un metodo pratico per scrivere codice pulito che itera facilmente su elementi in un array.

Che cosa sta facendo?

Un ciclo forEach() è una funzione che esegue un’altra funzione (callback) su ciascun elemento di un array. Definiamo cosa succede in quella funzione di callback. JS è abbastanza bello da darci tre parametri in quella funzione:

  1. L’elemento nell’array
  2. L’indice dell’elemento
  3. L’intero array

Diamo un’occhiata al nostro problema usando invece un ciclo forEach(). Ho incluso tutti e tre i parametri nella funzione, ma stiamo usando solo il primo, l’elemento, che sto nominando jedi

 // We have to create a global state variable to keep track of what is happening let matching // loop over array jedis.forEach((jedi,index,array) => { // check to see if jedi is in sith if(!sith.includes(jedi)) { // if it isn't, set global variable to false matching = false } // it keeps going... }) console.log(matching) // false

Se ha più senso, è possibile refactoring la funzione di callback in una funzione denominata. Penso che lo renda un po ‘ più leggibile. Ci permette anche di riutilizzare questa funzione dove vogliamo. Yay programmazione funzionale!

 let matching function isJediAlsoSith(jedi,index,array) { if(!sith.includes(jedi)) { matching = false } } jedis.forEach(isJediAlsoSith)

La nostra soluzione essenzialmente fa la stessa cosa. L’unica differenza è che continua a funzionare fino a raggiungere la fine dell’array jedis. Per una serie di dimensioni così ridotte, dubito che farà molta differenza di prestazioni.

Ma perché?

Questo ci porta finalmente alla risposta alla nostra domanda, perché non possiamo uscire da un ciclo forEach()? È perché il ciclo sta eseguendo quella funzione di callback su ogni elemento, quindi anche se scrivi un return ritorna solo su quell’istanza della funzione. Continua ad andare. Nel caso della funzione forEach(), non fa nulla con il codice restituito. Tieni presente che non è il caso di alcuni degli altri metodi di array.

Inoltre, a causa di ciò, break o continue non sono dichiarazioni valide.

Altri modi

Ci sono diversi tipi di loop. Hanno tutti scopi diversi e consiglierei di esaminare ciascuno di essi. Non hai sempre bisogno di un ciclo forEach().

https://media.giphy.com/media/tnwuVMx6n1VtK/giphy.gif

forEach () vs map ()

Probabilmente, i metodi di array più comuni che appaiono nelle esercitazioni sono forEach() e map() . La più grande differenza tra i due è che map restituirà un nuovo Array, mentre un forEach() non lo farà.

Loop tradizionali

mentre loop

Metodi array

Array.forEach ()

Array.mappa ()

Matrice.filter ()

Array.ridurre ()

Array.reduceRight ()

Array.ogni ()

Array.alcuni ()

Array.indexOf ()

Matrice.lastIndexOf ()

Matrice.trova ()

Array.findIndex()

Iterable Object Loops (compresi gli array)

per in

per di

Questo è il modo

Baby Yoda

Come accennato in precedenza dai documenti MDN incredibilmente impertinenti, scegliendo lo strumento giusto è fondamentale per il successo. Il numero di opzioni può sembrare un po ‘ opprimente in un primo momento, ma mi piace prendere l’approccio di: “se funziona, è lo strumento giusto.”

In generale, puoi refactoring il tuo codice a morte, ma poi stai solo perdendo tempo potresti costruire cose. Nel caso della mia intervista, stavo usando lo strumento giusto, nel modo sbagliato. Se avessi saputo ricordato che non puoi uscire da un ciclo forEach, le cose probabilmente sarebbero andate diversamente️️.

Se avete ulteriori informazioni condividi, si prega di cadere nei commenti qui sotto!

Come sempre, codifica felice.

Plugs

Sto scrivendo un libro sulla progettazione grafica e su come si relaziona con lo sviluppo del software! Se sei interessato, iscriviti qui per gli aggiornamenti.

https://digitalnutt.substack.com/p/coming-soon?r=34slo&utm_campaign=post&utm_medium=web&utm_source=copy

Musica

Scrivo anche musica! Guarda qui: Spotify / Youtube / Apple Music

Supporto

Se ti piace questo articolo e vuoi vedere di più, il modo migliore per farlo è iscrivermi/seguirmi qui! Se ti senti gentile, puoi offrirmi un caffè!



+