Αντικείμενα JavaScript, αγκύλες και αλγόριθμοι

Μία από τις πιο ισχυρές πτυχές του JavaScript είναι η δυνατότητα δυναμικής αναφοράς σε ιδιότητες αντικειμένων. Σε αυτό το άρθρο θα δούμε πώς λειτουργεί αυτό και ποια πλεονεκτήματα μπορεί να μας δώσει. Θα ρίξουμε μια γρήγορη ματιά σε μερικές από τις δομές δεδομένων που χρησιμοποιούνται στην Πληροφορική. Επιπλέον, θα δούμε κάτι που ονομάζεται Big O notation που χρησιμοποιείται για να περιγράψει την απόδοση ενός αλγορίθμου.

Εισαγωγή αντικειμένων

Ας ξεκινήσουμε δημιουργώντας ένα απλό αντικείμενο που αντιπροσωπεύει ένα αυτοκίνητο. Κάθε αντικείμενο έχει κάτι που ονομάζεται properties. Μια ιδιότητα είναι μια μεταβλητή που ανήκει σε ένα αντικείμενο. Αντικείμενο το αυτοκίνητό μας θα έχει τρεις ιδιότητες: make, modelκαι color.

Ας δούμε πώς θα μπορούσε να μοιάζει:

const car = { make: 'Ford', model: 'Fiesta', color: 'Red'};

Μπορούμε να αναφερθούμε σε μεμονωμένες ιδιότητες ενός αντικειμένου χρησιμοποιώντας σημείωση κουκκίδων. Για παράδειγμα, αν θέλαμε να μάθουμε ποιο είναι το χρώμα του αυτοκινήτου μας, μπορούμε να χρησιμοποιήσουμε σημείωμα με τελείες car.color.

Θα μπορούσαμε ακόμη και να το εξάγουμε χρησιμοποιώντας console.log:

console.log(car.color); //outputs: Red

Ένας άλλος τρόπος για να αναφερθείτε σε μια ιδιοκτησία είναι η χρήση σημείωσης αγκύλης:

console.log(car['color']); //outputs: Red

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

Δηλαδή, αντί να κωδικοποιήσουμε ένα συγκεκριμένο όνομα ιδιότητας, μπορούμε να το καθορίσουμε ως συμβολοσειρά σε μια μεταβλητή:

const propertyName = 'color';const console.log(car[propertyName]); //outputs: Red

Χρησιμοποιώντας δυναμική αναζήτηση με σημείωση τετραγώνου αγκύλη

Ας δούμε ένα παράδειγμα όπου μπορούμε να το χρησιμοποιήσουμε. Ας υποθέσουμε ότι λειτουργούμε ένα εστιατόριο και θέλουμε να έχουμε τις τιμές των αντικειμένων στο μενού μας. Ένας τρόπος για να γίνει αυτό είναι η χρήση if/elseδηλώσεων.

Ας γράψουμε μια συνάρτηση που θα αποδεχτεί ένα όνομα στοιχείου και θα επιστρέψει μια τιμή:

function getPrice(itemName){ if(itemName === 'burger') { return 10; } else if(itemName === 'fries') { return 3; } else if(itemName === 'coleslaw') { return 4; } else if(itemName === 'coke') { return 2; } else if(itemName === 'beer') { return 5; }}

Ενώ η παραπάνω προσέγγιση λειτουργεί, δεν είναι ιδανική. Έχουμε κωδικοποιήσει το μενού στον κώδικα μας. Τώρα, εάν αλλάξει το μενού μας, θα πρέπει να ξαναγράψουμε τον κωδικό μας και να τον επανατοποθετήσουμε. Επιπλέον, θα μπορούσαμε να έχουμε ένα μακρύ μενού και πρέπει να γράψουμε όλο αυτόν τον κώδικα θα ήταν δυσκίνητο.

Μια καλύτερη προσέγγιση θα ήταν ο διαχωρισμός των δεδομένων και της λογικής μας. Τα δεδομένα θα περιέχουν το μενού μας και η λογική θα αναζητήσει τιμές από αυτό το μενού.

