Datastrukturer i JavaScript

Denna blog-post går igenom olika sätt att lagra data med hjälp av objekt och array. Inga förkunskaper behövs.

En av det viktigaste bitarna i programmering är data-strukturer. Dvs. Hur data lagras, och relationer mellan data.

I JavaScript är allt object och man sparar data i ... objekt!

var data deklarerar variabeln data, och = (likhetstecken) pekar variabeln mot {} ett objekt.

Det går att ha variabler i objekt! Dessa variabler kallas attribut.
Det går även att ha funktioner i objekt, och då kallas de metoder.
Ett objekt kan ha många attribut och eller metoder.

Allt i JavaAscript är objekt. Och alla objekt, förutom de primitiva objekten (String, Number och Boolean) kan tilldelas attribut och metoder.
Dvs. allt i JavaScript, förutom text-stängar (String), tal (Number) samt true/false (Boolean) kan tilldelas attribut eller motoder (funktioner)

I koden nedan sätts husets färg (attribut) till det primitiva objektet "blå" (en text-sträng).

Variabeln färg pekas mot text-strängen "blå".
Med andra ord; sätts (engelska: set) husets färg till "blå"

I koden nedan hämtas husets färg:

Variabeln husfärg pekas mot husets färg-attribut (text-strängen "blå"). Med andra ord hämtas (engelska: get) husets färg.

Observera att attributet sätts och hämtas med samma kod/syntax!

Husets färg sätts till text-strängen (ett primitivt objekt) "blå". Husets färg hämtas sedan, och variabeln husfärg pekas till färg-attributets primitiva objekt (text-strängen "blå").
Metoden log i objektet som console pekar till, anropas med första argumentet/parametern satt till objektet som variabeln husfärg pekar mot (text-strängen "blå").

För att sätta och hämta objektens attribut används punkt . eller ["citationstecken med hakparenteser"].

Med hjälp av [hakparenteser] och "citationstecken" går det att ha namn med blanktecken i, eller byta ut text-strängen mot en variabel!

  1. Variabeln person pekas mot ett nytt objekt.
  2. Objektet får ett attribut (namn) som pekas till text-strängen "Johan"
  3. Objektet (som variabeln person pekar till) får attributet intressen, som pekas mot ett nytt objekt.
  4. Attributet intressen får ett nytt attribut (programmering) som pekas mot ett nytt objekt.
  5. Attributet programmering får ett nytt attribut (favorit språk) som pekas mot text-strängen "JavaScript".
  6. Variabeln intresse pekas mot text-strängen "programmering".
  7. Funktionen i console.log anropas med fem argument/parametrar. Den femte parametern är attributet språk i objektet som variabeln intresse pekar till (text strängen "programmering"), som är ett attribut i objektet intressen, som i sin tur är ett attribut i objektet som variabeln person pekar till.

Objekt notation

Om man redan vet hur objektet ska vara uppbyggt kan man skriva det i "objekt notation":

Inuti objekt (notation) används : (kolon) i stället för likhetstecken för att peka variabler!

I objekt notering är det valfritt att använda "citationstecken" runt namn (attribut/variabler).

Har man ett mellanslag i namnet så måste man dock använda "citationstecken", men i stället för mellanslag rekommenderar jag camelCase (första ordet har liten bokstav, och restarande ord skrivs ihop). Eller understreck_mellan_orden.

Observera att i JSON, som är ett dataformat inspirerat av JavaScript måste man ha "citationstecken" runt namn.

Array

Ibland kan det vara onödigt att ha namn på allt, vill man bara ha en lista, kan man använda Array-objekt.

Variabeln personer pekas mot ett list-objekt (Array) som får tre stycken nummer (Number) attribut.
Dessa attribut pekas mot objekt, där varje objekt innehåller attributet namn.
Funktionen console.log anropas sedan med en konkatenerad text-sträng med personernas namn

Observera att i en array är det första numret alltid 0 (noll)

En Array är nästan samma sak som ett objekt. Samma lista skulle kunna skapas med ett objekt så här:

List-objekt (Array's) har dock flera inbyggda metoder och attribut, till exempel attributet length som håller reda på antalet objekt i objekt-listan (Array).

Loopia igenom objekt

Både objekt-objekt (Object) och list-objekt (Array) går att "loopa" igenom (iterera):

Variabeln personer pekas mot ett list-objekt, som tilldelas tre objekt (Object), som i sin tur får olika namn-attribut.
En for-loop används för att "loopa" igenom objekten i list-objekten. För varje objekt i list-objektet anropas funktionen console.log, som får en konkatenerad text-sträng som första argument/parmeter: Variabeln index tilldelas varje attribut i personer-listan. Och namn-attributet hämtas från varje objektet, som i sin tur hämtas från objektet som variabeln personer pekar mot.

Ett av de många användbara metoderna i list-objekt (Array) är metoden forEach som används för att iterera ("loopa" igenom objekt-listan)

Metoden forEach hämtas från objektet som variabeln personer pekar mot (som är ett list-objekt), och anropas sedan..
För varje objekt i list-objektet anropas funktionen printName med varje objekt i list-objektet som första parameter.

Serialisering

Vill man till exempel skicka data från minnet till hårddisken, eller över internet, kan man "serialisera" objekt genom funktionen JSON.stringify som konverterar objektet till en text-sträng i JSON-format.

Det går att göra texten mer läsvänlig med funktions-argumenten JSON.stringify(objekt, null, 2) där tredje parametern (2) är antalet mellanslag som ska användas som indentering.

Deserialization

Man kan konvertera en JSON-sträng till ett objekt genom funktionen JSON.parse.

Glöm inte att sätta JSON.parse innanför en try/catch för att undvika oväntade och kryptiska felmeddelanden så som "oväntat tecken på rad 0"

Exempel på datastrukturer

Har man löst hur själva datastrukturen ska se ut brukar allt annat falla på plats av sig själv.

Tic Tac Toe

Fotbollslag

Bokförsnings-program



Skrivet av Sep 18, 2017.


Följ mig via RSS:   RSS https://zäta.com/rss.xml (ange adressen i din feed-läsare)