JAVASCRIPT Array
Inledning
Ofta har man behov av att arbeta med långa listor med tal. Istället för att skapa en variabel för varje tal så
är det möjligt att arbeta med en variabel som istället innehåller möjligheten att lagra flera tal. Man kallar
sådana här variabler med "flera fack" för fält, lista eller det engelska uttrycket array. Man kan jämföra dem
med en hylla som har flera, numrerade fack, eller rent av med en gatuadress (gatunamn och husnummer).
För att få tag i ett av de värden man lagrat i listan anger du namnet på variabeln (hyllan, gatunamnet) och
fackets nummer eller index (hyllnummer, husnummer).
Ex.
Tidigare:
Nu:
var talserie=[3,44,1,65,2];
// Vi behöver inte ange hur många lådor listan ska ha.
// Stoppar in värden i listan.
Vi har fem "fack" direkt. För att komma åt innehållet i ett "fack" skulle du ju ange fackets nummer (index), men observera att numreringen börjar på 0, vilket gör att i ett fält med fem element får du indexnumren 0-4. Säg t.ex. att du vill tilldela det tredje facket värdet 31, vilket du gör med följande kod:
talserie[2]=31;
OBS! Ingen kontroll sker av ditt värde inom hakparenteserna, så det hänger på dig som programmerare att vara vaksam. T.ex.
talserie[55]=1;
men när du kör programmet är det stor risk att det inte fungerar som du tänkt.
Lista = Array = En variabel som kan lagra många värden
Om vill lagra många tal och sedan beräkna medelvärdet så är det väldigt knöligt om vi skapar en variabel för varje tal. Det skulle kunna vara tusentals med tal i vissa fall. Då vore det smidigt med en variabel som kan lagra alla tal och vi kan ropa på dessa tal med hjälp av ett index. Det vill säga vi har en lista (ibland nämns ordet vektor) och heter på engelska array.
Vi deklarerar en array:
var minTalLista = [ ];
När du söker på internet och i äldre böcker så kommer du även träffa på följande sätt (som inte är lika bra) att skapa en array:
minTalLista=new Array( ); . Det ska vi inte använda.
Vi skapar innehåll i listan, antingen direkt i deklarationen:
var minTalLista=[3,5,6,1];
eller
fyller en "låda" itaget:
minTalLista[0]=3;
minTalLista[1]=5;
minTalLista[2]=6;
minTalLista[3]=1;
<button id="jsarrayex1_knapp">Visa</button>
<div id="jsarrayex1div">
</div>
<script>
document.getElementById('jsarrayex1_knapp').addEventListener('click', jsarrayex1);
function jsarrayex1( ) {
"use strict";
var minTalLista = [ ];
minTalLista[0]=3;
minTalLista[1]=5;
minTalLista[2]=6;
minTalLista[3]=1;
//minTalLista=[3,5,6,1]; //förkortat sätt att skapa listan
var summa=0;
var text="Talen ";
for (var i=0; i<minTalLista.length; i++) {
summa=summa+minTalLista[i];
text=text+minTalLista[i]+" ";
}
var medel=summa/minTalLista.length;
text=text+" ger medel="+medel;
document.getElementById("jsarrayex1div").innerHTML = text;
}
</script>
Egenskapen length som används i minTalLista.length hämtar värdet på hur många element som finns i listan, det vill säga hur många lådor har vi i listan just nu.
Lista med textsträngar och en bildvisarsnurra
Vi kan stoppa in textsträngar istället för tal eller om vi vill även bildfilnamn.
<button id="jsarrayex2_knapp">Byt bild</button>
<div id="jsarrayex2div">
<img id="bild1" name="bild1" src="webbutveckling2/bilder/mimvila.gif" border="0" width="80px" height="80px">
</div>
<script>
document.getElementById('jsarrayex2_knapp').addEventListener('click', jsarrayex2);
//skapa en array med bildfilnamn
var im = [ ];
im[0]="webbutveckling2/bilder/mimhopp.gif";
im[1]="webbutveckling2/bilder/mimutrop.gif";
im[2]="webbutveckling2/bilder/mimvila.gif";
var x=0;
function jsarrayex2() {
"use strict";
document.getElementById("bild1").src = im[x];
x++;
if (x==3) {
x=0;
}
}
</script>
Färdiga metoder (funktioner) att använda
- shift()
- Hämtar och tar bort första elementet i en lista
- pop()
- Hämtar och tar bort sista elementet i en lista
- push()
- Lägger till ett nytt element sist i listan och returnerar den nya längden på listan
- unshift()
- Lägger till ett nytt element först i listan och returnerar den nya längden på listan
- sort()
- Sorterar listan
- reverse()
- Byter ordningen i listan så sista kommer först och näst sista som tvåa, osv.
- indexOf()
- Söker i listan framifrån efter ett element och returnerar positionen:
Om ingen träff sker så returneras värdet -1 . - lastIndexOf()
- Som ovan men börjar bakifrån.
- slice()
- Plockar ut en del av en array och returnerar den nya arrayen
- splice()
- Lägger till eller tar bort flera element i en array
- concat()
- Slår ihop två eller flera arrayer, returnerar den nya arrayen
- join()
- Stoppar alla element i en textsträng
- toString()
- Konverterar och slår ihop alla element till en textsträngsom returneras
- valueOf()
- Hämtar värdena som står i alla element
Hos w3schools kan du se exempel samt klicka på metoderna och testa själv.
Ett exempel
<button type="button" id="jsarrayex4_knapp">Visa</button>
<div id="jsarrayex4div">
</div>
<script>
document.getElementById('jsarrayex4_knapp').addEventListener('click', jsarrayex4);
function jsarrayex4() {
"use strict";
var text="";
var nr=0;
var myFriends =["Kalle","Musse","Mimmi","Långben"];
var kids = ["Knatte","Fnatte","Tjatte"];
text += "Mina " + myFriends.length + " vänner: " + myFriends.join() + "<br>";
myFriends.push("Kajsa");
text += myFriends.toString() + "<br>";
myFriends.sort();
text += myFriends.join(" - ") + "<br>";
myFriends.reverse();
text += myFriends.join(" : ") + "<br>";
myFriends.shift();
myFriends.pop();
text += myFriends.join(" + ") + "<br>";
myFriends = myFriends.concat(kids);
text += myFriends.join() + "<br>";
nr = myFriends.unshift("Joakim");
text += "Mina " + nr + " vänner: " + myFriends.join(" och ") + "<br>";
document.getElementById("jsarrayex4div").innerHTML = text;
}
</script>
Ett till exempel, lek "Finns i arrayen"
<form>
<label>Gissa om ett ensiffrigt tal finns i arrayen</label><br />
<input type="text" id="jsarrayex4xinput "/><br />
<button id="jsarrayex4x_knapp2">Gissa</button>
</form>
<div id="jsarrayex4div"></div>
<script>
document.getElementById('jsarrayex4x_knapp2').addEventListener('click', jsarrayex4x);
function jsarrayex4x() {
"use strict";
var text="";
var nr=0;
var tal = [1,2,5,7,8];
var myinput = document.getElementById("guessinput").value;
var guess = parseInt(myinput);
if (tal.indexOf(guess )>= 0)
text="FINNS";
else // Om den inte kan hittas returneras -1
text="TYVÄRR";
document.getElementById("jsarrayex4xdiv").innerHTML = text;
}
</script>
Sortera tal
Den färdiga funktionen sort() fungerar bra för textsträngar. Tyvärr inte för tal då den jämför första tecknen i strängarna först om de är lika näste tecken och så vidare.. det vill säga när det gäller tal så kommer 11 före 2, då första tecknen "1" och "2" jämförs.
Vill vi lösa dett skriver vi in följande kod i sort-parentesen:
function(a, b){return a-b;}
dvs funktionen returnerar ett negativt värde om det andra talet är större, ett positivt värde om det första talet är störst och 0 om de är lika.
Detta utnyttjas av sort-funktionen och placerar "talen" i rätt ordning.
Ett exempel:
"use strict";
var minvariabel = [112,22,3,1234];
var text = "";
minvariabel.sort();
text="Sortering på tecken = "+minvariabel.join(" , ")+"<br />";
minvariabel.sort( function(a, b) { return a-b; } );
text+="Sortering på tal = "+minvariabel.join(" , ");
document.getElementById("jsarrayex5div").innerHTML = text;
}
2-dimensionell Lista (Array)
Ibland kan det vara enklare att se sina värden i rader och kolumner, som ett rutnät. Vi kan kalla det 2 dimensioner.
Som vanligt benäms första raden som 0 och första kolumnen som 0.
Till exempel:
var min2Dvariabel = [[1, 2], [3, 4]];
kan ses som
rad 0: [1, 2]
rad 1: [3, 4]
och för att anropa ett värde(en ruta) så anger vi rad och kolumn, t ex min2Dvariabel[1][0] ger 3 .
<button id="jsarrayex3_knapp">Visa</button>
<div id="jsarrayex3div"></div>
<script>
document.getElementById('jsarrayex3_knapp').addEventListener('click', jsarrayex3);
function jsarrayex3() {
"use strict";
var min2Dvariabel = [[1, 2], [3, 4]];
var text=" min2Dvariabel[0][1] = "+min2Dvariabel[0][1];
text=text+"<br> min2Dvariabel[1][0] = "+min2Dvariabel[1][0];
text=text+"<br> min2Dvariabel[1][1] = "+min2Dvariabel[1][1];
document.getElementById("jsarrayex3div").innerHTML = text;
}
</script>
För att skapa en tom 2-dim array med 10 rader och 20 kolumner kan vi skriva:
for (var i = 0; i < 10; i++) {
x[i] = [ ];
for (var j = 0; j < 20; j++) {
x[i][j]=i*j; // eller =0 om du vill starta med noll i alla lådor
}
}
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
Filmer
Beginner JavaScript Tutorial - 28 - Arrays (thenewboston 6 min)
Beginner JavaScript Tutorial - 29 - Other Ways to Create Arrays (thenewboston 6 min)
Beginner JavaScript Tutorial - 30 - Array Properties and Methods (thenewboston 5 min)
Beginner JavaScript Tutorial - 31 - join and pop (thenewboston 6 min)
Beginner JavaScript Tutorial - 32 - reverse, push, sort (thenewboston 4 min)
Beginner JavaScript Tutorial - 33 - Add Array Elements Using a Loop (thenewboston 7 min)
Beginner JavaScript Tutorial - 34 - Cool Technique to Print Array Elements (thenewboston 5 min)