Προσπέλαση πινάκων

Για να μπορέσουμε να αποκτήσουμε πρόσβαση στα στοιχεία ενός πίνακα χρησιμοποιούμε τις συντεταγμένες του εκάστοτε στοιχείου. Συντεταγμένη ενός στοιχείου μέσα σε ένα πίνακα, είναι η θέση στην οποία βρίσκεται μέσα σε αυτόν. Στους πίνακες δεν έχουμε ποτέ αρνητικές θέσεις παρά μόνο θετικές. Έτσι αν γνωρίζουμε ότι ένα στοιχείο βρίσκεται στην θέση 1 μπορούμε να χρησιμοποιήσουμε το περιεχόμενο του καλώντας το όνομα του πίνακα και την θέση-συντεταγμένη μέσα σε άγκιστρα:

var pinakas = ["Στοιχείο 1", "Στοιχείο 2"];
var timi = pinakas[0];

Στο προηγούμενο παράδειγμα χρησιμοποιούμε την πρώτη τιμή του πίνακα «pinakas» για να την εισάγουμε σε μια νέα μεταβλητή με όνομα «timi». Αυτό που θα εισαχθεί ως τιμή στην μεταβλητή αυτή είναι το αλφαριθμητικό «Στοιχείο 1». Με παρόμοια λογική μπορούμε να αλλάξουμε τιμές στα στοιχεία ενός πίνακα ή ακόμη και να προσθέσουμε νέα στοιχεία:

var pinakas = ["Στοιχείο 1", "Στοιχείο 2"];
pinakas[1] = "Stoixeio 2";
i = 2;
pinakas[i] = "Stoixeio 3";
pinakas[i+1] = "Stoixeio 4";

Το ιδιαίτερο με τους πίνακες στην javascript είναι πως ανάλογα με το πόσα στοιχεία έχουμε μια δεδομένη στιγμή, αν προσθέσουμε καινούργια αυτόματα το μήκος (length) του πίνακα αυτού θα προσαρμοστεί στο νέο πλήθος.

Πράξεις με πίνακες

Οι πράξεις μεταξύ συνόλων είναι κάτι που υπάρχει και στα μαθηματικά. Η Javascript φροντίζει αυτές τις πράξεις να τις κάνει στην πραγματικότητα μέσω της δομής των πινάκων που διαθέτει. Παρακάτω θα δούμε μερικές από τις πιο βασικές πράξεις μεταξύ πινάκων.

Ένωση: join()

Η «join» είναι μια εντολή μέσω της οποία μπορούμε να ενώσουμε έναν πίνακα με έναν άλλο πίνακα ή έναν πίνακα με ένα συγκεκριμένο όρισμα, και ύστερα να μας επιστραφεί το αποτέλεσμα σε αλφαριθμητικό string. Προσοχή! Δεν αντικαθίστανται το περιεχόμενο του ήδη υπάρχον πίνακα, αλλά επιστρέφεται ως νέο αποτέλεσμα το παραγόμενο. Αυτό σημαίνει ότι όταν καλεστεί η μέθοδος join θα χρησιμοποιήσει τον πίνακα για να φτιάξει το αποτέλεσμα της, και ύστερα θα τον αφήσει όπως ήταν. Ας δούμε μερικά παραδείγματα:

Αρχείο: array.join.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Array.join()</title>
  <meta charset='utf-8'/>
  <script>
   var pinakas = [1,2,3];
   console.log(pinakas.join());
   console.log(pinakas.join(" "));
   console.log(pinakas.join(""));
   var pinakas = new Array(10);
   console.log(pinakas.join('-'));
  </script>
 </head>
 <body>
  <h1>Μια αμέριμνη σελίδα.</h1> 
 </body>
</html>

Αποτέλεσμα:

Αντιστροφή: reverse()

Η μέθοδος της αντιστροφής κάνει αυτό για το οποίο είναι ονομασμένη. Αντιστρέφει την σειρά των στοιχείων ενός πίνακα. Στην συγκεκριμένη περίπτωση δεν δημιουργεί νέο επιστρεφόμενο πίνακα στον οποίο βρίσκεται το αποτέλεσμα, αλλά μετατοπίζει το περιεχόμενο του πίνακα για τον οποίο την καλούμε. Άρα ένας πίνακας που αρχικά είχε την μορφή «[1,2,3]», μετά την εκτέλεση της μεθόδου θα έχει την μορφή «[3,2,1]».

Αρχείο: array.reverse.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Array.reverse()</title>
  <meta charset='utf-8'/>
  <script>
   var pinakas = [1,2,3];
   pinakas.reverse();
   console.log(pinakas);
  </script>
 </head>
 <body>
  <h1>Μια αμέριμνη ιστοσελίδα.</h1> 
 </body>
</html>

Αποτέλεσμα:

Πρόσθεση: concat()

Η πρόσθεση είναι μια μέθοδος με την οποία μπορούμε να προσθέσουμε νέα στοιχεία σε έναν ήδη υπάρχουν πίνακα. Τα στοιχεία αυτά τα εισάγουμε ως ορίσματα μέσα στις παρενθέσεις της concat και αυτά προστίθενται στο τέλος του πίνακα. Η μέθοδος αυτή ΔΕΝ επηρεάζει τον πίνακα για τον οποίο την καλούμε, παίρνει μόνο τα στοιχεία του, ύστερα προσθέτει τα νέα που θέλουμε και ΕΠΙΣΤΡΕΦΕΙ ΣΕ ΚΑΙΝΟΥΡΓΙΟ ΠΙΝΑΚΑ το αποτέλεσμα. Αν δεν δεσμεύσουμε κάποια μεταβλητή για το αποτέλεσμα τότε αυτό χάνεται.  Ας δούμε ένα παράδειγμα:

Αρχείο: array.concat.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Array.concat()</title>
  <meta charset='utf-8'/>
  <script>
   var pinakas = [1,2,3];
   console.log(pinakas.concat(6,9));
   console.log(pinakas.concat([5,7]));
   console.log(pinakas.concat([6,12],[40,30]));
   console.log(pinakas.concat([11,7],[70,[40,30]]));
  </script>
 </head>
 <body>
  <h1>Μια αμέριμνη ιστοσελίδα.</h1> 
 </body>
</html>

Αποτέλεσμα: