Τι συνδέεται στην κονσόλα κατά τη μετάλλαξη αντικειμένων

Πολλοί προγραμματιστές δεν χρησιμοποιούν ένα πρόγραμμα εντοπισμού σφαλμάτων κατά την ανάπτυξη. Αντ 'αυτού βασίζονται στον παλιό τους φίλο console.log().

Είναι σημαντικό να σημειωθεί ότι η κονσόλα εμφανίζει την τιμή του αντικειμένου που αξιολογείται τη στιγμή της πρώτης επέκτασης στην κονσόλα.

Πρώτον, επιτρέψτε μου να διευκρινίσω τι εννοώ με την επέκταση. Όταν έχουμε console.logένα αντικείμενο (το οποίο καλύπτει επίσης πίνακες), η τιμή του αντικειμένου καταρρέει. Για παράδειγμα:

console.log( "users: ", [{name: "John"}]);

Η κονσόλα του προγράμματος περιήγησης θα έχει την εξής μορφή:

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

Ας δούμε περισσότερα σε αυτό και να δούμε ένα παράδειγμα:

Στη γραμμή 1 αρχίζουμε μια νέα usersμεταβλητή, η οποία είναι ένας πίνακας αντικειμένων.

Στη γραμμή 6 γράφουμε την τιμή της usersμεταβλητής στην κονσόλα.

Στη συνέχεια, επαναλαμβάνουμε users, ελέγξτε αν ο χρήστης είναι έγκυρος και, ανάλογα με την επιστροφή, απενεργοποιούμε τον χρήστη. Για λόγους επιχειρήματος, ας υποθέσουμε ότι οι validateUser()επιστροφές falseκαι ο κώδικας στη γραμμή 10 εκτελείται.

Παρόλο που mapδημιουργεί έναν νέο πίνακα, αλλάζοντας το userαντικείμενο αλλάζει επίσης το userαντικείμενο στον usersπίνακα. Αλλάζει επειδή έχει την ίδια αναφορά. (Για μια καλύτερη εξήγηση του τι συμβαίνει, δείτε αυτό το άρθρο).

Το ερώτημα είναι: τι θα εμφανιστεί στην κονσόλα που καλείται στη γραμμή 6;

Όταν ανοίγουμε αυτό το παράδειγμα στο Chrome και στον Firefox, το αντικείμενο καταρρέει. Στη συνέχεια, κατά την επέκταση, βλέπουμε τις τιμές:

Το Enabled έχει οριστεί σε false, παρόλο που η τιμή ήταν trueτη στιγμή της εξόδου Ο λόγος πίσω από αυτό είναι ότι η τιμή του αντικειμένου αξιολογείται την πρώτη φορά που κάνουμε κλικ για να αναπτύξουμε το αντικείμενο (τεμπέλης ανάγνωσης).

Σημείωση: Το Chrome θα εμφανίσει ένα εικονίδιο πληροφοριών που αναφέρει: "Η παρακάτω τιμή αξιολογήθηκε μόλις τώρα."

Ας ρίξουμε μια ματιά στο Safari:

Hm, ενεργοποιείται έχει οριστεί σε true. Έτσι μπορούμε να δούμε ότι υπάρχουν κάποιες ασυνέπειες μεταξύ των προγραμμάτων περιήγησης. Το Safari θα προσπαθήσει να αναπτύξει αυτόματα το αντικείμενο. Εάν το αντικείμενο / πίνακας είναι πολύ μεγάλο, θα καταρρεύσει και θα συμπεριφέρεται με τον ίδιο τρόπο όπως το Chrome και ο Firefox.

Ένας τρόπος για να το ξεπεράσετε είναι να χρησιμοποιήσετε JSON.stringify(),π.χ.

console.log("users", JSON.stringify(users, null, 2));

που θα παράγει την ακόλουθη έξοδο στην κονσόλα:

Δυστυχώς, με αυτήν την προσέγγιση δεν μπορείτε να αναπτύξετε / συμπτύξετε ένα αντικείμενο. Η τιμή δεν θα μεταβληθεί.

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

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

Σε περίπτωση που επιμείνετε στη μετάλλαξη αντικειμένων, ο Zoran Jambor πρόσθεσε μια άλλη έξυπνη λύση:

console.log("users", ...users);

Έτσι, ο πίνακας χρηστών καταστρέφεται και εμφανίζεται μια λίστα αντικειμένων στην κονσόλα:

Αλλά εδώ πρέπει επίσης να είμαστε προσεκτικοί. Εάν η τιμή του αντικειμένου έχει μεταλλαχθεί, η έξοδος της κονσόλας θα αλλάξει κατά την επέκταση:

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

Στη γραμμή 3 δημιουργούμε πραγματικά έναν βαθύ κλώνο του αντικειμένου, ο οποίος δίνει την ακόλουθη έξοδο:

Τώρα η τιμή του αντικειμένου δεν αλλάζει κατά την επέκταση.

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

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

Ευχαριστούμε που το διαβάσατε. Μοιραστείτε το με οποιονδήποτε μπορεί να το θεωρήσει χρήσιμο και αφήστε σχόλια. (Αυτή είναι η πρώτη μου ιστορία για το Medium, και θα ήθελα να συνεχίσω να γράφω και να γίνω καλύτερα).