16 KiB

Raw Permalink Blame History

Grunnleggende JavaScript: Arrays og Løkker

Sketchnote av Tomomi Imura

Quiz før forelesning

Har du noen gang lurt på hvordan nettsider holder styr på varer i handlekurven eller viser vennelisten din? Det er her arrays og løkker kommer inn. Arrays er som digitale beholdere som lagrer flere informasjonsbiter, mens løkker lar deg jobbe med all denne dataen effektivt uten å måtte skrive repetitiv kode.

Sammen utgjør disse to konseptene grunnlaget for å håndtere informasjon i programmene dine. Du vil lære å gå fra å manuelt skrive ut hvert enkelt trinn til å lage smart, effektiv kode som kan behandle hundrevis eller til og med tusenvis av elementer raskt.

Ved slutten av denne leksjonen vil du forstå hvordan du kan utføre komplekse databehandlingsoppgaver med bare noen få linjer kode. La oss utforske disse essensielle programmeringskonseptene.

🎥 Klikk på bildene ovenfor for videoer om arrays og løkker.

Du kan ta denne leksjonen på Microsoft Learn!

Arrays

Tenk på arrays som et digitalt arkivskap - i stedet for å lagre ett dokument per skuff, kan du organisere flere relaterte elementer i en enkelt, strukturert beholder. I programmering lar arrays deg lagre flere informasjonsbiter i én organisert pakke.

Enten du bygger et fotogalleri, administrerer en oppgaveliste eller holder styr på poengsummer i et spill, gir arrays grunnlaget for dataorganisering. La oss se hvordan de fungerer.

✅ Arrays er overalt! Kan du komme på et eksempel fra virkeligheten, som en solcellepanel-array?

Opprette Arrays

Å opprette en array er superenkelt - bruk bare firkantede parenteser!

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

Hva skjer her? Du har nettopp opprettet en tom beholder ved hjelp av de firkantede parentesene []. Tenk på det som en tom bokhylle - den er klar til å holde hvilke som helst bøker du vil organisere der.

Du kan også fylle arrayen med startverdier med en gang:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

Kule ting å merke seg:

Du kan lagre tekst, tall eller til og med sann/usann-verdier i samme array
Bare skill hvert element med et komma - enkelt!
Arrays er perfekte for å holde relatert informasjon samlet

Array-indeksering

Her er noe som kanskje virker uvanlig i starten: arrays nummererer elementene sine fra 0, ikke 1. Denne nullbaserte indekseringen har sine røtter i hvordan dataminne fungerer - det har vært en programmeringskonvensjon siden de tidlige dagene av programmeringsspråk som C. Hver plass i arrayen får sitt eget adressenummer kalt en indeks.

Indeks	Verdi	Beskrivelse
0	"Sjokolade"	Første element
1	"Jordbær"	Andre element
2	"Vanilje"	Tredje element
3	"Pistasj"	Fjerde element
4	"Rocky Road"	Femte element

✅ Overrasker det deg at arrays starter på nullindeks? I noen programmeringsspråk starter indekser på 1. Det finnes en interessant historie rundt dette, som du kan lese på Wikipedia.

Tilgang til Array-elementer:

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

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

Hva skjer her:

Bruker firkantet parentesnotasjon med indeksnummer for å få tilgang til elementer
Returnerer verdien lagret på den spesifikke posisjonen i arrayen
Starter tellingen fra 0, som gjør det første elementet indeks 0

Endring av Array-elementer:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

I eksempelet ovenfor har vi:

Endret elementet på indeks 4 fra "Rocky Road" til "Butter Pecan"
Lagt til et nytt element "Cookie Dough" på indeks 5
Utvidet arrayens lengde automatisk når vi legger til utover nåværende grenser

Array-lengde og vanlige metoder

Arrays kommer med innebygde egenskaper og metoder som gjør det mye enklere å jobbe med data.

Finne Array-lengde:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

Viktige punkter å huske:

Returnerer det totale antallet elementer i arrayen
Oppdateres automatisk når elementer legges til eller fjernes
Gir en dynamisk telling som er nyttig for løkker og validering

Essensielle Array-metoder:

const fruits = ["apple", "banana", "orange"];

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

Forstå disse metodene:

Legger til elementer med push() (slutt) og unshift() (start)
Fjerner elementer med pop() (slutt) og shift() (start)
Lokaliserer elementer med indexOf() og sjekker eksistens med includes()
Returnerer nyttige verdier som fjernede elementer eller posisjonsindekser

✅ Prøv det selv! Bruk nettleserens konsoll for å opprette og manipulere en array du lager selv.

Løkker

Tenk på den berømte straffen fra Charles Dickens' romaner der elever måtte skrive linjer gjentatte ganger på en tavle. Tenk om du bare kunne instruere noen til "skriv denne setningen 100 ganger" og få det gjort automatisk. Det er akkurat det løkker gjør for koden din.

Løkker er som å ha en utrettelig assistent som kan gjenta oppgaver uten feil. Enten du trenger å sjekke hvert element i en handlekurv eller vise alle bildene i et album, håndterer løkker repetisjonen effektivt.

JavaScript tilbyr flere typer løkker å velge mellom. La oss undersøke hver av dem og forstå når de skal brukes.

For-løkke

