10 νέες δυνατότητες JavaScript στο ES2020 που πρέπει να γνωρίζετε

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

# 1: BigInt

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

Προς το παρόν, ο μέγιστος αριθμός που μπορείτε να αποθηκεύσετε ως ακέραιος αριθμός στο JavaScript είναι pow(2, 53) - 1. Αλλά το BigInt σας επιτρέπει να προχωρήσετε ακόμη περισσότερο.  

Ωστόσο, πρέπει να έχετε ένα nσυνημμένο στο τέλος του αριθμού, όπως μπορείτε να δείτε παραπάνω. Αυτό nσημαίνει ότι πρόκειται για BigInt και πρέπει να αντιμετωπίζεται διαφορετικά από τη μηχανή JavaScript (από τον κινητήρα v8 ή από οποιονδήποτε κινητήρα χρησιμοποιεί).

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

# 2: Δυναμική εισαγωγή

Οι δυναμικές εισαγωγές σε JavaScript σας δίνουν τη δυνατότητα να εισαγάγετε αρχεία JS δυναμικά ως ενότητες στην εφαρμογή σας εγγενώς. Αυτό ακριβώς συμβαίνει με το Webpack και το Babel αυτή τη στιγμή.

Αυτή η λειτουργία θα σας βοηθήσει να αποστείλετε κωδικό κατά παραγγελία, γνωστότερο ως διαχωρισμός κώδικα, χωρίς την επιβάρυνση του πακέτου ιστοσελίδων ή άλλων πακέτων μονάδων. Μπορείτε επίσης να φορτώσετε υπό όρους κωδικό σε ένα μπλοκ if-else αν θέλετε.

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

# 3: Μηδενική Συγκέντρωση

Η μηδενική συγχώνευση προσθέτει τη δυνατότητα ελέγχου των nullishτιμών αντί των falseyτιμών. Ποια είναι η διαφορά μεταξύ nullishκαι falseyαξιών, μπορείτε να ρωτήσετε;

Σε JavaScript, πολλοί τιμές falsey, όπως κενά χορδές, ο αριθμός 0, undefined, null, false, NaN, και ούτω καθεξής.

Ωστόσο, πολλές φορές μπορεί να θέλετε να ελέγξετε αν μια μεταβλητή είναι μηδενική - δηλαδή εάν είναι είτε undefinedείτε null, όπως όταν είναι εντάξει για μια μεταβλητή να έχει μια κενή συμβολοσειρά ή ακόμη και μια λανθασμένη τιμή.

Σε αυτήν την περίπτωση, θα χρησιμοποιήσετε το νέο μηδενικό χειριστή συγχώνευσης, ??

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

# 4: Προαιρετική αλυσίδα

Η προαιρετική σύνταξη αλυσίδων σάς επιτρέπει να έχετε πρόσβαση σε ιδιότητες ένθετου αντικειμένου χωρίς να ανησυχείτε εάν η ιδιότητα υπάρχει ή όχι. Εάν υπάρχει, υπέροχο! Εάν όχι, undefinedθα επιστραφεί.

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

# 5: Promise.allSettled

Η Promise.allSettledμέθοδος δέχεται μια σειρά από υποσχέσεις και επιλύει μόνο όταν διευθετούνται όλες - είτε επιλύονται είτε απορρίπτονται.

Αυτό δεν ήταν διαθέσιμο εγγενώς στο παρελθόν, παρόλο που κάποιες στενές υλοποιήσεις ήθελαν raceκαι allήταν διαθέσιμες. Αυτό φέρνει "Απλώς εκτελέστε όλες τις υποσχέσεις - δεν με νοιάζει για τα αποτελέσματα" εγγενώς στο JavaScript.

# 6: String # matchΌλα

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

# 7: globalThis

Εάν γράψατε έναν κώδικα JS πολλαπλών πλατφορμών που θα μπορούσε να εκτελείται στο Node, στο περιβάλλον του προγράμματος περιήγησης και επίσης στους εργαζόμενους στο web, θα δυσκολευόσασταν να καταλάβετε το παγκόσμιο αντικείμενο.

Αυτό συμβαίνει επειδή είναι windowγια προγράμματα περιήγησης, globalγια κόμβους και selfγια εργαζόμενους στο Διαδίκτυο. Εάν υπάρχουν περισσότεροι χρόνοι εκτέλεσης, το καθολικό αντικείμενο θα είναι διαφορετικό και για αυτούς.

Έτσι θα έπρεπε να έχετε τη δική σας εφαρμογή για τον εντοπισμό του χρόνου εκτέλεσης και στη συνέχεια να χρησιμοποιήσετε το σωστό καθολικό - δηλαδή, μέχρι τώρα.

Το ES2020 μας φέρνει globalThisπου αναφέρεται πάντα στο καθολικό αντικείμενο, όπου κι αν εκτελείτε τον κωδικό σας:

# 8: Εξαγωγές χώρου ονομάτων μονάδων

Σε λειτουργικές μονάδες JavaScript, ήταν ήδη δυνατή η χρήση της ακόλουθης σύνταξης:

import * as utils from './utils.mjs'

Ωστόσο, δεν υπήρχε συμμετρική exportσύνταξη, μέχρι τώρα:

export * as utils from './utils.mjs'

Αυτό ισοδυναμεί με τα ακόλουθα:

import * as utils from './utils.mjs' export { utils }

# 9: Καλά καθορισμένη για παραγγελία

Η προδιαγραφή ECMA δεν διευκρίνισε με ποια σειρά for (x in y)  πρέπει να εκτελεστεί. Παρόλο που τα προγράμματα περιήγησης εφάρμοσαν μια συνεπή παραγγελία από μόνα τους πριν, αυτό τυποποιήθηκε επίσημα στο ES2020.

# 10: import.meta

Το import.metaαντικείμενο δημιουργήθηκε από την εφαρμογή ECMAScript, με ένα nullπρωτότυπο.

Σκεφτείτε μια μονάδα, module.js:

Μπορείτε να αποκτήσετε πρόσβαση σε μετα-πληροφορίες σχετικά με τη λειτουργική μονάδα χρησιμοποιώντας το import.metaαντικείμενο:

console.log(import.meta); // { url: "file:///home/user/module.js" }

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

συμπέρασμα

Λατρεύω τη συνέπεια και την ταχύτητα με την οποία η κοινότητα JavaScript εξελίχθηκε και εξελίσσεται. Είναι εκπληκτικό και πραγματικά υπέροχο να βλέπεις πώς το JavaScript προήλθε από μια γλώσσα που έφτιαχνε, 10 χρόνια μετά, σε μια από τις ισχυρότερες, πιο ευέλικτες και ευέλικτες γλώσσες όλων των εποχών σήμερα.

Θέλετε να μάθετε JavaScript και άλλες γλώσσες προγραμματισμού με έναν εντελώς νέο τρόπο; Προχωρήστε σε μια νέα πλατφόρμα για προγραμματιστές που εργάζομαι για να τη δοκιμάσω σήμερα!

Ποιο είναι το αγαπημένο σας χαρακτηριστικό του ES2020; Πείτε μου γι 'αυτό με tweet και σύνδεση μαζί μου στο Twitter και το Instagram!

Αυτή είναι μια ανάρτηση ιστολογίου που αποτελείται από το βίντεό μου και έχει το ίδιο θέμα. Θα σήμαινε τον κόσμο για μένα αν μπορούσατε να του δείξετε κάποια αγάπη!