Στη JavaScript, ένας πίνακας είναι μια δομή που μοιάζει με λίστα, χωρίς σταθερό μήκος, και μπορεί να περιέχει οποιονδήποτε τύπο πρωτογενών τιμών ή αντικειμένων, ακόμη και μικτούς τύπους.
Περιλαμβάνει την ιδιότητα length καθώς και πολλές χρήσιμες μεθόδους για τη διάσχιση και την τροποποίηση του πίνακα.
Για να δημιουργήσεις έναν πίνακα, βάλε στοιχεία μέσα σε αγκύλες [].
Για να διαβάσεις από τον πίνακα, βάλε τη θέση μέσα σε αγκύλες [] μετά το αναγνωριστικό. Οι θέσεις ενός πίνακα ξεκινούν από το μηδέν.
Για παράδειγμα:
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names[1];
// => Laura
Οι πίνακες μπορούν να δημιουργηθούν και με τη σύνταξη του κατασκευαστή, αλλά για τις περισσότερες χρήσεις συνιστάται η σύνταξη με κυριολεκτικό πίνακα.
const names = new Array();
names.push('Jack', 'Laura', 'Paul', 'Megan');
names[1];
// => Laura
Οι πίνακες δεν μπορούν να χρησιμοποιήσουν strings ως θέσεις στοιχείων, αλλά πρέπει να χρησιμοποιήσουν ακέραιους αριθμούς (number).
Ο ορισμός ή η πρόσβαση μέσω μη ακέραιων τιμών με τη σημειογραφία αγκυλών (ή τη σημειογραφία τελείας) δεν θα ορίσει ή θα ανακτήσει ένα στοιχείο από την ίδια τη λίστα του πίνακα, αλλά θα ορίσει ή θα προσπελάσει μια μεταβλητή που σχετίζεται με τη συλλογή ιδιοτήτων του αντικειμένου αυτού του πίνακα.
Οι ιδιότητες αντικειμένου του πίνακα και η λίστα των στοιχείων του πίνακα είναι ξεχωριστές, και οι λειτουργίες διάσχισης και τροποποίησης του πίνακα δεν μπορούν να εφαρμοστούν σε αυτές τις ονομασμένες ιδιότητες.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length;
// => 4
// Properties can be set on arrays using bracket ['property'] or
// dot .property notation, and this will affect the length, as
// shown below.
names.magician = 'Elyse';
names.length;
// => 4
// The property shows up when logging the array, making it seem
// that the property is somehow incorporated in the array.
names;
// => ["Jack", "Laura", "Paul", "Megan", magician: "Elyse"]
// However, be aware. Properties added via non-numeric keys are
// NOT part of the array's internal list, and are not traversed
// or mutated when using one of the traversal or mutation
// operations.
names.forEach((name) => console.log(name));
// => Jack
// => Laura
// => Paul
// => Megan
Οι πίνακες στη JavaScript είναι κανονικά objects, και τα στοιχεία μπορούν να διαγραφούν χρησιμοποιώντας τη λέξη-κλειδί delete.
Ωστόσο, αυτό δεν αλλάζει το μήκος του πίνακα και αφήνει μια τρύπα empty.
Σε άλλες γλώσσες, αυτό μοιάζει με έναν αραιό πίνακα.
Οι τρύπες empty παραλείπονται όταν χρησιμοποιείς λειτουργίες διάσχισης ή τροποποίησης.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
delete names[1];
names;
// => ["Jack", empty, "Paul", "Megan"]
names.length;
// => 4
names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan
Αν δεν πρέπει να υπάρχουν τρύπες, και αν το length πρέπει να αντικατοπτρίζει τον αριθμό των στοιχείων που θα διασχιστούν ή θα τροποποιηθούν, χρησιμοποίησε splice αντ' αυτού.
Η μέθοδος splice() αλλάζει τα περιεχόμενα ενός πίνακα αφαιρώντας ή αντικαθιστώντας υπάρχοντα στοιχεία ή/και προσθέτοντας νέα στοιχεία στη θέση τους.1
Για παράδειγμα:
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(1, 1);
names;
// => ["Jack", "Paul", "Megan"]
names.length;
// => 3
names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan
Η ιδιότητα length ενός πίνακα είναι συνδεδεμένη με τη λίστα των στοιχείων που περιέχει ο πίνακας.
Μπορεί να τροποποιηθεί.
Όταν το μήκος αυξάνεται, δημιουργεί τρύπες empty, οι οποίες δεν λαμβάνονται υπόψη κατά τη διάσχιση ή την τροποποίηση του πίνακα.
Όταν το μήκος μειώνεται, αφαιρεί τα στοιχεία στο τέλος του πίνακα.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length = 6;
names;
// => ["Jack", "Laura", "Paul", "Megan", empty × 2]
names.length = 2;
// => ["Jack", "Laura"]
Επειδή οι πίνακες είναι objects, το typeof names δίνει "object".
Για να ελέγξεις αν κάτι είναι Array, χρησιμοποίησε το Array.isArray:
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
typeof names;
// => "object"
Array.isArray(names);
// => true
const object = {};
Array.isArray(object);
// => false
Μπορεί να μπεις στον πειρασμό να χρησιμοποιήσεις το names instanceof Array, και αυτό μπορεί να δουλέψει, αλλά όχι σε όλες τις περιπτώσεις.
Διάβασε αυτό το άρθρο για περισσότερες πληροφορίες.
Μερικές από τις μεθόδους που είναι διαθέσιμες σε κάθε αντικείμενο Array μπορούν να χρησιμοποιηθούν για προσθήκη ή αφαίρεση από τον πίνακα. Ορίστε μερικές από αυτές:
Η μέθοδος
push()προσθέτει ένα ή περισσότερα στοιχεία στο τέλος ενός πίνακα και επιστρέφει το νέο μήκος του πίνακα.2
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.push('Jill'); // => 5
names;
// => ['Jack', 'Laura', 'Paul', 'Megan', 'Jill']
Η μέθοδος
pop()αφαιρεί το τελευταίο στοιχείο από έναν πίνακα και επιστρέφει αυτό το στοιχείο. Αυτή η μέθοδος αλλάζει το μήκος του πίνακα.3
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.pop(); // => 'Megan'
names;
// => ['Jack', 'Laura', 'Paul']
Η μέθοδος
shift()αφαιρεί το πρώτο στοιχείο από έναν πίνακα και επιστρέφει αυτό το στοιχείο που αφαιρέθηκε. Αυτή η μέθοδος αλλάζει το μήκος του πίνακα.4
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.shift(); // => 'Jack'
names;
// => ['Laura', 'Paul', 'Megan']
Η μέθοδος unshift() προσθέτει ένα ή περισσότερα στοιχεία στην αρχή ενός πίνακα και επιστρέφει το νέο μήκος του πίνακα.5
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.unshift('Jill'); // => 5
names;
// => ['Jill', 'Jack', 'Laura', 'Paul', 'Megan']
Η μέθοδος splice() αλλάζει τα περιεχόμενα ενός πίνακα αφαιρώντας ή αντικαθιστώντας υπάρχοντα στοιχεία ή/και προσθέτοντας νέα στοιχεία στη θέση τους. Αυτή η μέθοδος επιστρέφει έναν πίνακα που περιέχει τα διαγραμμένα στοιχεία.1
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(2, 1, 'Jill'); // => ['Paul']
names;
// => ['Jack', 'Laura', 'Jill', 'Megan']
splice, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice (αναφέρεται στις 29 Σεπτεμβρίου 2021) ↩
push, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push (αναφέρεται στις 29 Σεπτεμβρίου 2021) ↩
pop, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop (αναφέρεται στις 29 Σεπτεμβρίου 2021) ↩
shift, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift (αναφέρεται στις 29 Σεπτεμβρίου 2021) ↩
unshift, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift (αναφέρεται στις 29 Σεπτεμβρίου 2021) ↩