JavaScript-skolan Arrayer

1. Inledning

Den här sidan handlar om arrayer. Det finns inget bra motsvarande svenskt ord för "array", men ibland säger man "mönster", "uppställning", "matris", "ordning", osv.

Arrayer finns i många olika programspråk. I JavaScript använder man arrayer för att lagra flera olika värden i en och samma variabel. Fördelen med detta är t.ex att man slipper ha en massa olika variabler i sina scripts.

Om jag vill använda en variabel "veckodag", kan jag alltså med en array tillskriva den något av sju olika värden, snarare än att skapa sju variabler med var sitt värde. Arrayer kan således vara till stor hjälp för den som programmerar.

2. Skapa en array

Vi fortsätter exemplet med veckodagar och skapar en array som ser ut så här:

var Veckodagar = new Array(7);

Det nya här är att man inte ger variabeln Veckodagar något värde. I stället skapar man en array, vilket görs med uttrycket "new Array". Antalet värden anger man sedan med (7).

Tips!
"New" är här en operator och datatypen för Array är object. Detta berättade jag om på sidan "Satser, datatyper och värden". Läs mer >

Tips!
En arrays värden kallas ibland även för element. Detta beror på att även andra saker än värden kan lagras i en array.

Vår array har sju värden och man anger dem ungefär som vanligt:

Exempel 1

<script language="JavaScript">
<!--
var Veckodagar = new Array(7); // Denna rad såg du här ovan!
Veckodagar[0] = "Måndag";
Veckodagar[1] = "Tisdag";
Veckodagar[2] = "Onsdag";
Veckodagar[3] = "Torsdag";
Veckodagar[4] = "Fredag";
Veckodagar[5] = "Lördag";
Veckodagar[6] = "Söndag";
alert(Veckodagar[3]);
-->
</script>

Titta på exemplet i praktiken >

Uttrycket "Veckodagar[6]" skrivs utan mellanslag. Jag skriver det eftersom det kan finnas ett mellanrum mellan [ och siffran i vissa webbläsare.

Det man också måste känna till är att en array börjar "räkna" från värdet noll. Värdet noll är här alltså dag ett. Sedan måste man också använda hakparenteser och inte vanliga parenteser.

Man kan även förkorta scriptet genom att skriva så här:

<script language="JavaScript">
<!--
var Veckodagar = new Array("Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag");
alert(Veckodagar[3]);
-->
</script>

Här står alltså alla värden inom parentesen, som tidigare bara angav antalet med siffran 7. Genom att skriva så här räknar webbläsaren själv efter hur många värden det finns. Som du ser skiljer man värdena åt med ett kommatecken i stället för semikolon.

En fördel med denna metod är om man inte vet hur många värden man kommer att använda sig av. Man kan då skriva in nya värden allt eftersom och arrayen anpassas då i storlek. Nackdelen är förstås att scriptet kan bli lite mer svåröverskådligt.

3. Längden på en array

Längden på en array fastställdes i vårt första exempel då arrayen skapades. I det andra exemplet lämnade vi det öppet hur lång arrayen skulle vara.

Det kan dock ibland vara svårt att ha överblick över antalet värden, i synnerhet om man skriver den enligt den andra metoden (vilket är det vanligaste). Då finns kommandot "length", som används för att undersöka längden på en array:

Exempel 2

<script language="JavaScript">
<!--
var Veckodagar = new Array("Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag");
alert(Veckodagar.length);
-->
</script>

Titta på exemplet i praktiken >

Webbläsaren räknar nu samman antalet värden i arrayen och returnerar värdet 7 i alert-rutan. Utesluter vi i stället length räknar webbläsaren i stället upp samtliga värden i arrayen:

Exempel 3

<script language="JavaScript">
<!--
var Veckodagar = new Array("Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag");
alert(Veckodagar);
-->
</script>

Titta på exemplet i praktiken >

Bilden här nedanför visar hur det blir i webbläsaren:

4. Parallella arrayer

Parallella arrayer innebär att ett värde i en array kopplas till ett värde i en annan array. Om vi utgår ifrån det tidigare exemplet med veckodagar, kan det se ut så här:

<script language="JavaScript">
<!--
var Veckodagar = new Array("Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag");
var KaffeAnsvarig = new Array(7);
KaffeAnsvarig[0] = "Pelle";
KaffeAnsvarig[1] = "Stina";
KaffeAnsvarig[2] = "Ida";
KaffeAnsvarig[3] = "Kajsa";
KaffeAnsvarig[4] = "Lars";
KaffeAnsvarig[5] = "Mikael";
KaffeAnsvarig[6] = "Per";
-->
</script>

I exemplet är arrayerna parallella efter det värde vi tillskrivit dem. Måndag och Pelle är parallella för värdet noll, osv. På nästa sida, som handlar om funktioner, skall vi titta på hur man kan använda funktioner för att anropa parallella arrayer.

5. For-in-satser

For-in-kommandot används i många olika sammanhang, men här skall vi titta på ett exempel där värden i en array påverkas. ibland säger man att for-in-satsen räknar om eller för att stegar igenom arrayen.

Det exempel jag visar här är kanske inte så användbart, men visar ändå hur det fungerar. Senare kommer vi att titta på hur man t.ex tilldelar en array olika strängvärden.

Exempel 4

<script language="JavaScript">
<!--
var Exempel = new Array(3);
Exempel[0] = 3;
Exempel[1] = 45;
Exempel[2] = 625;
for (x in Exempel) {
Exempel[x] = ++Exempel[x];
}
alert(Exempel);
-->
</script>

Titta på exemplet i praktiken >

Först anger vi att en ny array skall skapas. Den heter "Exempel" och innehåller tre värden. Sedan ages värdena till talen 3, 45 och 625. På raden som inleds med for säger scriptet att när "x" i variabeln "Exempel".

Därefter följer villkoret att för Exempel[x], alltså för varje variabel Exempel, skall värdet öka med ett. När for-in-satsen är slut skall de nya värdena visas med en alert-ruta, vilket ser ut som på bilden här nedanför:

6. Övningar

Fråga 1
Skapa ett script som innehåller en array med värdena "Januari" t.o.m. "December". Skapa två alert-rutor som visar månad 3 och 5 efter varandra.

Facit >

Fråga 2
Utgå ifrån scriptet i Fråga 1 och skapa en alert-ruta som visar alla värdena i arrayen!

Facit >

Fråga 3
Utgår från Fråga 2 och skapa i stället en alert-ruta som anger hur många värden som arrayen innehåller!

Facit >

Fråga 4
I Exempel 4 ovan visade jag hur man använder kommandot for-in för att stega sig igenom en array. Skapa en array med värdena 2, 3 och 4. Skapa sedan ett for-in-kommando som ökar varje värde med ett och visar detta med en alert-ruta. Använd Exempel 4 som stöd.

Facit >

Fråga 5
Utgå från förra scriptet och låt de tre värdena vara lika med a, b och c. Lägg sedan till dessa variabler i scriptet och tilldela dem värdena 3, 4 och 5!

Facit >