Array

Objekt Array v JavaScriptu predstavlja urejeno zbirko vrednosti. Elementi tabele so indeksirani z nenegativnimi celimi števili, pri čemer ima prvi element indeks 0. V sodobni kodi tabele ne uporabljamo samo za preprosto shranjevanje vrednosti, ampak tudi za filtriranje, iskanje, pretvarjanje, urejanje in varnejšo neuničujočo obdelavo podatkov.

Osnovna pravila

• Prvi element tabele ima indeks 0.
• Tabelo najpogosteje ustvarimo z oglatimi oklepaji [].
• Dolžino tabele ugotovimo z lastnostjo length.
• Nekatere metode tabelo spremenijo, druge pa vrnejo novo tabelo.
• Za preverjanje, ali je neka vrednost tabela, uporabljamo Array.isArray().

Primerjave

Osnovno o tabelah

Novo tabelo lahko ustvarimo z uporabo oglatih oklepajev. Elementi so lahko različnih tipov, tudi objekti ali druge tabele.

const seznam = [true, 17, "Miha", null, 11 - 3.14];
const praznaTabela = [];

Tabela ima lahko tudi prazna mesta, vendar tak zapis v sodobni kodi praviloma ni priporočljiv, ker oteži razumevanje in delo z metodami tabele.

const neenotna = [1, 2, , 4];

Lastnosti tabele

Najpomembnejša lastnost tabele je length. Za preverjanje, ali neka vrednost res pripada tabeli, pa uporabljamo metodo Array.isArray().

Dolžina tabele

Dolžino tabele ugotovimo z lastnostjo length:

<p id="primer1"></p> 
<script>    
{
   const gore = ["Grintovec", "Kočna", "Skuta", "Turska gora", "Storžič"];
   document.getElementById("primer1").textContent = gore.length;
}
</script>

Preverjanje tabele

V sodobni kodi je za preverjanje tabele praviloma najprimernejša metoda Array.isArray().

<p id="primer2"></p>
<script>
{
   const gore = ["Grintovec", "Kočna"];
   document.getElementById("primer2").innerHTML =
      Array.isArray(gore) + "<br>" +
      Array.isArray("Grintovec");
}
</script>

Pretvorba v niz

Metodi toString() in join() tabelo pretvorita v niz. Metoda join() je pogosto preglednejša, ker ji lahko določimo ločilo.

Metodi toString() in join()

<p id="primer3"></p> 
<script>    
{
   const gore = ["Grintovec", "Kočna", "Skuta", "Turska gora", "Storžič"];
   document.getElementById("primer3").innerHTML =
      gore.toString() + "<br>" + gore.join(" | ");
}
</script>

Dodajanje in odstranjevanje elementov

Za dodajanje in odstranjevanje elementov na začetku ali koncu tabele pogosto uporabljamo metode push(), pop(), shift() in unshift().

Metoda push()

Metoda push() doda nov element na konec tabele:

<p id="primer4"></p>
<script>    
{
   const gore = ["Grintovec", "Kočna", "Skuta", "Turska gora", "Storžič"];
   gore.push("Planjava");
   document.getElementById("primer4").textContent = gore;
}
</script>

Metoda pop()

Metoda pop() iz tabele odstrani zadnji element:

<p id="primer5"></p>
<script>    
{
   const gore = ["Grintovec", "Kočna", "Skuta", "Turska gora", "Storžič"];
   gore.pop();
   document.getElementById("primer5").textContent = gore;
}
</script>

Metodi shift() in unshift()

Metoda shift() odstrani prvi element, metoda unshift() pa na začetek tabele doda nov element.

<p id="primer6"></p>
<script>
{
   const gore = ["Grintovec", "Kočna", "Skuta"];
   gore.shift();
   gore.unshift("Planjava");
   document.getElementById("primer6").textContent = gore;
}
</script>

Rezanje in spreminjanje tabele