Μπορούμε να αντιπροσωπεύσουμε menuως αντικείμενο όπου το όνομα της ιδιότητας, επίσης γνωστό ως κλειδί, αντιστοιχεί σε μια τιμή.

Σε αυτήν την περίπτωση το κλειδί θα είναι το όνομα του αντικειμένου και η τιμή θα είναι η τιμή του αντικειμένου:

const menu = { burger: 10, fries: 3, coleslaw: 4, coke: 2, beer: 5};

Χρησιμοποιώντας τη σημείωση τετραγώνου αγκύλου μπορούμε να δημιουργήσουμε μια συνάρτηση που θα δεχτεί δύο ορίσματα:

  • ένα αντικείμενο μενού
  • μια συμβολοσειρά με όνομα στοιχείου

και επιστρέψτε την τιμή αυτού του αντικειμένου:

const menu = { burger: 10, fries: 3, coleslaw: 4, coke: 2, beer: 5};
function getPrice(itemName, menu){ const itemPrice = menu[itemName]; return itemPrice;}
const priceOfBurger = getPrice('burger', menu);console.log(priceOfBurger); // outputs: 10

Το τακτοποιημένο πράγμα για αυτήν την προσέγγιση είναι ότι έχουμε χωρίσει τα δεδομένα μας από τη λογική μας. Σε αυτό το παράδειγμα, τα δεδομένα βρίσκονται στον κώδικα μας, αλλά θα μπορούσαν εξίσου εύκολα να προέρχονται από μια βάση δεδομένων ή API. Δεν συνδυάζεται πλέον στενά με τη λογική αναζήτησης που μετατρέπει το όνομα του προϊόντος σε τιμή προϊόντος.

Υποδομές και αλγόριθμοι

Ένας χάρτης με όρους Πληροφορικής είναι μια δομή δεδομένων που είναι μια συλλογή ζευγών κλειδιών / τιμών όπου κάθε κλειδί αντιστοιχεί σε μια αντίστοιχη τιμή. Μπορούμε να το χρησιμοποιήσουμε για να δούμε μια τιμή που αντιστοιχεί σε ένα συγκεκριμένο κλειδί. Αυτό κάνουμε στο προηγούμενο παράδειγμα. Έχουμε ένα κλειδί που είναι ένα όνομα στοιχείου και μπορούμε να αναζητήσουμε την αντίστοιχη τιμή αυτού του αντικειμένου χρησιμοποιώντας το αντικείμενο μενού. Χρησιμοποιούμε ένα αντικείμενο για να εφαρμόσουμε μια δομή δεδομένων χάρτη.

Ας δούμε ένα παράδειγμα γιατί μπορεί να θέλουμε να χρησιμοποιήσουμε έναν χάρτη. Ας πούμε ότι λειτουργούμε ένα κατάστημα βιβλίων και έχουμε μια λίστα βιβλίων. Κάθε βιβλίο έχει έναν μοναδικό αναγνωριστικό που ονομάζεται International Standard Book Number (ISBN), ο οποίος είναι ένας 13ψήφιος αριθμός. Αποθηκεύουμε τα βιβλία μας σε μια σειρά και θέλουμε να τα αναζητήσουμε χρησιμοποιώντας το ISBN.

Ένας τρόπος για να το κάνετε αυτό είναι να κάνετε looping στον πίνακα, να ελέγξετε την τιμή ISBN κάθε βιβλίου και αν ταιριάζει με την επιστροφή του:

const books = [{ isbn: '978-0099540946', author: 'Mikhail Bulgakov', title: 'Master and Margarita'}, { isbn: '978-0596517748', author: 'Douglas Crockford', title: 'JavaScript: The Good Parts'}, { isbn: '978-1593275846', author: 'Marijn Haverbeke', title: 'Eloquent JavaScript'}];
function getBookByIsbn(isbn, books){ for(let i = 0; i < books.length; i++){ if(books[i].isbn === isbn) { return books[i]; } }}
const myBook = getBookByIsbn('978-1593275846', books);

