JavaScript — Introduktion genom exempel

2.11 Array, lista

En array är ett objekt som består av en lista med flera värden. Man sparar en array i en variabel och kan komma åt de olika värdena genom ett index, som börjar på 0 för första värdet, 1 för andra värdet, etc. En array har några egenskaper, bl.a. length som är antalet värden i listan, och flera metoder (funktioner), för att ta fram data eller förändra arrayen. Detta exempel har två delar:

1. De olika egenskaperna och metoderna illustreras med små exempel.
2. Omskrivning av exemplet med bildspelet, där filnamnen nu sparas i en array.

Sammanfattning

• Man skapar en array med två hakparenteser, []. Antingen skapar man en tom array eller så kan man direkt lägga in en kommaseparerad lista av värden mellan hakparenteserna.
  • Man kan också använda new Array(), men vi använder det kortare skrivsättet [] i denna exempelsamling.
• För att komma åt de olika positionerna i arrayen anger man variabelns namn och ett index inom hakparenteser, t.ex. a[2]. Index för första positionen är 0.
• Man kan både avläsa ett värde, t.ex. x = a[2] och spara ett nytt värde, t.ex. a[2] = y.

• Om vi tänker oss att a = ["äpple", "päron", "banan", "apelsin"] i varje rad nedan, får vi följande:

  Egenskap / metod	Returnerat resultat	Förändring av a
  a.length	4	oförändrad
  a.push("citron")	inget returvärde	["äpple","päron","banan","apelsin","citron"]
  a.pop()	"apelsin"	["äpple","päron","banan"]
  a.sort()	inget returvärde	["apelsin","banan","päron","äpple"]
  a.slice(1,2)	["päron","banan"]	oförändrad
  a.slice(1)	["päron","banan","apelsin"]	oförändrad
  a.splice(2,1)	["banan"]	["äpple","päron","apelsin"]
  a.includes("banan")	true	oförändrad
  a.includes("kiwi")	false	oförändrad
  a.indexOf("banan")	2	oförändrad
  a.indexOf("kiwi")	-1	oförändrad
  a.join("/")	"äpple/päron/banan/apelsin"	oförändrad

Några vanliga egenskaper och metoder introducerades i detta exempel och en del andra återkommer vi till i senare exempel. Se även referenslistan för fler exempel och beskrivning.

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande:

• Skapa en variabel kallad towns, med en array som innehåller namn på fem städer.
• Skriv en for-loop som går igenom alla värden (dvs städer) i towns. I loopen ska du skriva ut det värde som indexeras av loopvariabeln. Lägg även till taggar för ett p-element i utskriften, så att varje stad hamnar på varsin rad.
• Skapa en variabel r och tilldela den ett slumptal mellan 0 och index för det sista värdet i arrayen. Spara den stad som indexeras av r i den globala variabeln randomTown. Skriv också ut randomTown i elementet för resultat.