Πώς να μεταφέρετε τα αντικείμενα στο JavaScript

Φωτογραφία από τον Etienne Girardet στο Unsplash

Από καιρό σε μια στιγμή, ίσως χρειαστεί να βρεθείτε μέσα από αντικείμενα στο JavaScript. Ο μόνος τρόπος για να το κάνετε πριν το ES6 ήταν με ένα για ... σε βρόχο.

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

για (var property in object) {
  αν (object.hasOwnProperty (ιδιότητα)) {
    // Κάνετε τα πράγματα εδώ
  }}
}}

Δεν χρειάζεται πλέον να βασίζεστε για ... και τώρα έχει HasOwnProperty. Υπάρχει καλύτερος τρόπος.

Ένας καλύτερος τρόπος για να βρούμε τα αντικείμενα

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

Μπορείτε να μετατρέψετε ένα αντικείμενο σε έναν πίνακα με τρεις μεθόδους:

  1. Object.keys
  2. Τιμές αντικειμένου
  3. Object.entries

Object.keys

Το Object.keys δημιουργεί έναν πίνακα που περιέχει τις ιδιότητες ενός αντικειμένου. Ακολουθεί ένα παράδειγμα.

const φρούτα = {
  μήλο: 28,
  πορτοκαλί: 17,
  αχλάδι: 54,
}}
const κλειδιά = Object.keys (φρούτα)
console.log (κλειδιά) // [μήλο, πορτοκάλι, αχλάδι]

Τιμές αντικειμένου

Το Object.values ​​δημιουργεί έναν πίνακα που περιέχει τις τιμές κάθε ιδιότητας σε ένα αντικείμενο. Ακολουθεί ένα παράδειγμα:

const φρούτα = {
  μήλο: 28,
  πορτοκαλί: 17,
  αχλάδι: 54,
}}
const τιμές = Object.values ​​(φρούτα)
console.log (τιμές) // [28, 17, 54]

Object.entries

Το Object.entries δημιουργεί μια συστοιχία συστοιχιών. Κάθε εσωτερική διάταξη έχει δύο στοιχεία. Το πρώτο στοιχείο είναι η ιδιοκτησία. το δεύτερο στοιχείο είναι η τιμή.

Ακολουθεί ένα παράδειγμα:

const φρούτα = {
  μήλο: 28,
  πορτοκαλί: 17,
  αχλάδι: 54,
}}
const entries = Object.entries (φρούτα)
console.log (καταχωρήσεις)
// [
// [μήλο, 28],
// [πορτοκαλί, 17],
// [αχλάδι, 54]
//]

Το αγαπημένο μου από τα τρία είναι Object.entries, επειδή παίρνετε και τις δύο τιμές κλειδιού και ιδιοκτησίας.

Βρόχος μέσω του πίνακα

Μόλις μετατρέψετε το αντικείμενο σε πίνακα με Object.keys, Object.values ​​ή Object.entries, μπορείτε να το βρούσετε σαν να ήταν κανονικός πίνακας.

// Ομαλοποίηση μέσω συστοιχιών που δημιουργούνται από το Object.keys
const κλειδιά = Object.keys (φρούτα)
για το (κλειδί const των κλειδιών) {
  console.log (κλειδιά)
}}
// Αποτελέσματα:
// μήλο
// πορτοκαλί
// αχλάδι

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

για (const [fruit, count] των καταχωρήσεων) {
  console.log (`Υπάρχουν $ {count} $ {fruit} s`)
}}
// Αποτέλεσμα
// Υπάρχουν 28 μήλα
// Υπάρχουν 17 πορτοκάλια
// Υπάρχουν 54 αχλάδια

Τυλίγοντας

Ο καλύτερος τρόπος για να βγείτε μέσω αντικειμένων είναι πρώτα να το μετατρέψετε σε μια συστοιχία με μία από αυτές τις τρεις μεθόδους.

  1. Object.keys
  2. Τιμές αντικειμένου
  3. Object.entries

Στη συνέχεια, βγάζετε τα αποτελέσματα σαν κανονικός πίνακας.

Εάν αυτό το μάθημα σας βοήθησε, μπορείτε να απολαύσετε τη Μάθηση JavaScript, όπου θα μάθετε πώς μπορείτε να δημιουργήσετε οτιδήποτε θέλετε από το μηδέν. Η εγγραφή για το Learn JavaScript ανοίγει τον Ιούλιο του 2018 (πολύ σύντομα!).

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

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