Στη JavaScript, ένας πίνακας (array) είναι μια δομή δεδομένων που χρησιμοποιείται για να αποθηκεύσετε μια συλλογή από στοιχεία. Οι στοιχεία αυτά μπορούν να είναι οποιουδήποτε τύπου δεδομένων, όπως αριθμοί, συμβολοσειρές, αντικείμενα κ.λπ. Οι πίνακες στη JavaScript είναι δυναμικοί, που σημαίνει ότι μπορείτε να προσθέτετε ή να αφαιρείτε στοιχεία από έναν πίνακα κατά την εκτέλεση του προγράμματος.
Για να δημιουργήσετε έναν πίνακα στη JavaScript, μπορείτε να χρησιμοποιήσετε τη σύνταξη με τις αγκύλες [] και να αναφέρετε τα στοιχεία μεταξύ τους, χωρισμένα με κόμματα. Για παράδειγμα:
let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];
let mixed = [1, 'apple', true, { name: 'John' }];
Στα παραπάνω παραδείγματα, δημιουργούμε πίνακες με ακέραιους αριθμούς, συμβολοσειρές και μικτούς τύπους δεδομένων.
Για να αποκτήσετε πρόσβαση σε ένα στοιχείο ενός πίνακα, μπορείτε να χρησιμοποιήσετε τη σύνταξη με τις αγκύλες [] και να αναφέρετε τη θέση του στοιχείου με έναν αριθμό δείκτη. Οι δείκτες ξεκινούν από το 0 για το πρώτο στοιχείο και αυξάνονται κατά ένα για κάθε επόμενο στοιχείο. Για παράδειγμα:
let numbers = [1, 2, 3, 4, 5]; console.log(numbers[0]); // Εμφανίζει: 1 console.log(numbers[2]); // Εμφανίζει: 3 let fruits = ['apple', 'banana', 'orange']; console.log(fruits[1]); // Εμφανίζει: banana
Στο παράδειγμα παραπάνω, αποκτούμε πρόσβαση στο πρώτο στοιχείο του πίνακα numbers με τη χρήση του δείκτη [0], και στο δεύτερο στοιχείο με τη χρήση του δείκτη [2]. Αντίστοιχα, αποκτούμε πρόσβαση στο δεύτερο στοιχείο του πίνακα fruits με τη χρήση του δείκτη [1].
Οι πίνακες στη JavaScript υποστηρίζουν επίσης πολλές ενσωματωμένες μεθόδους για την εκτέλεση διάφορων λειτουργιών, όπως η προσθήκη στοιχείων, η αφαίρεση στοιχείων, η αναζήτηση, η ταξινόμηση κ.λπ.
[adinserter block=”2″]
Μια απλή και εύκολη μέθοδος για να δημιουργήσετε έναν πίνακα στη JavaScript είναι με τη χρήση του λεγόμενου “array literal”. Αυτό σημαίνει ότι δηλώνετε τα στοιχεία του πίνακα ανάμεσα σε αγκύλες [], χωρίζοντάς τα με κόμματα.
Εδώ είναι ένα παράδειγμα:
let numbers = [1, 2, 3, 4, 5]; let fruits = ['apple', 'banana', 'orange'];
Στο παράδειγμα παραπάνω, δημιουργούμε έναν πίνακα με ακέραιους αριθμούς με την μεταβλητή numbers, και έναν πίνακα με συμβολοσειρές (ονόματα φρούτων) με την μεταβλητή fruits.
Μπορείτε να προσθέσετε όσα στοιχεία θέλετε μέσα στον πίνακα, ανάλογα με τις ανάγκες σας.
Στη JavaScript, οι κενοί χώροι (spaces) και οι αλλαγές γραμμής (line breaks) δεν έχουν σημασία κατά τη δήλωση ενός πίνακα. Μπορείτε να αναγράψετε τα στοιχεία του πίνακα σε μια γραμμή ή σε πολλαπλές γραμμές και ο κώδικας θα εκτελεστεί με τον ίδιο τρόπο.
Εδώ είναι ένα παράδειγμα που δείχνει τη δήλωση ενός πίνακα σε πολλαπλές γραμμές:
let numbers = [ 1, 2, 3, 4, 5 ]; let fruits = [ 'apple', 'banana', 'orange' ];
Όπως μπορείτε να δείτε, τα στοιχεία του πίνακα μπορούν να γραφούν καθένα σε μια γραμμή για καλύτερη αναγνωσιμότητα. Η παραπάνω δήλωση πίνακα θα δημιουργήσει τον ίδιο πίνακα με το προηγούμενο παράδειγμα.
Μπορείτε να δημιουργήσετε έναν πίνακα χρησιμοποιώντας την κατασκευή (constructor) του Array object και να παρέχετε τα στοιχεία μέσω ορισμάτων.
Εδώ είναι ένα παράδειγμα:
let numbers = new Array(1, 2, 3, 4, 5);
let fruits = new Array('apple', 'banana', 'orange');
Και πάλι, αυτό θα δημιουργήσει τον ίδιο πίνακα με τις προηγούμενες παραδείγματα. Μπορείτε να προσθέσετε όσα στοιχεία θέλετε στην κατασκευή του πίνακα.
Είναι σημαντικό να σημειωθεί ότι η προτιμότερη μέθοδος για τη δημιουργία ενός πίνακα είναι με τη χρήση του “array literal” (π.χ., let numbers = [1, 2, 3, 4, 5]), καθώς είναι πιο σύντομη και πιο ευανάγνωστη.
Στη JavaScript, μπορείτε επίσης να χρησιμοποιήσετε τη λέξη-κλειδί new για να δημιουργήσετε έναν πίνακα χρησιμοποιώντας την κατασκευή (constructor) του Array object. Αυτή η μέθοδος μπορεί να είναι χρήσιμη εάν θέλετε να δημιουργήσετε έναν πίνακα με μια συγκεκριμένη μήκος (length) χωρίς να δηλώσετε τα στοιχεία του πίνακα εκ των προτέρων.
Εδώ είναι ένα παράδειγμα:
let numbers = new Array(5); // Δημιουργία ενός πίνακα με μήκος 5 numbers[0] = 1; numbers[1] = 2; numbers[2] = 3; numbers[3] = 4; numbers[4] = 5;
Στο παράδειγμα παραπάνω, δημιουργούμε έναν πίνακα με μήκος 5, αλλά δεν δηλώνουμε τα στοιχεία του πίνακα από πριν. Αντί αυτού, χρησιμοποιούμε την ειδική σύνταξη numbers[index] = value για να αναθέσουμε τιμές στα στοιχεία του πίνακα μετά τη δημιουργία του.
Σημειώστε ότι η χρήση της κατασκευής new Array(length) δεν είναι η συνηθέστερη μέθοδος για τη δημιουργία ενός πίνακα. Συνήθως, προτιμάτε να χρησιμοποιείτε το “array literal” (π.χ., let numbers = [1, 2, 3, 4, 5]) ή τη μέθοδο Array.from() για τη δημιουργία πιο ευέλικτων και αναγνωστότερων πινάκων.
Για να αποκτήσετε πρόσβαση σε ένα στοιχείο του πίνακα, αναφέρεστε στον αντίστοιχο αριθμό δείκτη (index) του στοιχείου. Οι δείκτες των πινάκων ξεκινούν από το 0 και αυξάνονται κατά ένα για κάθε επόμενο στοιχείο.
Εδώ είναι ένα παράδειγμα που δείχνει πώς να αποκτήσετε πρόσβαση σε ένα στοιχείο του πίνακα:
let fruits = ['apple', 'banana', 'orange']; console.log(fruits[0]); // Αποτέλεσμα: 'apple' console.log(fruits[1]); // Αποτέλεσμα: 'banana' console.log(fruits[2]); // Αποτέλεσμα: 'orange'
Στο παραπάνω παράδειγμα, ο πίνακας fruits περιέχει τρία στοιχεία. Χρησιμοποιούμε τη σύνταξη array[index] για να αποκτήσουμε πρόσβαση σε κάθε στοιχείο, όπου index είναι ο αριθμός δείκτη που αντιστοιχεί στο επιθυμητό στοιχείο.
Είναι σημαντικό να σημειωθεί ότι οι αριθμοί δείκτες ξεκινούν από το 0, οπότε το πρώτο στοιχείο του πίνακα έχει δείκτη 0, το δεύτερο στοιχείο έχει δείκτη 1 και ούτω καθεξής.
[adinserter block=”3″]
Για να αλλάξετε ένα στοιχείο του πίνακα, απλά αναθέστε μια νέα τιμή στη θέση του στοιχείου. Χρησιμοποιήστε τη σύνταξη array[index] = newValue για να αλλάξετε την τιμή ενός στοιχείου σε έναν πίνακα.
Εδώ είναι ένα παράδειγμα που δείχνει πώς να αλλάξετε ένα στοιχείο του πίνακα:
let fruits = ['apple', 'banana', 'orange']; console.log(fruits); // Αποτέλεσμα: ['apple', 'banana', 'orange'] fruits[1] = 'grapefruit'; console.log(fruits); // Αποτέλεσμα: ['apple', 'grapefruit', 'orange']
Στο παραπάνω παράδειγμα, αρχικά ο πίνακας fruits περιέχει τα στοιχεία 'apple', 'banana' και 'orange'. Στη συνέχεια, χρησιμοποιούμε την εκχώρηση fruits[1] = 'grapefruit' για να αλλάξουμε την τιμή του δεύτερου στοιχείου του πίνακα σε 'grapefruit'. Το αποτέλεσμα είναι ο πίνακας ['apple', 'grapefruit', 'orange'] με το στοιχείο 'banana' να έχει αλλάξει σε 'grapefruit'.
Αντιστοίχως, μπορείτε να χρησιμοποιήσετε τη σύνταξη array[index] για να ανακτήσετε την τρέχουσα τιμή ενός στοιχείου του πίνακα.
Η μέθοδος toString() της JavaScript μετατρέπει έναν πίνακα σε μια συμβολοσειρά από τις τιμές του πίνακα (χωρισμένες με κόμματα). Αυτή η μέθοδος επιστρέφει μια νέα συμβολοσειρά που αναπαριστά τις τιμές του πίνακα.
Εδώ είναι ένα παράδειγμα που δείχνει πώς να μετατρέψετε έναν πίνακα σε μια συμβολοσειρά:
let fruits = ['apple', 'banana', 'orange']; let fruitsString = fruits.toString(); console.log(fruitsString); // Αποτέλεσμα: 'apple,banana,orange'
Στο παραπάνω παράδειγμα, ο πίνακας fruits περιέχει τα στοιχεία 'apple', 'banana' και 'orange'. Χρησιμοποιούμε τη μέθοδο toString() για να μετατρέψουμε τον πίνακα σε μια συμβολοσειρά. Το αποτέλεσμα είναι η συμβολοσειρά 'apple,banana,orange' που αναπαριστά τις τιμές του πίνακα χωρισμένες με κόμματα.
Είναι σημαντικό να σημειωθεί ότι η μέθοδος toString() δεν αλλάζει τον αρχικό πίνακα, αλλά επιστρέφει μια νέα συμβολοσειρά που αναπαριστά τις τιμές του πίνακα.
Για να αποκτήσετε πρόσβαση σε ολόκληρο τον πίνακα στη JavaScript, μπορείτε να αναφερθείτε στο όνομα του πίνακα χωρίς να χρησιμοποιήσετε ένδειξη δείκτη. Αυτό θα σας επιτρέψει να χρησιμοποιήσετε τον πίνακα ως ολόκληρο αντικείμενο και να εκτελέσετε διάφορες ενέργειες πάνω του.
Εδώ είναι ένα παράδειγμα που δείχνει πώς να αποκτήσετε πρόσβαση σε ολόκληρο τον πίνακα:
let fruits = ['apple', 'banana', 'orange']; console.log(fruits); // Αποτέλεσμα: ['apple', 'banana', 'orange']
Στο παραπάνω παράδειγμα, η καταχώρηση console.log(fruits) εμφανίζει τον ολόκληρο πίνακα ['apple', 'banana', 'orange']. Χωρίς να χρησιμοποιήσουμε ένδειξη δείκτη, μπορούμε να αναφερθούμε απευθείας στο όνομα του πίνακα fruits για να αποκτήσουμε πρόσβαση σε ολόκληρο τον πίνακα.
Αυτή η τεχνική είναι χρήσιμη όταν θέλετε να εκτελέσετε ενέργειες που επηρεάζουν ολόκληρο τον πίνακα, όπως την εκτύπωση ή την επισκόπηση των στοιχείων του πίνακα.
Στη JavaScript, οι πίνακες είναι ένα ειδικό είδος αντικειμένων. Ο τελεστής typeof επιστρέφει την τιμή “object” για τους πίνακες, καθώς οι πίνακες αντιμετωπίζονται ως ένα είδος αντικειμένων.
Ωστόσο, οι πίνακες στη JavaScript έχουν ξεχωριστή σημασία και χρησιμοποιούνται κυρίως για την αποθήκευση και την οργάνωση ομοιογενών στοιχείων. Ενώ είναι αλήθεια ότι οι πίνακες χρησιμοποιούν αριθμούς για να αποκτήσουν πρόσβαση στα στοιχεία τους με τη χρήση των δεικτών, αυτή η λειτουργία είναι ένα χαρακτηριστικό των πινάκων που τους καθιστά ξεχωριστούς από τα απλά αντικείμενα.
Επομένως, ενώ το typeof μπορεί να επιστρέφει την τιμή “object” για έναν πίνακα, είναι προτιμότερο να περιγράψουμε τους πίνακες ως πίνακες και να χρησιμοποιούμε τις ειδικές λειτουργίες και μεθόδους που παρέχονται για την εργασία με πίνακες.
Στη JavaScript, τα αντικείμενα χρησιμοποιούν ονόματα για να αποκτήσουν πρόσβαση στα μέλη τους. Τα μέλη των αντικειμένων αναφέρονται ως ιδιότητες (properties) και μπορούν να είναι ονόματα ή κλειδιά που σχετίζονται με τιμές.
Για παράδειγμα, αν έχετε ένα αντικείμενο με το όνομα “person” και θέλετε να αποκτήσετε πρόσβαση στο μέλος “name” του αντικειμένου, μπορείτε να χρησιμοποιήσετε τη σύνταξη objectName.propertyName. Εδώ είναι ένα παράδειγμα:
let person = {
name: "John",
age: 30,
city: "New York"
};
console.log(person.name); // Αποτέλεσμα: "John"
Στο παραπάνω παράδειγμα, η καταχώρηση person.name επιστρέφει την τιμή της ιδιότητας “name” του αντικειμένου “person”, που είναι η συμβολοσειρά “John”.
Αυτή η λειτουργία διαφοροποιεί την προσέγγιση πρόσβασης στα μέλη των αντικειμένων σε σχέση με τους πίνακες, όπου χρησιμοποιούνται αριθμοί δεικτών για την πρόσβαση σε στοιχεία.
Στη JavaScript, οι μεταβλητές μπορούν να είναι αντικείμενα και οι πίνακες είναι ένα ειδικό είδος αντικειμένων. Αυτό σημαίνει ότι μπορείτε να έχετε μεταβλητές διαφορετικών τύπων στον ίδιο πίνακα.
Μπορείτε να έχετε αντικείμενα σε έναν πίνακα, όπου κάθε στοιχείο του πίνακα είναι ένα αντικείμενο με τις δικές του ιδιότητες και μεθόδους. Επίσης, μπορείτε να έχετε συναρτήσεις ως στοιχεία ενός πίνακα, όπου κάθε στοιχείο του πίνακα είναι μια συνάρτηση. Επιπλέον, μπορείτε να έχετε πίνακες εντός ενός πίνακα, όπου κάθε στοιχείο του πίνακα είναι ένας υποπίνακας.
Εδώ είναι ένα παράδειγμα για να δείτε πώς μπορείτε να έχετε διαφορετικούς τύπους μεταβλητών σε έναν πίνακα:
let myArray = [1, "Hello", { name: "John" }, function() { console.log("This is a function"); }, [2, 3, 4]];
console.log(myArray[0]); // Αποτέλεσμα: 1
console.log(myArray[1]); // Αποτέλεσμα: "Hello"
console.log(myArray[2]); // Αποτέλεσμα: { name: "John" }
console.log(myArray[3]); // Αποτέλεσμα: function() { console.log("This is a function"); }
console.log(myArray[4]); // Αποτέλεσμα: [2, 3, 4]
Όπως μπορείτε να δείτε, ο πίνακας myArray περιλαμβάνει διάφορες μεταβλητές διαφορετικών τύπων, όπως ακέραιος αριθμός, συμβολοσειρά, αντικείμενο, συνάρτηση και άλλος πίνακας. Μπορείτε να αποκτήσετε πρόσβαση σε αυτά τα στοιχεία χρησιμοποιώντας τους δείκτες [0], [1], [2], [3], [4], αντίστοιχα.
Σωστά, οι πραγματικές δυνατότητες των πινάκων στη JavaScript προέρχονται από τις ενσωματωμένες ιδιότητες και μεθόδους που παρέχονται για τους πίνακες.
[adinserter block=”4σ”]
Ορισμένες από τις κύριες ιδιότητες που μπορείτε να χρησιμοποιήσετε σε έναν πίνακα περιλαμβάνουν τις εξής:
length: Η ιδιότηταlengthεπιστρέφει τον αριθμό των στοιχείων που περιέχει ο πίνακας.constructor: Η ιδιότηταconstructorαναφέρεται στη συνάρτηση κατασκευής (constructor) του αντικειμένου που δημιούργησε τον πίνακα.
Επίσης, υπάρχουν πολλές ενσωματωμένες μέθοδοι που μπορείτε να χρησιμοποιήσετε σε έναν πίνακα, όπως οι εξής:
toString(): Η μέθοδοςtoString()μετατρέπει έναν πίνακα σε μια συμβολοσειρά με τις τιμές των στοιχείων χωρισμένες με κόμματα.join(): Η μέθοδοςjoin()συνδυάζει όλα τα στοιχεία ενός πίνακα σε μια συμβολοσειρά, χρησιμοποιώντας έναν καθορισμένο διαχωριστικό χαρακτήρα.push(): Η μέθοδοςpush()προσθέτει ένα ή περισσότερα στοιχεία στο τέλος ενός πίνακα και επιστρέφει το νέο μήκος του πίνακα.pop(): Η μέθοδοςpop()αφαιρεί το τελευταίο στοιχείο από έναν πίνακα και το επιστρέφει.shift(): Η μέθοδοςshift()αφαιρεί το πρώτο στοιχείο από έναν πίνακα και το επιστρέφει.unshift(): Η μέθοδοςunshift()προσθέτει ένα ή περισσότερα στοιχεία στην αρχή ενός πίνακα και επιστρέφει το νέο μήκος του πίνακα.
Αυτές είναι μόνο μερικές από τις πολλές δυνατότητες που παρέχονται από τις ιδιότητες και μεθόδους των πινάκων στη JavaScript. Μπορείτε να χρησιμοποιήσετε αυτές τις ιδιότητες και μεθόδους για να εκτελέσετε διάφορες λειτουργίες και επεξεργασίες σε πίνακες, προσφέροντας ευελιξία και ισχυρή λειτουργικότητα.
Η ιδιότητα length ενός πίνακα επιστρέφει το μήκος του πίνακα, δηλαδή τον αριθμό των στοιχείων που περιέχει. Αυτή η ιδιότητα είναι πολύ χρήσιμη για να πάρετε πληροφορίες για το μέγεθος του πίνακα και να το χρησιμοποιήσετε για επαναλήψεις, έλεγχο συνθηκών και άλλες λειτουργίες που αφορούν τον πίνακα. Η τιμή της ιδιότητας length είναι πάντα ένας ακέραιος αριθμός που αντιπροσωπεύει τον αριθμό των στοιχείων στον πίνακα.
Ας δούμε ένα παράδειγμα που χρησιμοποιεί την ιδιότητα length σε έναν πίνακα:
let fruits = ["Apple", "Banana", "Orange"]; console.log(fruits.length); // Εμφανίζει: 3
Σε αυτό το παράδειγμα, ο πίνακας fruits έχει τρία στοιχεία. Χρησιμοποιώντας την ιδιότητα length, μπορούμε να εμφανίσουμε το μήκος του πίνακα, που είναι 3.
Για να αποκτήσετε πρόσβαση στο πρώτο στοιχείο ενός πίνακα στη JavaScript, μπορείτε να χρησιμοποιήσετε τη σύνταξη arrayName[0], όπου arrayName είναι το όνομα του πίνακα.
Παράδειγμα:
let fruits = ["Apple", "Banana", "Orange"]; let firstFruit = fruits[0]; console.log(firstFruit); // Εμφανίζει: "Apple"
Στο παράδειγμα αυτό, ο πίνακας fruits περιέχει τρία στοιχεία. Χρησιμοποιώντας τη σύνταξη fruits[0], προσπελαύνουμε το πρώτο στοιχείο του πίνακα, που είναι η “Apple”. Αυτή η τιμή αποθηκεύεται στη μεταβλητή firstFruit, και με την console.log() εμφανίζουμε την τιμή της μεταβλητής firstFruit.
Για να αποκτήσετε πρόσβαση στο τελευταίο στοιχείο ενός πίνακα στη JavaScript, μπορείτε να χρησιμοποιήσετε την ιδιότητα length του πίνακα μαζί με τη σύνταξη arrayName[length - 1], όπου arrayName είναι το όνομα του πίνακα.
Παράδειγμα:
let fruits = ["Apple", "Banana", "Orange"]; let lastFruit = fruits[fruits.length - 1]; console.log(lastFruit); // Εμφανίζει: "Orange"
Σε αυτό το παράδειγμα, ο πίνακας fruits περιέχει τρία στοιχεία. Χρησιμοποιούμε την ιδιότητα length του πίνακα (fruits.length) για να πάρουμε το μήκος του πίνακα, και στη συνέχεια αφαιρούμε 1 (- 1) για να προσπελάσουμε το δείκτη του τελευταίου στοιχείου. Έτσι, προσπελαύνουμε το τελευταίο στοιχείο του πίνακα, που είναι το “Orange”. Αυτή η τιμή αποθηκεύεται στη μεταβλητή lastFruit, και με την console.log() εμφανίζουμε την τιμή της μεταβλητής lastFruit.
Ένας τρόπος να περιηγηθείτε στα στοιχεία ενός πίνακα είναι με τη χρήση ενός βρόχου for. Ας δούμε ένα παράδειγμα:
let fruits = ["Apple", "Banana", "Orange"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Σε αυτό το παράδειγμα, ο πίνακας fruits περιέχει τρία στοιχεία. Χρησιμοποιούμε έναν βρόχο for για να περιηγηθούμε στα στοιχεία του πίνακα. Η μεταβλητή i αρχικοποιείται στο 0, και η συνθήκη i < fruits.length ελέγχει αν η i είναι μικρότερη από το μήκος του πίνακα. Μέσα στον βρόχο, χρησιμοποιούμε το console.log() για να εμφανίσουμε το στοιχείο του πίνακα με δείκτη i. Καθώς ο βρόχος εκτελείται, η i αυξάνεται κατά 1 σε κάθε επανάληψη, μέχρις ότου η συνθήκη i < fruits.length να είναι ψευδής και ο βρόχος να τερματιστεί.
Μια άλλη μέθοδος για να περιηγηθείτε στα στοιχεία ενός πίνακα είναι με τη χρήση της συνάρτησης Array.forEach(). Ας δούμε ένα παράδειγμα:
let fruits = ["Apple", "Banana", "Orange"];
fruits.forEach(function(fruit) {
console.log(fruit);
});
Σε αυτό το παράδειγμα, καλούμε τη συνάρτηση forEach() στον πίνακα fruits. Περνάμε μια ανώνυμη συνάρτηση ως όρισμα, η οποία ορίζεται με την λέξη-κλειδί function. Η ανώνυμη συνάρτηση παίρνει ένα παράμετρο (εδώ το ονομάζουμε fruit), που αντιπροσωπεύει κάθε στοιχείο του πίνακα. Μέσα στη συνάρτηση, χρησιμοποιούμε το console.log() για να εμφανίσουμε κάθε στοιχείο του πίνακα. Η συνάρτηση forEach() θα εκτελεστεί για κάθε στοιχείο του πίνακα, χωρίς να χρειάζεται να ανησυχούμε για τη διαχείριση του δείκτη του πίνακα ή το μήκος του πίνακα.
Η πιο εύκολη μέθοδος για να προσθέσετε ένα νέο στοιχείο σε έναν πίνακα είναι να χρησιμοποιήσετε τη μέθοδο push(). Ας δούμε ένα παράδειγμα:
let fruits = ["Apple", "Banana", "Orange"];
fruits.push("Mango");
console.log(fruits);
Σε αυτό το παράδειγμα, έχουμε έναν πίνακα με τρία στοιχεία, τα “Apple”, “Banana” και “Orange”. Χρησιμοποιούμε τη μέθοδο push() για να προσθέσουμε το στοιχείο “Mango” στον πίνακα. Η μέθοδος push() προσθέτει το νέο στοιχείο στο τέλος του πίνακα. Μετά την εκτέλεση της μεθόδου push(), το περιεχόμενο του πίνακα θα είναι [“Apple”, “Banana”, “Orange”, “Mango”].
Μπορείτε επίσης να προσθέσετε ένα νέο στοιχείο σε έναν πίνακα χρησιμοποιώντας την ιδιότητα length. Ας δούμε ένα παράδειγμα:
let fruits = ["Apple", "Banana", "Orange"]; fruits[fruits.length] = "Mango"; console.log(fruits);
Σε αυτό το παράδειγμα, χρησιμοποιούμε την ιδιότητα length του πίνακα fruits για να προσπελάσουμε το επόμενο δείκτη στον πίνακα, που είναι κενός. Αντιστοιχούντως, το νέο στοιχείο “Mango” εκχωρείται σε αυτόν τον δείκτη. Μετά την εκτέλεση του κώδικα, το περιεχόμενο του πίνακα θα είναι [“Apple”, “Banana”, “Orange”, “Mango”]. Σημειώστε ότι οι δείκτες των πινάκων ξεκινούν από το 0, οπότε η ιδιότητα length είναι ίση με το μήκος του πίνακα και αναπαριστά τον επόμενο δείκτη για την προσθήκη νέου στοιχείου.
[adinserter block=”5″]
Όταν προσθέτετε στοιχεία σε έναν πίνακα χρησιμοποιώντας υψηλούς δείκτες, μπορεί να δημιουργηθούν “κενά” (undefined) στοιχεία στον πίνακα. Ας δούμε ένα παράδειγμα:
let fruits = ["Apple", "Banana", "Orange"]; fruits[10] = "Mango"; console.log(fruits);
Σε αυτό το παράδειγμα, προσπαθούμε να προσθέσουμε το στοιχείο “Mango” στον πίνακα fruits χρησιμοποιώντας έναν δείκτη 10. Αυτός ο δείκτης είναι υψηλότερος από το τρέχον μήκος του πίνακα, οπότε προκύπτει μια κενή θέση μεταξύ των δεικτών 2 και 10. Η έξοδος του κώδικα θα είναι κάτι σαν αυτό: ["Apple", "Banana", "Orange", undefined, undefined, undefined, undefined, undefined, undefined, undefined, "Mango"]. Αυτή η συμπεριφορά μπορεί να προκαλέσει σύγχυση και προβλήματα αναζήτησης στον πίνακα, επομένως πρέπει να είστε προσεκτικοί όταν προσθέτετε στοιχεία με υψηλούς δείκτες.
Στην JavaScript, οι πίνακες χρησιμοποιούν αριθμημένους δείκτες (αριθμούς) για να προσπελάσουν τα στοιχεία τους, ενώ τα αντικείμενα χρησιμοποιούν ονομαστικούς δείκτες (ονόματα ιδιοτήτων) για την πρόσβαση στα μέλη τους.
Οι πίνακες είναι κατάλληλοι για την αποθήκευση συλλογών στοιχείων, όπως αριθμοί ή αλφαριθμητικά, και μπορούν να διαχειριστούν εύκολα πολλαπλά στοιχεία χρησιμοποιώντας μεθόδους όπως η push(), η pop(), η splice() κ.λπ.
Από την άλλη πλευρά, τα αντικείμενα είναι κατάλληλα για την αναπαράσταση συγκεκριμένων στοιχείων με τη βοήθεια των ιδιοτήτων τους. Μπορούν να περιέχουν διαφορετικούς τύπους δεδομένων και μπορούν εύκολα να προσαρτηθούν νέες ιδιότητες ή να αλλάξουν οι υπάρχουσες.
Γενικά, οι πίνακες χρησιμοποιούνται για συλλογές στοιχείων, ενώ τα αντικείμενα χρησιμοποιούνται για να αναπαραστήσουν συγκεκριμένα αντικείμενα με ιδιότητες και λειτουργίες.
Η JavaScript δεν υποστηρίζει συνδυασμένους πίνακες (associative arrays) όπως άλλες γλώσσες προγραμματισμού. Όταν θέλετε να χρησιμοποιήσετε κλειδιά (ονόματα) για τα στοιχεία σας, πρέπει να χρησιμοποιήσετε αντικείμενα.
Αν θέλετε να αποθηκεύσετε στοιχεία με αριθμημένους δείκτες (αριθμούς), τότε οι πίνακες είναι η κατάλληλη επιλογή. Τα στοιχεία των πινάκων προσπελαύνονται με αριθμημένους δείκτες, ξεκινώντας από το 0.
Επομένως, χρησιμοποιείτε αντικείμενα όταν θέλετε να έχετε ονόματα (κλειδιά) στα στοιχεία σας και πίνακες όταν θέλετε να χρησιμοποιήσετε αριθμημένους δείκτες.
Η JavaScript παρέχει έναν ενσωματωμένο κατασκευαστή πίνακα με τη δήλωση new Array(). Ωστόσο, είναι ασφαλές και συνηθισμένο να χρησιμοποιείτε τη σύνταξη [] για τη δημιουργία νέου κενού πίνακα. Οι δύο αυτές δηλώσεις παράγουν τον ίδιο κενό πίνακα με το όνομα points.
Ας δούμε ένα απλό παράδειγμα χρησιμοποιώντας τόσο τον κατασκευαστή new Array() όσο και τη σύνταξη [] για τη δημιουργία ενός πίνακα με το όνομα “points”:
// Χρήση του new Array() var points1 = new Array(); // Χρήση της σύνταξης [] var points2 = []; console.log(points1); // [] console.log(points2); // [] // Επιβεβαίωση ότι οι δύο δηλώσεις παράγουν τον ίδιο κενό πίνακα console.log(points1.length === points2.length); // true
Και οι δύο δηλώσεις παράγουν έναν ίδιο κενό πίνακα, και η έλευση points1.length === points2.length επιστρέφει true, δείχνοντας ότι οι δύο πίνακες έχουν τον ίδιο μήκος.
Ας δούμε ένα παράδειγμα με δύο διαφορετικές δηλώσεις που δημιουργούν έναν νέο πίνακα που περιέχει 6 αριθμούς:
// Χρήση του new Array() var numbers1 = new Array(1, 2, 3, 4, 5, 6); // Χρήση της σύνταξης [] var numbers2 = [1, 2, 3, 4, 5, 6]; console.log(numbers1); // [1, 2, 3, 4, 5, 6] console.log(numbers2); // [1, 2, 3, 4, 5, 6] // Επιβεβαίωση ότι οι δύο δηλώσεις παράγουν τον ίδιο πίνακα console.log(numbers1.length === numbers2.length); // true
Και οι δύο δηλώσεις δημιουργούν έναν πίνακα με τους ίδιους 6 αριθμούς, και η έλεγχος numbers1.length === numbers2.length επιστρέφει true, δείχνοντας ότι οι δύο πίνακες έχουν τον ίδιο αριθμό στοιχείων.
Η χρήση της λέξης-κλειδιού new μπορεί να προκαλέσει απρόσμενα αποτελέσματα, ιδίως όταν χρησιμοποιείται με τον κατασκευαστή Array.
Αν χρησιμοποιήσετε τον κατασκευαστή Array με το new, ο αριθμός που παρέχετε θα είναι η αρχική υπόθεση για το μήκος του πίνακα, αλλά δεν θα δημιουργήσει πραγματικά στοιχεία με τις αντίστοιχες τιμές.
Ας δούμε ένα παράδειγμα:
var numbers = new Array(6); console.log(numbers); // [ <6 empty items> ] console.log(numbers.length); // 6
Παρατηρούμε ότι ο πίνακας που δημιουργήθηκε με τη χρήση του new Array(6) περιέχει 6 κενά στοιχεία. Αυτό μπορεί να προκαλέσει σύγχυση και απρόσμενα αποτελέσματα, ειδικά όταν προσπαθείτε να προσπελάσετε αυτά τα στοιχεία.
Για αυτόν τον λόγο, είναι συνηθισμένη πρακτική να χρησιμοποιείτε τη σύνταξη [] για τη δημιουργία νέου πίνακα στη JavaScript, καθώς είναι πιο ασφαλής και προβλέψιμος τρόπος.
Ένα κοινό ερώτημα είναι: Πώς μπορώ να καταλάβω εάν μια μεταβλητή είναι ένας πίνακας (array);
Το πρόβλημα είναι ότι ο τελεστής typeof στη JavaScript επιστρέφει “object” για τους πίνακες, αντί να επιστρέφει “array”.
Για να αναγνωρίσετε εάν μια μεταβλητή είναι ένας πίνακας, μπορείτε να χρησιμοποιήσετε τη μέθοδο Array.isArray() που είναι διαθέσιμη στη JavaScript:
var myArray = [1, 2, 3]; var notArray = "This is not an array"; console.log(Array.isArray(myArray)); // Επιστρέφει: true console.log(Array.isArray(notArray)); // Επιστρέφει: false
Σε αυτό το παράδειγμα, χρησιμοποιούμε τη μέθοδο Array.isArray() για να ελέγξουμε εάν η μεταβλητή myArray είναι πίνακας. Η μέθοδος επιστρέφει true επειδή η myArray είναι ένας πίνακας. Στη συνέχεια, ελέγχουμε τη μεταβλητή notArray και η μέθοδος Array.isArray() επιστρέφει false, επειδή η notArray δεν είναι ένας πίνακας.
Αυτός είναι ένας ασφαλής τρόπος για να αναγνωρίσετε εάν μια μεταβλητή είναι πίνακας στη JavaScript, παρά το γεγονός ότι ο τελεστής typeof δεν επιστρέφει “array”.