Komplexa variabler: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
Rad 50: | Rad 50: | ||
} | } | ||
värden.forEach( SkrivUt); | värden.forEach(SkrivUt); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
</div> | </div> | ||
Rad 56: | Rad 56: | ||
<code>forEach</code> kommer att gå igenom arrayen <code>värden</code>, element efter element. Varje element som plockas ut, kommer att skickas till funktionen <code>SkrivUt</code>. Funktionen kommer att få det utplockade elementet som input. | <code>forEach</code> kommer att gå igenom arrayen <code>värden</code>, element efter element. Varje element som plockas ut, kommer att skickas till funktionen <code>SkrivUt</code>. Funktionen kommer att få det utplockade elementet som input. | ||
I JavaScript behandlar man funktioner som "vanliga" variabler. | I JavaScript behandlar man funktioner som "vanliga" variabler. Vi skickar <code>SkrivUt</code> som parameter till <code>forEach</code> och eftersom den inte har <code>()</code> efter sig, så ses den som en variabel. Skulle vi haft <code>()</code> efter den, skulle den körts direkt. <code>forEach</code> kommer använda sig av funktions-variabeln och köra den koden. | ||
<h2>Oväntade beteenden</h2> | |||
Hur JavaScript hanterar arrayer kan ibland vara lite "konstigt". Vi ska gå igenom några exempel... | |||
<div class="well well-cyanide-light"> | |||
<syntaxhighlight lang="JavaScript"> | |||
let värden = [ 1, 2, 3, 4 ]; | |||
console.log(värden[10]); | |||
</syntaxhighlight> | |||
</div> | |||
Koden ovan kommer att generera ett felmeddelande. Vår array innehåller ju bara fyra värden, men vi försöker komma åt det elfte (kom ihåg att vi räknar ifrån noll). JavaScript slår därmed bakut och vägrar köra koden. | |||
Men om vi gör som följer: | |||
<div class="well well-cyanide-light"> | |||
<syntaxhighlight lang="JavaScript"> | |||
let värden = [ 1, 2, 3, 4 ]; | |||
värden[10]=5; | |||
console.log(värden[10]); | |||
</syntaxhighlight> | |||
</div> | |||
I detta fall kommer koden att köras och vi får värdet <code>5</code> utskrivet. Vår array kommer alltså att göras större och bli att innehålla elva element. Men vad händer med de element som ligger på positionerna där vi inte angivit några värden? Vi provar: | |||
<div class="well well-cyanide-light"> | |||
<syntaxhighlight lang="JavaScript"> | |||
let värden = [ 1, 2, 3, 4 ]; | |||
värden[10]=5; | |||
console.log(värden[9]); | |||
</syntaxhighlight> | |||
</div> | |||
Vi får då utskriften <code>undefined</code>. Det blir ingen error, så elementet existerar. Men vi har inte satt det till något värde, därmed är det odefinierat. |
Versionen från 12 september 2018 kl. 08.26
Komplexa, eller sammansatta, variabler kan innehålla flera olika värden. Den vanligaste sammansatta variabeltypen är arrayer. Vilket är en typ av variabel där vi kan ange ett index för att tala om vilket värde vi vill komma åt.
Har du programmerat i något annat språk kan det vara bra att veta att i JavaScript så är arrayer och listor ungefär samma sak.
Skapa en array
En array skapas så här:
let värden = [ 1, 2, 3, 4 ];
I exemplet ovan skapas en array som innehåller värdena 1
, 2
, osv.
Läsa ifrån en array
För att komma åt ett specifikt element i arrayen kan vi göra som följer:
let ettVärde = värden[0];
Ovanstående kod kommer att plocka ut det första värdet i arrayen. I programmering brukar vi oftast börja att räkna ifrån noll. Det gör att arrayen värden
, kommer att innehålla fyra element. Elementen är numrerade noll till tre. Dvs, ett mindre än antalet element. Vilket är på grund av att vi räknar ifrån noll.
Gå igenom en array
Vi vill ofta gå igenom hela, eller delar av, arrayen och göra nåt med elementen som den innehåller. Det kan man göra på lite olika sätt...
for
-loop
for
-loopar är en metod som vi kan använda oss av om vi vill gå igenom alla element i en array. Varje array har en egenskap som heter length
, den är satt till det antal element som finns i arrayen. Genom att använda oss av length
kan vi göra en for
-loop på följande vis:
for(i = 0; i < värden.length; i++) {
let ettVärde = värden[ i ];
console.log(ettVärde);
}
I exemplet skriver vi alltså ut alla element i värden
.
forEach
Ett annat sätt på vilket vi kan gå igenom en array är att använda oss av metoden forEach
. Så här skulle föregående exempel bli att se ut om vi använder oss av forEach
istället för en for
-loop.
function SkrivUt(n) {
console.log(n);
}
värden.forEach(SkrivUt);
forEach
kommer att gå igenom arrayen värden
, element efter element. Varje element som plockas ut, kommer att skickas till funktionen SkrivUt
. Funktionen kommer att få det utplockade elementet som input.
I JavaScript behandlar man funktioner som "vanliga" variabler. Vi skickar SkrivUt
som parameter till forEach
och eftersom den inte har ()
efter sig, så ses den som en variabel. Skulle vi haft ()
efter den, skulle den körts direkt. forEach
kommer använda sig av funktions-variabeln och köra den koden.
Oväntade beteenden
Hur JavaScript hanterar arrayer kan ibland vara lite "konstigt". Vi ska gå igenom några exempel...
let värden = [ 1, 2, 3, 4 ];
console.log(värden[10]);
Koden ovan kommer att generera ett felmeddelande. Vår array innehåller ju bara fyra värden, men vi försöker komma åt det elfte (kom ihåg att vi räknar ifrån noll). JavaScript slår därmed bakut och vägrar köra koden.
Men om vi gör som följer:
let värden = [ 1, 2, 3, 4 ];
värden[10]=5;
console.log(värden[10]);
I detta fall kommer koden att köras och vi får värdet 5
utskrivet. Vår array kommer alltså att göras större och bli att innehålla elva element. Men vad händer med de element som ligger på positionerna där vi inte angivit några värden? Vi provar:
let värden = [ 1, 2, 3, 4 ];
värden[10]=5;
console.log(värden[9]);
Vi får då utskriften undefined
. Det blir ingen error, så elementet existerar. Men vi har inte satt det till något värde, därmed är det odefinierat.