JS til løkkevejledning - Sådan gentages over en matrix i JavaScript

Denne artikel giver dig en solid forståelse af nøjagtigt, hvordan du gentager en Array-datastruktur i JavaScript.

Uanset om du lige er begyndt at lære JavaScript eller er her for en opdatering, vil der være værdi for dig på begge måder. Denne artikel vil lede dig gennem et af de mest anvendte JavaScript-koncepter.

Hvad er en matrix?

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

Ovenfor er et JavaScript-array, der bruges til at gemme flere værdier. Dette er en af ​​de enkleste former for en matrix. Den indeholder 4 "elementer" inde i arrayet, alle strenge. Og som du kan se, er hvert element adskilt med et komma.

Dette eksempel array indeholder forskellige bilmærker og kan henvises til med carsvariablen.

Der er en række måder, vi kan gentage over denne matrix. JavaScript er utroligt funktionsrige, så vi har den luksus at vælge den bedste måde at løse vores problem på.

Sådan håndterer vi iterering over arrays i JavaScript:

  1. Fremhæv 5 almindelige metoder til at gentage over en matrix
  2. Vis nogle indsigter i hver iterativ metode
  3. Angiv en kode, du også kan bruge til at teste den!

Traditionel til løkke

Hvad er en For Loop?

Wikipedia definerer en For Loop som:

"I datalogi er en for-loop (eller simpelthen for loop ) en kontrolflowerklæring til angivelse af iteration, som gør det muligt at udføre kode gentagne gange."

En for loop er en måde at udføre kode gentagne gange på. I stedet for at skrive console.log(“hi”)fem gange, kan du pakke det ind i en for-løkke.

I dette første eksempel lærer vi, hvordan man gentager det bilarray, du har set ovenfor, og udskriver hvert element. Iteratoren eller tælleren starter ved det første indeks “Tesla” og slutter ved den sidste “Audi”. Den bevæger sig gennem arrayet og udskriver et element ad gangen.

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"]; for(let i = 0; i < cars.length; i++) { console.log(cars[i]); }

Produktion:

Tesla Ferrari Lamborghini Audi

Ved at dykke ned i koden videregiver vi tre muligheder til for-sløjfen

  • iteratorvariablen - let i = 0;
  • hvor iteratoren skal stoppe - i < card.length
  • hvor meget for at øge iteratoren hver loop - i++

Denne loop starter os ved 0, øger variablen med en hver loop og stopper, når vi rammer det sidste element i arrayet.

Den vigtigste fordel ved den traditionelle for loop er, at du har mere kontrol.

Det er muligt at få adgang til forskellige elementer i arrayet eller gentage det gennem arrayet på en sofistikeret måde for at løse et komplekst problem. For eksempel kan springe over hvert andet element i arrayet gøres ganske let med den traditionelle for loop.

ForEach-metoden

Hvad er forEach-metoden?

Den forEachmetode bruges til at udføre en funktion for hvert element i dit array. Denne metode er et godt valg, hvis længden af ​​arrayet er "ukendt" eller garanteret at ændre sig. Denne metode kan kun bruges med arrays, sæt og kort.

const amounts = [65, 44, 12, 4]; let doubledAmounts = []; amounts.forEach(item => { doubledAmounts.push(item * 2); }) console.log(doubledAmounts);

Den største fordel ved en forEachsløjfe er at få adgang til hver vare, selvom dit array sandsynligvis vokser i størrelse. Det er en skalerbar løsning til mange brugssager og er lettere at læse og forstå end en traditionel for loop, fordi vi ved, at vi vil gentage hvert element nøjagtigt en gang.

Mens løkke

Hvad er en While Loop?

Wikipedia definerer en While Loop som:

”En while-loop er en kontrolflow-sætning, der gør det muligt at udføre kode gentagne gange baseret på en given boolsk tilstand. Den mens løkken kan opfattes som en gentagelse, hvis erklæring.

En whilesløjfe er en måde at udføre kode gentagne gange for at kontrollere, om en betingelse er sand eller falsk. Så i stedet for at bruge en for-loop med en indlejret if-sætning kan vi bruge en while-loop. Eller hvis vi ikke er i stand til at finde arrayets længde, mens sløjfer er et fremragende valg.

