Battle of the JavaScript for loops (for, for...in, for...of, forEach osv.)

At gentage objekter og arrays er noget, enhver udvikler skal gøre. Uanset om du er nybegynder eller erfaren veteran, bliver du til sidst nødt til at finde noget i et større datasæt. Men når du itererer (looper) gennem noget, kan du finde dig selv lidt fortabt med alle de muligheder, du har til rådighed. Så her er en hurtig oversigt over de vigtigste.

Bemærk: Dette er ikke en begynderintroduktion til hvordan for loops fungerer, men snarere en sammenligning af for sløjfemuligheder tilgængelige.

for (den klassiske)

for er langt den mest almindelige loop. Det er ikke specifikt for arrays eller objekter (eller for nogen datastruktur faktisk), og kan kombineres med næsten alt for at skabe kraftfulde og hurtige loops, så længe du konfigurerer dem korrekt. Her er en klassisk for sløjfe i aktion:

for loops kan bruges sammen med break , continue eller return for at skabe en seriøs alsidig funktionalitet.

forHver

forEach giver dig mulighed for at returnere en hel post fra et array. Det er enkelt og ligetil, men kommer ikke med den ekstra break , continue og return funktionalitet fundet med en klassisk for sløjfe. Det ser dog utroligt rent ud.

Tænk på en forEach loop som værende som en renere, array-specifik for løkke.

for...in

for...in loop giver dig mulighed for at gå gennem de utallige egenskaber af et objekt, inklusive dem, der er indstillet af den overordnede prototype (hvis en er til stede).

Nu er det desværre nok ikke det, du ønsker. Du kan tjekke hver iteration for at se, om egenskaben tilhører objektet eller dets prototype (hasOwnProperty ville være perfekt her), men det skader virkelig læsbarheden. Derudover for...in loops returnerer kun strenge, så hvis du sløjfer gennem et array (som virker, på trods af ovennævnte egenskaber), vil du sandsynligvis ikke bruge en af ​​disse.

for...af

for…of itererer over et hvilket som helst talværdigt objekt, konverterer ikke de værdier, det finder, og gør det, mens det understøtter funktionaliteten af ​​break , continue og return .

Tænk på for...of som værende som en renere version af for løkke, specifikt til gentagelige objekter, uden at miste nogen af ​​for loops funktionalitet.

Objektklassen

En konsekvent ulempe ved ovenstående for loops er, at deres kompatibilitet med objekter varierer. Det hele ændrer sig dog med brugen af ​​Object klasse.

Ved at bruge Object , kan vi konvertere vores objekter til arrays (jeg lover, at det snart giver mening) og derefter sløjfe gennem disse arrays med alle ovenstående sløjfer.

Nu vil du normalt se forEach brugt i forbindelse med denne metode, men problemet med det er, at du mister evnen til at break , continue eller return under løkken. Af den grund vil jeg anbefale at overveje en klassisk for loop i forbindelse med denne metode, men her er et eksempel på begge for fuldstændighedens skyld (bemærk, at dette eksempel bruger Object.keys() , som er dækket nedenfor):

Object.keys()

Denne praktiske funktion returnerer en række nøgler fundet i det angivne objekt. Endnu mere praktisk inkluderer det kun nøgler, der tilhører det umiddelbare objekt, og ikke dets prototype, så det betyder, at vi ikke længere ser de overordnede rekvisitter, som vi gør med for...in .

Object.entries()

Denne returnerer hver eneste post i sin helhed, inklusive både ejendom og værdi. Dette kan være mere nyttigt, hvis du vil beholde den nøgle, som du ser værdien af ​​(hvilket du ofte gør).

Object.values()

Som navnet antyder, returnerer denne metode kun de værdier, der findes i et objekt. Intet indeks, ingen nøgle, kun værdier.

Afslutter tingene

Du er måske nået hertil og håber på, at jeg siger "Så sørg for børn, at I altid bruger det bedste loop, <insert loop here> ”.

Men kom nu, det er sjældent sådan programmering fungerer.

I virkeligheden afhænger den rigtige tilgang for dig helt af konteksten. Nogle af ovenstående metoder er hurtigere end andre, nogle er mere nyttige, andre er mere læsbare. Det er op til dig at finde den rigtige kombination af ovenstående, men forhåbentlig har dette hjulpet dig på vej til at træffe den beslutning.