Metodi slice() in splice() imata različen namen. Metoda slice() vrne del tabele, ne da bi izvirnik spremenila. Metoda splice() pa izvirno tabelo spremeni. V sodobni kodi so pomembne tudi neuničujoče alternative toSpliced() in with().

Metoda slice()

Metoda slice() vrne podtabelo:

<p id="primer7"></p>
<script>    
{
   const gore = ["Grintovec", "Kočna", "Skuta", "Turska gora", "Storžič"];
   document.getElementById("primer7").textContent = gore.slice(1, 4);
}
</script>

Metoda splice()

Metoda splice() spremeni izvirno tabelo:

<p id="primer8"></p>
<script>    
{
   const gore = ["Grintovec", "Kočna", "Skuta", "Turska gora", "Storžič"];
   gore.splice(0, 2);
   document.getElementById("primer8").textContent = gore;
}
</script>

Metodi toSpliced() in with()

Metoda toSpliced() vrne novo tabelo, metoda with() pa vrne novo tabelo z zamenjanim elementom na določenem indeksu.

<p id="primer9"></p>
<script>
{
   const gore = ["Grintovec", "Kočna", "Skuta", "Turska gora"];
   const novaTabela = gore.toSpliced(1, 1, "Planjava");
   const zamenjana = gore.with(0, "Storžič");

   document.getElementById("primer9").innerHTML =
      novaTabela.join(", ") + "<br>" +
      zamenjana.join(", ");
}
</script>

Urejanje tabele

Metoda sort() izvirno tabelo spremeni, metoda reverse() pa obrne vrstni red elementov. V sodobni kodi sta pogosto zanimivi tudi neuničujoči različici toSorted() in toReversed().

Metoda sort()

Metoda sort() uredi elemente tabele. Pri številih moramo pogosto podati primerjalno funkcijo.

<p id="primer10"></p>
<script>    
{
   const stevila = [12, 3, 25, 7];
   stevila.sort((a, b) => a - b);
   document.getElementById("primer10").textContent = stevila;
}
</script>

Metodi toSorted() in toReversed()

Ti metodi vrneta novo tabelo in ne spreminjata izvirne.

<p id="primer11"></p>
<script>
{
   const gore = ["Grintovec", "Kočna", "Skuta"];
   const urejeno = gore.toSorted();
   const obrnjeno = gore.toReversed();

   document.getElementById("primer11").innerHTML =
      urejeno.join(", ") + "<br>" +
      obrnjeno.join(", ");
}
</script>

Iskanje v tabeli

Za iskanje elementov v tabeli lahko uporabimo indexOf(), lastIndexOf(), includes() in find().

<p id="primer12"></p>
<script>
{
   const stevila = [4, 7, 12, 18, 21];
   document.getElementById("primer12").innerHTML =
      stevila.indexOf(12) + "<br>" +
      stevila.includes(7) + "<br>" +
      stevila.find((x) => x > 10);
}
</script>

Priporočila

• Tabele naj bodo vsebinsko čim bolj enotne in pregledne.
• Za preverjanje tabele uporabljaj Array.isArray().
• Za izpis elementov z lastnim ločilom pogosto uporabi join().
• Pri novi kodi razmisli o neuničujočih metodah toSorted(), toReversed(), toSpliced() in with().
• Pri številskem urejanju s sort() praviloma uporabi primerjalno funkcijo.

Pogoste napake

• Tabela se obravnava, kot da vse metode vrnejo novo tabelo, čeprav številne metode izvirno tabelo spremenijo.
• Za preverjanje tabele se uporablja neustrezen pristop, namesto da bi uporabili Array.isArray().
• Metoda sort() se uporabi brez primerjalne funkcije pri številih, zato rezultat ni numerično urejen.
• V tabeli se brez potrebe uporabljajo prazna mesta, kar zmanjša preglednost in lahko oteži razumevanje rezultata.
• Metodi slice() in splice() se obravnavata kot enakovredni, čeprav prva praviloma ne spreminja izvirnika, druga pa ga spremeni.