Αντικείμενα σε

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

Εξήγηση

Πέρα από τους πρωτογενείς τύπους δεδομένων όπως το number και το string, υπάρχει στη JavaScript ένας ακόμη σημαντικός τύπος δεδομένων, το object. Τα αντικείμενα είναι συλλογές από ζεύγη κλειδιού-τιμής. Έτσι, μπορούν να χρησιμοποιηθούν ως αυτό που σε άλλες γλώσσες συχνά αποκαλείται χάρτης ή λεξικό.

Σε άλλες γλώσσες, όλες οι τιμές σε έναν χάρτη πρέπει συχνά να έχουν τον ίδιο τύπο δεδομένων. Στη JavaScript, περιορίζεται μόνο ο τύπος του κλειδιού: πρέπει να είναι συμβολοσειρά. Οι τιμές μέσα σε ένα αντικείμενο μπορούν να έχουν διαφορετικούς τύπους. Μπορούν να είναι πρωτογενείς τύποι όπως αριθμοί, αλλά και πίνακες, άλλα αντικείμενα ή ακόμη και συναρτήσεις. Αυτό κάνει τα αντικείμενα εξαιρετικά ευέλικτα, ώστε να αποτελούν βασικές οντότητες και για τον αντικειμενοστρεφή προγραμματισμό (OOP) στη JavaScript.

Παρακάτω, θα επικεντρωθούμε στα αντικείμενα ως συλλογές ή χάρτες. Άλλες περιπτώσεις χρήσης των αντικειμένων καλύπτονται σε άλλες έννοιες, δες π.χ. τις Κλάσεις.

Δημιουργία ενός Αντικειμένου

Δημιουργείς ένα literal αντικειμένου χρησιμοποιώντας άγκιστρα. Μπορείς επίσης να συμπεριλάβεις απευθείας κάποιες καταχωρήσεις (ζεύγη κλειδιού-τιμής). Για αυτό, γράψε πρώτα το κλειδί, μετά μια άνω και κάτω τελεία και μετά την τιμή.

const emptyObject = {};

const obj = {
  favoriteNumber: 42,
  greeting: 'Hello World',
  useGreeting: true,
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
  fruits: ['melon', 'papaya'],
  addNumbers: function (a, b) {
    return a + b;
  },
};

Το κόμμα στο τέλος μετά την τελευταία καταχώρηση είναι προαιρετικό στη JavaScript. Μπορείς να διαβάσεις για τα πλεονεκτήματά του εδώ.

Ίσως αναρωτιέσαι γιατί τα κλειδιά δεν είναι μέσα σε εισαγωγικά, παρόλο που υποτίθεται ότι είναι συμβολοσειρές. Αυτή είναι μια συντομευμένη σημειογραφία. Αν το κλειδί ακολουθεί τους κανόνες ονοματοδοσίας για ένα αναγνωριστικό της JavaScript, μπορείς να παραλείψεις τα εισαγωγικά. Για κλειδιά με ειδικούς χαρακτήρες στο όνομα, πρέπει να χρησιμοποιήσεις τη συνήθη σημειογραφία συμβολοσειράς.

const obj = {
  '1keyStartsWithNumber': '...',
  'key/with/slashes': '...',
  'key-with-dashes': '...',
  'key with spaces': '...',
  '#&()[]{}èä樹keyWithSpecialChars': '...',
};

Συχνά θα θέλεις να προσθέσεις υπάρχουσες μεταβλητές όταν δηλώνεις ένα αντικείμενο. Αυτό συχνά οδηγεί σε ζεύγη κλειδιού-τιμής όπως name: name. Η JavaScript έχει μια συντομευμένη σημειογραφία που σου επιτρέπει να γράψεις απλώς name. Υπάρχει επίσης μια συντομευμένη σημειογραφία για τον ορισμό μιας συνάρτησης μέσα σε ένα αντικείμενο. Εκεί μπορείς να παραλείψεις την άνω και κάτω τελεία και τη λέξη-κλειδί function.

const x = 1;
const y = 2;

const obj = {
  x: x,
  y: y,
  calcSum: function (a, b) {
    return a + b;
  },
};

// Can be shortened to ...
const obj = {
  x,
  y,
  calcSum(a, b) {
    return a + b;
  },
};

Αν θέλεις να δημιουργήσεις ένα literal αντικειμένου με όνομα κλειδιού που είναι αποθηκευμένο σε μια μεταβλητή ή προκύπτει από μια έκφραση, πρέπει να βάλεις τη μεταβλητή ή την έκφραση μέσα σε αγκύλες.

const key = 'greeting';

const obj = {
  [key]: 'hello world',
};
console.log(obj);
// => { greeting: 'hello world' }

Ανάκτηση μιας Τιμής

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

const obj = { greeting: 'hello world' };

obj.greeting;
// => hello world

obj['greeting'];
// => hello world

// Bracket notation also works with variables.
const key = 'greeting';
obj[key];
// => hello world

Η χρήση της σημειογραφίας με τελεία ως σύντμηση έχει τον ίδιο περιορισμό με την παράλειψη των εισαγωγικών. Λειτουργεί μόνο αν το κλειδί ακολουθεί τους κανόνες ονοματοδοσίας αναγνωριστικών.

Αν προσπαθήσεις να ανακτήσεις ένα κλειδί που δεν υπάρχει στο αντικείμενο, η JavaScript επιστρέφει undefined. Δες Null και Undefined για περισσότερες λεπτομέρειες σχετικά με αυτό.