Mens loop kontrolleres ofte af en tæller. I eksemplet nedenfor viser vi en grundlæggende mens sløjfe gentager gennem en matrix. Nøglen er at have kontrol over while-loop, du opretter.

Mens løkkeeksempel (godt):

let i = 0 while (i < 5) { console.log(i); i++; }

Output :

0 1 2 3 4

Mens loop er hvis udsagn er i < 5eller tales højt, "i er mindre end 5". Variablen iøges hver gang løkken kører.

Enkelt sagt betyder det, at 1 føjes til variablen ihver gang løkken udfører en fuld iteration. På den første iteration ier lig med 0, og vi udskriver "0" til konsollen.

Den største risiko for at bruge en while-loop er at skrive en betingelse, der aldrig er opfyldt.

Dette forekommer ofte i virkelige scenarier, hvor nogen skriver et stykke løkke, men glemmer at teste deres løkke, og det introducerer en uendelig løkke i kodebasen.

En uendelig løkke opstår, når betingelsen aldrig er opfyldt, og løkken fortsætter for evigt. Dette resulterer ofte i ødelagte ændringer, som derefter får hele softwareapplikationen til at gå i stykker og stoppe med at arbejde.

Advarsel: Kør ikke denne kode.

Uendelig løkkeeksempel (dårlig):

let i = 0 while (i < 5) { console.log(i); }

Produktion:

Resultaterne kan variere.

Gør mens løkken

Hvad er en do while-loop?

Wikipedia definerer en Do-While-løkke som:

"En do while-loop er en kontrolflowerklæring, der udfører en blok kode mindst en gang og derefter gentagne gange udfører blokken eller ej, afhængigt af en given boolsk tilstand i slutningen af ​​blokken."

En do-while-loop er næsten identisk med en while-loop, men der er en nøgleforskel. Do-while-løkken garanterer altid at udføre kodeblokken mindst én gang før if-sætningen er markeret.

Jeg tænker ofte på det som en reverse mens loop og bruger næsten aldrig dem. De kommer dog godt med i nogle meget specifikke scenarier.

Do-Loop-eksempel (godt):

let i = 0; do { console.log(i); i++; } while (i < 5);

Output :

0 1 2 3 4

Den største risiko for at bruge en do-loop er at skrive en betingelse, der aldrig er opfyldt. (Samme som med en While Loop.)

Advarsel: Kør ikke denne kode.

Uendelig løkkeeksempel (dårlig):

let i = 0; do { console.log(i); } while (i < 5);

Output :

Resultaterne kan variere.

Vil du tage din JavaScript-viden til det næste niveau? Lær om map, hvilket er det samme som forEach, men med en bonus !! ?

BONUS Eksempel (gentagelse med kort)

Hvad er kort?

Wikipedia definerer et kort som:

”I mange programmeringssprog er kort navnet på en højere ordensfunktion, der anvender en given funktion på hvert element i en funktor, f.eks. En liste, der returnerer en liste med resultater i samme rækkefølge. Det kaldes ofte gælder for alle, når det betragtes i funktionel form. ”

How does it work? The map function in JavaScript applies a function to every element inside the array. Please take a moment to re-read that sentence.

Afterwards, the map function returns a new array with the results of applying a function to every element in the array.

Map example:

const array = [1, 1, 1, 1]; // pass a function to map const results = array.map(x => x * 2); console.log(results);

Output:

[2,2,2,2]

We have applied the map function to the array containing four 1's. The map function then multiplied each element by 2, i.e., x * 2, and returned a new array. The new array was then stored in the results variable.

By viewing our output, we can see this worked successfully. Every element in the array has been multiplied by 2. This method can be used as a replacement to a loop in some cases, and is incredibly powerful.

Konklusion

Godt klaret! Du har lært fem forskellige måder at gentage over en matrix i JavaScript. Dette er de grundlæggende byggesten, der sætter dig i stand til succes i din JavaScript-programmeringsrejse.

Du er også blevet udsat for et avanceret koncept map, som ofte bruges i store softwareapplikationer.

Så jeg efterlader dig med dette: hvordan skal du bruge arrays i dine projekter? Og hvilken iterationsmetode syntes du var mest spændende?  

Tak for læsningen!

Hvis du kunne lide min artikel, skal du følge mig og / eller sende mig en besked!  

Twitter • Medium • Github