Αυτό λειτουργεί καλά σε αυτό το παράδειγμα, καθώς έχουμε μόνο τρία βιβλία (είναι ένα μικρό κατάστημα βιβλίων). Ωστόσο, αν ήμασταν το Amazon, η επανάληψη περισσότερων από εκατομμυρίων βιβλίων θα μπορούσε να είναι πολύ αργή και υπολογιστικά ακριβή.

Η σημείωση Big O χρησιμοποιείται στην Πληροφορική για να περιγράψει την απόδοση ενός αλγορίθμου. Για παράδειγμα, εάν n είναι ο αριθμός των βιβλίων στη συλλογή μας, το κόστος χρήσης επανάληψης για αναζήτηση ενός βιβλίου στη χειρότερη περίπτωση (το βιβλίο που αναζητούμε είναι το τελευταίο στη λίστα) θα είναι O (n) . Αυτό σημαίνει ότι εάν ο αριθμός των βιβλίων στη συλλογή μας διπλασιαστεί, το κόστος εύρεσης ενός βιβλίου με επανάληψη θα διπλασιαστεί επίσης.

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

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

Το κλειδί θα είναι το ISBN και η τιμή θα είναι το αντίστοιχο αντικείμενο βιβλίου:

const books = { '978-0099540946':{ isbn: '978-0099540946', author: 'Mikhail Bulgakov', title: 'Master and Margarita' }, '978-0596517748': { isbn: '978-0596517748', author: 'Douglas Crockford', title: 'JavaScript: The Good Parts' }, '978-1593275846': { isbn: '978-1593275846', author: 'Marijn Haverbeke', title: 'Eloquent JavaScript' }};
function getBookByIsbn(isbn, books){ return books[isbn];}
const myBook = getBookByIsbn('978-1593275846', books);

Αντί να χρησιμοποιήσουμε την επανάληψη, μπορούμε τώρα να χρησιμοποιήσουμε μια απλή αναζήτηση χάρτη από το ISBN για να λάβουμε την αξία μας. Δεν χρειάζεται πλέον να ελέγξουμε την τιμή ISBN για κάθε αντικείμενο. Παίρνουμε την τιμή απευθείας από τον χάρτη χρησιμοποιώντας το κλειδί.

Όσον αφορά την απόδοση, μια αναζήτηση χάρτη θα προσφέρει τεράστια βελτίωση σε σχέση με την επανάληψη. Αυτό συμβαίνει επειδή η αναζήτηση χάρτη έχει σταθερό κόστος όσον αφορά τον υπολογισμό. Αυτό μπορεί να γραφτεί χρησιμοποιώντας τη σημείωση Big O ως O (1) . Δεν έχει σημασία αν έχουμε τρία ή τρία εκατομμύρια βιβλία, μπορούμε να πάρουμε το βιβλίο που θέλουμε εξίσου γρήγορα κάνοντας αναζήτηση χάρτη χρησιμοποιώντας το κλειδί ISBN.

ανακεφαλαιώσουμε

  • We have seen we can access the values of object properties using dot notation and square bracket notation
  • We learned how we can dynamically look up values of property by using variables with square bracket notation
  • We have also learned that a map datastructure maps keys to values. We can use keys to directly look up values in a map which we implement using an object.
  • We had a first glance at how algorithm performance is described using Big O notation. In addition, we saw how we can improve the performance of a search by converting an array of objects into a map and using direct lookup rather than iteration.

Want to test your new found skills? Try the Crash Override exercise on Codewars.

Θέλετε να μάθετε πώς να γράφετε εφαρμογές Ιστού χρησιμοποιώντας JavaScript; Τρέχω το Constructor Labs, ένα bootcamp κωδικοποίησης JavaScript 12 εβδομάδων στο Λονδίνο. Οι τεχνολογίες που διδάσκονται περιλαμβάνουν HMTL , CSS , JavaScript , React , Redux , Node και Postgres . Όλα όσα χρειάζεστε για να δημιουργήσετε μια ολόκληρη εφαρμογή ιστού από το μηδέν και να αποκτήσετε την πρώτη σας δουλειά στον κλάδο. Τα τέλη είναι 3.000 £ και η επόμενη κοόρτη ξεκινά στις 29 Μαΐου. Οι αιτήσεις είναι ανοιχτές τώρα.