Μπορείς να αλυσιδώσεις τα κλειδιά αν θέλεις να ανακτήσεις μια τιμή από ένα εμφωλευμένο αντικείμενο.

const obj = {
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
};

obj.address.city;
// => 'Batticaloa'

obj['address']['city'];
// => 'Batticaloa'

// Notations can also be mixed.
obj.address['city'];
// => 'Batticaloa'

Προσθήκη ή Αλλαγή μιας Τιμής

Μπορείς να προσθέσεις ή να αλλάξεις μια τιμή χρησιμοποιώντας τον τελεστή ανάθεσης =. Και πάλι, υπάρχουν διαθέσιμες η σημειογραφία με τελεία και η σημειογραφία με αγκύλες.

const obj = { greeting: 'hello world' };

obj.greeting = 'Hi there!';
obj['greeting'] = 'Welcome.';

obj.newKey1 = 'new value 1';
obj['new key 2'] = 'new value 2';

const key = 'new key 3';
obj[key] = 'new value 3';

Διαγραφή μιας Καταχώρησης

Μπορείς να διαγράψεις ένα ζεύγος κλειδιού-τιμής από ένα αντικείμενο χρησιμοποιώντας τη λέξη-κλειδί delete.

const obj = {
  key1: 'value1',
  key2: 'value2',
};

delete obj.key1;
delete obj['key2'];

Σημείωσε ότι, παρόλο που για κλειδιά που δεν υπάρχουν επιστρέφεται undefined, το να θέσεις ένα κλειδί σε undefined δεν αφαιρεί την καταχώρηση. Χρησιμοποίησε πάντα delete αντ' αυτού.

Έλεγχος Αν Υπάρχει ένα Κλειδί

Μπορείς να ελέγξεις αν ένα συγκεκριμένο κλειδί υπάρχει σε ένα αντικείμενο με τη μέθοδο hasOwnProperty.

const obj = { greeting: 'hello world' };

obj.hasOwnProperty('greeting');
// => true

obj.hasOwnProperty('age');
// => false

Η hasOwnProperty επιστρέφει false για κληρονομημένα κλειδιά. Αυτή είναι συνήθως η επιθυμητή συμπεριφορά. Αν θέλεις να συμπεριλάβεις και τα κληρονομημένα κλειδιά στον έλεγχο ύπαρξης, μπορείς να χρησιμοποιήσεις τον τελεστή in αντ' αυτής.

Επανάληψη πάνω από ένα Αντικείμενο

Υπάρχει ένας ειδικός for...in βρόχος για να διατρέξεις όλα τα κλειδιά ενός αντικειμένου.

const obj = {
  name: 'Ali',
  age: 65,
};

for (let key in obj) {
  console.log(key, obj[key]);
}
// name Ali
// age 65

Ίσως φαίνεται ότι ο for...in επισκέπτεται πάντα τα κλειδιά με τη σειρά με την οποία εμφανίζονται ή προστέθηκαν στο αντικείμενο (σειρά εισαγωγής). Παρ' όλα αυτά, δεν πρέπει να βασίζεσαι σε αυτό, γιατί υπάρχουν ειδικές περιπτώσεις όπου η σειρά θα διαφέρει από τη σειρά εισαγωγής. Γράφε πάντα τον κώδικά σου σαν η σειρά να ήταν αυθαίρετη. Αν χρειάζεσαι αξιόπιστη σειρά, χρησιμοποίησε ένα Map ή έναν εμφωλευμένο [πίνακα][concept-arrays] αντί για ένα αντικείμενο.

Ο βρόχος for…in έχει μια παγίδα σε περίπτωση που το αντικείμενο έχει κληρονομημένα κλειδιά. Αυτά θα τα επισκέπτεται επίσης ο βρόχος for…in. Συνήθως θέλεις να το αποφύγεις αυτό, οπότε πρέπει να τα παραλείψεις όπως φαίνεται παρακάτω.

for (let key in obj) {
  if (!obj.hasOwnProperty(key)) {
    continue;
  }
  // ...
}

Η JavaScript έχει επίσης έναν βρόχο for...of, για παράδειγμα για να διατρέξεις πίνακες. Είναι σημαντικό να σημειώσεις ότι οι for...in και for...of δεν είναι εναλλάξιμοι, δες την τεκμηρίωση του MDN για λεπτομέρειες σχετικά με αυτό.

Κλειδιά, Τιμές και Καταχωρήσεις

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

const obj = {
  name: 'Ali',
  age: 65,
};

Object.keys(obj);
// => [ 'name', 'age' ]

Object.values(obj);
// => [ 'Ali', 65 ]

Object.entries(obj);
// => [ [ 'name', 'Ali' ], [ 'age', 65 ] ]

Πραγματικά Κενό Αντικείμενο

Ίσως έχεις παρατηρήσει ότι ένα κενό αντικείμενο στη JavaScript δεν είναι εντελώς κενό. Για παράδειγμα, περιέχει τη μέθοδο hasOwnProperty και άλλες μεθόδους όπως τη μέθοδο toString. Συνήθως αυτό δεν προκαλεί κανένα πρόβλημα, αλλά αν ποτέ χρειαστεί να δημιουργήσεις ένα πραγματικά κενό αντικείμενο, χρησιμοποίησε ένα αντικείμενο null που μπορεί να δημιουργηθεί μέσω Object.create(null).