for-løkka er som å sette en timer - du vet nøyaktig hvor mange ganger du vil at noe skal skje. Den er superorganisert og forutsigbar, noe som gjør den perfekt når du jobber med arrays eller trenger å telle ting.

Struktur for For-løkke:

Komponent	Formål	Eksempel
Initialisering	Setter startpunkt	`let i = 0`
Betingelse	Når den skal fortsette	`i < 10`
Inkrement	Hvordan oppdatere	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

Trinn for trinn, her er hva som skjer:

Initialiserer tellevariabelen i til 0 i starten
Sjekker betingelsen i < 10 før hver iterasjon
Utfører kodeblokken når betingelsen er sann
Inkrementerer i med 1 etter hver iterasjon med i++
Stopper når betingelsen blir usann (når i når 10)

✅ Kjør denne koden i en nettleserkonsoll. Hva skjer når du gjør små endringer i telleren, betingelsen eller iterasjonsuttrykket? Kan du få den til å kjøre baklengs, som en nedtelling?

While-løkke

while-løkka er som å si "fortsett med dette til..." - du vet kanskje ikke nøyaktig hvor mange ganger den vil kjøre, men du vet når den skal stoppe. Den er perfekt for ting som å be en bruker om input til de gir deg det du trenger, eller søke gjennom data til du finner det du leter etter.

Kjennetegn ved While-løkke:

Fortsetter å kjøre så lenge betingelsen er sann
Krever manuell håndtering av eventuelle tellevariabler
Sjekker betingelsen før hver iterasjon
Risikerer uendelige løkker hvis betingelsen aldri blir usann

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

Forstå disse eksemplene:

Håndterer tellevariabelen i manuelt inne i løkkens kropp
Inkrementerer telleren for å forhindre uendelige løkker
Demonstrerer praktisk bruk med brukerinput og begrensning av forsøk
Inkluderer sikkerhetsmekanismer for å forhindre endeløs kjøring

Moderne løkkealternativer

JavaScript tilbyr moderne løkkesyntaks som kan gjøre koden din mer lesbar og mindre feilutsatt.

For...of-løkke (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

Viktige fordeler med for...of:

Eliminerer indeksstyring og potensielle feil med én avvik
Gir direkte tilgang til array-elementer
Forbedrer kodelesbarhet og reduserer syntakskompleksitet

forEach-metode:

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

Hva du trenger å vite om forEach:

Utfører en funksjon for hvert array-element
Gir både elementverdi og indeks som parametere
Kan ikke stoppes tidlig (i motsetning til tradisjonelle løkker)
Returnerer undefined (lager ikke en ny array)

✅ Hvorfor ville du valgt en for-løkke kontra en while-løkke? 17K lesere hadde det samme spørsmålet på StackOverflow, og noen av meningene kan være interessante for deg.

Løkker og Arrays

Å kombinere arrays med løkker skaper kraftige databehandlingsmuligheter. Denne kombinasjonen er grunnleggende for mange programmeringsoppgaver, fra å vise lister til å beregne statistikk.

Tradisjonell Array-behandling:

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

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

La oss forstå hver tilnærming:

Bruker arrayens lengdeegenskap for å bestemme løkkens grense
Får tilgang til elementer via indeks i tradisjonelle for-løkker
Gir direkte elementtilgang i for...of-løkker
Behandler hvert array-element nøyaktig én gang

Praktisk eksempel på databehandling:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

Slik fungerer denne koden:

Initialiserer sporingsvariabler for sum og ytterpunkter
Behandler hver karakter med en enkelt effektiv løkke
Akkumulerer totalen for gjennomsnittsberegning
Sporer høyeste og laveste verdier under iterasjon
Beregner endelige statistikker etter løkkens fullføring

✅ Eksperimenter med å iterere over en array du lager selv i nettleserens konsoll.

GitHub Copilot Agent-utfordring 🚀

Bruk Agent-modus for å fullføre følgende utfordring:

Beskrivelse: Bygg en omfattende databehandlingsfunksjon som kombinerer arrays og løkker for å analysere et datasett og generere meningsfulle innsikter.

Prompt: Lag en funksjon kalt analyzeGrades som tar en array av studentkarakterobjekter (hver inneholder navn og score-egenskaper) og returnerer et objekt med statistikk inkludert høyeste score, laveste score, gjennomsnittsscore, antall studenter som bestod (score >= 70), og en array av studentnavn som scoret over gjennomsnittet. Bruk minst to forskjellige løkketyper i løsningen din.

Lær mer om agent-modus her.

🚀 Utfordring

JavaScript tilbyr flere moderne array-metoder som kan erstatte tradisjonelle løkker for spesifikke oppgaver. Utforsk forEach, for-of, map, filter, og reduce.

Din utfordring: Refaktorer eksempelet med studentkarakterer ved å bruke minst tre forskjellige array-metoder. Legg merke til hvor mye renere og mer lesbar koden blir med moderne JavaScript-syntaks.

Quiz etter forelesning

Gjennomgang og selvstudium

Arrays i JavaScript har mange metoder knyttet til seg, som er ekstremt nyttige for datamanipulering. Les om disse metodene og prøv noen av dem (som push, pop, slice og splice) på en array du lager selv.

Oppgave

Iterer en Array

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.

16 KiB Raw Permalink Blame History