7.2 KiB

Raw Blame History

JavaScript Grundlæggende: Arrays og Løkker

Sketchnote af Tomomi Imura

Quiz før lektionen

Denne lektion dækker det grundlæggende i JavaScript, sproget der giver interaktivitet på nettet. I denne lektion lærer du om arrays og løkker, som bruges til at manipulere data.

🎥 Klik på billederne ovenfor for videoer om arrays og løkker.

Du kan tage denne lektion på Microsoft Learn!

Arrays

At arbejde med data er en almindelig opgave i ethvert programmeringssprog, og det er en meget lettere opgave, når data er organiseret i en strukturel form, såsom arrays. Med arrays gemmes data i en struktur, der ligner en liste. En stor fordel ved arrays er, at du kan gemme forskellige typer data i ét array.

✅ Arrays er overalt omkring os! Kan du komme i tanke om et eksempel fra det virkelige liv på et array, såsom en solcellepanel-array?

Syntaksen for et array er et par firkantede parenteser.

let myArray = [];

Dette er et tomt array, men arrays kan deklareres allerede fyldt med data. Flere værdier i et array adskilles med et komma.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

Array-værdierne tildeles en unik værdi kaldet indeks, et heltal, der tildeles baseret på dets afstand fra begyndelsen af arrayet. I eksemplet ovenfor har strengværdien "Chocolate" et indeks på 0, og indekset for "Rocky Road" er 4. Brug indekset med firkantede parenteser til at hente, ændre eller indsætte array-værdier.

✅ Er det overraskende for dig, at arrays starter ved indeks nul? I nogle programmeringssprog starter indekser ved 1. Der er en interessant historie omkring dette, som du kan læse på Wikipedia.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Du kan bruge indekset til at ændre en værdi, som dette:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

Og du kan indsætte en ny værdi på et givet indeks som dette:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ En mere almindelig måde at tilføje værdier til et array er ved at bruge array-operatører såsom array.push()

For at finde ud af, hvor mange elementer der er i et array, skal du bruge length-egenskaben.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Prøv det selv! Brug din browsers konsol til at oprette og manipulere et array, du selv har lavet.

Løkker

Løkker giver os mulighed for at udføre gentagne eller iterative opgaver og kan spare meget tid og kode. Hver iteration kan variere i deres variabler, værdier og betingelser. Der er forskellige typer løkker i JavaScript, og de har alle små forskelle, men gør i bund og grund det samme: løkker over data.

For-løkke

for-løkker kræver 3 dele for at iterere:

counter En variabel, der typisk initialiseres med et tal, der tæller antallet af iterationer
condition Udtryk, der bruger sammenligningsoperatorer til at få løkken til at stoppe, når den er false
iteration-expression Kører i slutningen af hver iteration, typisk brugt til at ændre counter-værdien

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Kør denne kode i en browserkonsol. Hvad sker der, når du laver små ændringer i counter, condition eller iteration-expression? Kan du få den til at køre baglæns og lave en nedtælling?

While-løkke

I modsætning til syntaksen for for-løkker kræver while-løkker kun en betingelse, der stopper løkken, når betingelsen bliver false. Betingelser i løkker afhænger normalt af andre værdier som counters og skal administreres under løkken. Startværdier for counters skal oprettes uden for løkken, og alle udtryk for at opfylde en betingelse, inklusive ændring af counter, skal vedligeholdes inde i løkken.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ Hvorfor ville du vælge en for-løkke frem for en while-løkke? 17K brugere havde det samme spørgsmål på StackOverflow, og nogle af meningerne kan være interessante for dig.

Løkker og Arrays

Arrays bruges ofte med løkker, fordi de fleste betingelser kræver længden af arrayet for at stoppe løkken, og indekset kan også være counter-værdien.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Eksperimentér med at løkke over et array, du selv har lavet, i din browsers konsol.

🚀 Udfordring

Der er andre måder at løkke over arrays end for- og while-løkker. Der er forEach, for-of og map. Skriv din array-løkke om ved hjælp af en af disse teknikker.

Quiz efter lektionen

Gennemgang & Selvstudie

Arrays i JavaScript har mange metoder knyttet til dem, som er ekstremt nyttige til datamanipulation. Læs om disse metoder og prøv nogle af dem (som push, pop, slice og splice) på et array, du selv har lavet.

Opgave

Loop et Array

Ansvarsfraskrivelse:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.

7.2 KiB Raw Blame History