I den här laborationen skall vi undersöka “arrayer”. En array är en datastruktur som kan lagra flera värden i en enda variabel. Detta är användbart när du vill hantera listor av saker, som t.ex. en lista med namn, tal eller andra objekt.
0 - Skapa en arbetsmapp
Innan du börjar, skapa en ny labb-mapp som du kan kalla lab-3b där du sparar filerna för just den här laborationen.
1 - Förbered filerna
Skapa en fil index.html med innehållet nedan och en tom script.js och öppna sedan sidan med Live Server:
<!DOCTYPE html>
<html>
<head>
<title>Arrayer</title>
<script type="module" src="script.js"></script>
</head>
<body>
<h1>Arrayer</h1>
<p>Öppna webbläsarens konsol (F12 → Console)</p>
</body>
</html>
2 - Skapa listor
För att skapa arrayer använder vi hakparenteser []. Inom hakparenteserns lägger vi de värden vi vill lagra. Jämför med hur vi skapar strängar, då använder vi citattecken, och inom citattecknen lägger vi texten vi vill lagra.
Värdena kan vara vilka datatyper som helst, inklusive strängar, tal, boolska värden eller till och med andra arrayer och objekt. Det går till och med att blanda olika datatyper i samma array. Vi separerar värdena med kommatecken.
Lägg till följande i script.js:
let colors = ["red", "green", "blue"];
console.log("colors", colors);
let numbers = [42, 3, 13, 7];
console.log("numbers", numbers);
let mixed = ["hello", 747, true, null];
console.log("mixed", mixed);
Testa: Lägg själv till flera arrayer med värden som har med vararande att göra, t.ex. namn på djur, städer eller något annat du gillar. Tänk på att ge variablerna beskrivande namn.
2 - Åtkomst av element i en array
Varje element (varje separat värde) i en array är knutet till ett index, vilket plats i listan det elementet ligger på. Viktigt att notera är att indexeringen börjar på 0. Det betyder att det första elementet i en array har index 0, det andra elementet har index 1, och så vidare. För att komma åt ett element via dess index använder vi hakparenteser [] efter arrayens namn, med indexet inom parenteserna.
Lägg till följande i script.js:
console.log("Första färgen:", colors[0]); // "red"
console.log("Andra färgen:", colors[1]); // "green"
const secondNumber = numbers[1];
console.log("Andra talet:", secondNumber); // 3
Vi kan som sagt också använda index för att uppdatera värden i en array. Lägg till följande i script.js:
colors[1] = "yellow"; // ändrar "green" till "yellow"
console.log("Uppdaterade färger:", colors);
Testa:
- Skriv ut det första, andra och tredje elementet i dina egna arrayer
- Uppdatera ett element i en av dina arrayer och skriv ut den uppdaterade arrayen.
- Kan du skriva ut det sista elementet i en array? Hur skulle du göra det?
- Använd ett index som är större än antalet element i en array när du skall läsa ut ett värde. Vad händer i konsolen?
3 - Längden av en array
Varje array har en egenskap som heter length som berättar hur många element som finns i arrayen. Egenskaper har vi stött på innan, exempelvis innerHTML och textContent på html-element, de kommer vi åt genom att sätta en punkt efter variabelnamnet. Lägg till följande i script.js:
console.log("Längden på colors:", colors.length);
console.log("Längden på numbers:", numbers.length);
console.log("Längden på mixed:", mixed.length);
Din tur: Logga längden på dina egna arrayer.
4 - Loopar och arrayer
Med hjälp av length kan vi också enkelt skapa loopar som går igenom alla element i en array. I script.js, skapa en for-loop som skriver ut alla färger i colors-arrayen genom att använda length i villkoret:
console.log('Alla färger, en i taget:');
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
Din tur: Loopa igenom och logga värdena i en av dina egna arrayer.
for...of-loopar
Det finns faktiskt ett enklare sätt att loopa igenom alla element i en array. Med hjälp av en sk. for…of-loop, en speciell loop som är gjort just för arrayer. Den fungerar så här:
console.log('Alla färger (med for...of):');
for (let color of colors) {
console.log(color);
}
Här behöver vi alltså inte använda något index för att komma åt elementen, utan varje element i arrayen tilldelas automatiskt till variabeln color i varje iteration av loopen. Så om du inte behöver indexet för något speciellt ändamål så är detta det rekomenderade sättet att loopa igenom alla element i en lista.
Din tur: Använd en for...of-loop för att logga värdena i en av dina egna arrayer.
4 - Lägg till och ta bort element
Arrayer har flera inbyggda metoder för att lägga till och ta bort element. Metoder har vi, liksom egenskaper, stött på innan. Det är funktioner som kan köras på ett givet objekt. Exempel som ni känner igen är console.log, document.querySelector och Math.random. Precis som med egenskapar så kan vi anropa en metod på ett objekt genom att sätta en punkt efter variabelnamnet.
Här är de vanligaste metoderna för att lägga till och ta bort element i en array:
push: Lägger till ett värde i slutet av arrayen.pop: Tar bort det sista värdet i arrayen och returnerar det.
Testa följande i script.js:
colors.push("pink"); // Lägg till i slutet
console.log("colors (efter tillägg)", colors);
colors.push("black", "white"); // Lägg till flera i slutet
console.log("colors (efter fler tillägg)", colors);
let c = colors.pop(); // Ta bort från slutet
console.log("borttagen färg", c);
console.log("colors (efter borttagning)", colors);
Ofta behöver man programmatiskt bygga upp en array från grunden, genom att lägga till element ett i taget.
Testa att skapa en tom array (genom att använda hakparenteser, men inte ange några värden mellan dem), och sedan lägga till värden med push från exempelvis en loop. Fortsätt i script.js:
let evenNumbers = []; // tom array
for (let i = 1; i < 10; i += 1) {
evenNumbers.push(i*2);
}
console.log("evenNumbers", evenNumbers);
Din tur: Testa att lägga till och ta bort element i dina egna arrayer med push och pop. Logga resultatet i konsolen för att se vad som händer.
5 - Hitta element i en array
Ofta behöver vi veta om ett visst värde finns i en array, eller på vilken position det finns. Här är två användbara metoder för detta:
includes: Returnerartrueom värdet finns i arrayen, annarsfalse. I och med att metoden returnerar ett boolskt värde kan den användas som villkor i exempelvis if-satser.indexOf: Returnerar indexet för det första förekomsten av värdet i arrayen, eller -1 om värdet inte finns.
I script.js, lägg till följande:
if(colors.includes("blue")) {
console.log("blue finns i colors-arrayen");
} else {
console.log("blue finns INTE i colors-arrayen");
}
Testa:
- Testa att redigera if-satsen oven för att söka efter andra färger i
colors-arrayen.- Prova att lägga if-satsen ovan i en funktion som tar en färg som argument.
- Tips: ändra alla förekomster av “blue” i koden ovan till att istället använda värdet som skickas in till funktionen.
Ofta behöver man även veta på vilken position ett värde finns i en array. Lägg till följande i script.js:
const index = colors.indexOf("yellow");
if (index !== -1) {
console.log("yellow finns på index:", index);
console.log("yellow?", colors[index]);
} else {
console.log("yellow finns INTE i colors-arrayen");
}
Din tur: Om “yellow” inte finns i din colors-array, lägg till en rad ovanför koden ovan som lägger till “yellow” i arrayen med push, och kör sedan koden igen för att se att den nu hittas.
6 - Strängar från arrayer
Ofta vill man skapa en sträng från en array, exempelvis för att visa en lista med värden i användargränssnittet. Detta kan göras med hjälp av metoden join. Join sammanfogar alla element i arrayen. Mellan varje element läggs en sträng in som du anger som argument till metoden. Exempel:
const colorString = colors.join(", ");
console.log("Alla färger i en sträng:", colorString);
Din tur: Testa att skapa strängar från dina egna arrayer med olika avgränsare, t.ex. mellanslag, bindestreck eller andra tecken.
6 - Undersök själv
Utforska själv några av de andra inbyggda metoderna för arrayer. Det finns många fler än de vi gått igenom här. En bra resurs är JavaScript Array Reference på W3 schools. Följande är några metoder du kan testa:
shift: Tar bort det första elementet i arrayen och returnerar det.unshift: Lägger till ett värde i början av arrayen.splice: Lägger till eller tar bort element på valfri position i arrayen.concat: Slår ihop två eller flera arrayer till en ny array.
Andra är lite mer avancerade, men väldigt användbara:
map: Skapar en ny array genom att applicera en funktion på varje element i den ursprungliga arrayen.filter: Skapar en ny array med alla element som uppfyller ett visst villkor.sort: Sorterar elementen i arrayen.