Πί

Πίνακες σε JavaScript

49 ασκήσεις

Σχετικά με την έννοια Πίνακες

Στη 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"]

Έλεγχος αν κάτι είναι Array

Επειδή οι πίνακες είναι 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

Μερικές από τις μεθόδους που είναι διαθέσιμες σε κάθε αντικείμενο Array μπορούν να χρησιμοποιηθούν για προσθήκη ή αφαίρεση από τον πίνακα. Ορίστε μερικές από αυτές:

push

Η μέθοδος push() προσθέτει ένα ή περισσότερα στοιχεία στο τέλος ενός πίνακα και επιστρέφει το νέο μήκος του πίνακα.2

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.push('Jill'); // => 5
names;
// => ['Jack', 'Laura', 'Paul', 'Megan', 'Jill']

pop

Η μέθοδος pop() αφαιρεί το τελευταίο στοιχείο από έναν πίνακα και επιστρέφει αυτό το στοιχείο. Αυτή η μέθοδος αλλάζει το μήκος του πίνακα.3

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.pop(); // => 'Megan'
names;
// => ['Jack', 'Laura', 'Paul']

shift

Η μέθοδος shift() αφαιρεί το πρώτο στοιχείο από έναν πίνακα και επιστρέφει αυτό το στοιχείο που αφαιρέθηκε. Αυτή η μέθοδος αλλάζει το μήκος του πίνακα.4

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.shift(); // => 'Jack'
names;
// => ['Laura', 'Paul', 'Megan']

unshift

Η μέθοδος unshift() προσθέτει ένα ή περισσότερα στοιχεία στην αρχή ενός πίνακα και επιστρέφει το νέο μήκος του πίνακα.5

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.unshift('Jill'); // => 5
names;
// => ['Jill', 'Jack', 'Laura', 'Paul', 'Megan']

splice

Η μέθοδος splice() αλλάζει τα περιεχόμενα ενός πίνακα αφαιρώντας ή αντικαθιστώντας υπάρχοντα στοιχεία ή/και προσθέτοντας νέα στοιχεία στη θέση τους. Αυτή η μέθοδος επιστρέφει έναν πίνακα που περιέχει τα διαγραμμένα στοιχεία.1

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(2, 1, 'Jill'); // => ['Paul']
names;
// => ['Jack', 'Laura', 'Jill', 'Megan']

  1. splice, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice (αναφέρεται στις 29 Σεπτεμβρίου 2021) ↩

  2. push, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push (αναφέρεται στις 29 Σεπτεμβρίου 2021) ↩

  3. pop, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop (αναφέρεται στις 29 Σεπτεμβρίου 2021) ↩

  4. shift, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift (αναφέρεται στις 29 Σεπτεμβρίου 2021) ↩

  5. unshift, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift (αναφέρεται στις 29 Σεπτεμβρίου 2021) ↩

Επεξεργασία μέσω GitHub Ο σύνδεσμος ανοίγει σε νέο παράθυρο ή καρτέλα

Μάθε την έννοια Πίνακες