Ακολουθούν οι νέες ενσωματωμένες μέθοδοι και λειτουργίες σε JavaScript

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

Οι νέες μέθοδοι αντικειμένων

Το αντικείμενο είναι αυτό που κάνει τη JavaScript μια ισχυρή γλώσσα προγραμματισμού. Τα αντικείμενα σας επιτρέπουν να ομαδοποιήσετε διαφορετικούς τύπους δεδομένων. Εάν θέλετε να μάθετε οποιοδήποτε νέο πλαίσιο JavaScript όπως το React, το Vue ή το Angular, πρέπει να ξέρετε πώς να χρησιμοποιείτε αντικείμενα και τις μεθόδους του. Αυτά τα πλαίσια χρησιμοποιούν αντικείμενα για να λάβουν και να χειριστούν την είσοδο του χρήστη. Οι νέες εκδόσεις JavaScript φέρνουν νέες μεθόδους σε αντικείμενα που τα κάνουν πιο διασκεδαστικά. Ακολουθούν οι νέες μέθοδοι αντικειμένων:

αντικείμενο.assign ()

Η μέθοδος Object.assign () έχει πολλές εργασίες. Μπορεί να αντιγράψει ένα αντικείμενο, να κλωνοποιήσει από άλλο αντικείμενο ή να συνενώσει δύο ή περισσότερα αντικείμενα.

  • αντιγράψτε τις τιμές από άλλο αντικείμενο:
  • Κλωνοποιήστε ένα αντικείμενο σε ένα νέο αντικείμενο
  • Επίσης, μπορείτε να συγχωνεύσετε διπλές ιδιότητες με Object.assign () ορίζοντας δύο κενά αγκύλες ως το πρώτο όρισμα:

Object.entries ()

Η μέθοδος Object.entries () επιστρέφει τα κλειδιά και τις τιμές του αντικειμένου ως Array.

Object.getOwnPropertyDescriptors ()

Το Object.getOwnPropertyDescriptors μας επιτρέπει να λάβουμε τον περιγραφέα ιδιοτήτων για ένα αντικείμενο.

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

Οι νέες μέθοδοι Array

Οι νέες εκδόσεις JavaScript παρείχαν νέες μεθόδους για το Arrays. Ακολουθούν οι νέες μέθοδοι πίνακα:

Array. Περιλαμβάνει ()

Το Array.includes () μας επιτρέπει να ελέγξουμε εάν υπάρχει μια ιδιότητα σε έναν πίνακα. Μπορείτε να δείτε τη διαφορά μεταξύ του παλαιού κώδικα και της νέας σύνταξης (ES6). Η νέα μέθοδος είναι σύντομη και πιο ευανάγνωστη.

Array.find ()

Το Array.find () μας βοηθά να βρούμε ένα στοιχείο σε ένα Array. Παίρνει μια συνάρτηση επανάκλησης ως όρισμα. Η συνάρτηση επιστροφής παρέχει περισσότερες επιλογές για την εύρεση και εξαγωγή σύνθετων δεδομένων.

Εάν η ιδιότητα που αναζητούμε υπάρχει, επιστρέφει την τιμή που βρέθηκε. Διαφορετικά, επιστρέφει απροσδιόριστο.

Array.findIndex ()

Το Array.findIndex () επιστρέφει το ευρετήριο του στοιχείου που βρέθηκε αντί της τιμής.

Array.values ​​()

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

Array.entries ()

Το Array.entries () επιστρέφει τόσο το κλειδί όσο και την τιμή και σε μορφή Array.

Array. Από ()

Το Array.from () κυκλοφόρησε στην έκδοση ES6. Μπορεί να κάνει πολλά πράγματα εκτελώντας μια λειτουργία χάρτη () στα δεδομένα. Μπορεί να μετατρέψει μια συμβολοσειρά σε μια σειρά ή ακόμη και να δημιουργήσει μια νέα συστοιχία από τα δεδομένα.

Array.keys ()

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

Οι νέες μέθοδοι String

Οι νέες εκδόσεις JavaScript παρείχαν νέες μεθόδους String. Ακολουθούν οι νέες μέθοδοι String:

String.repeat ()

Η μέθοδος String.repeat () σάς επιτρέπει να επαναλάβετε μια συμβολοσειρά.

String. Περιλαμβάνει ()

Το String.includes () λειτουργεί όπως το Array.includes (). Επιστρέφει ένα Boolean εάν η τιμή που έχει εισαχθεί υπάρχει.

Οι νέες μέθοδοι αριθμού

Οι νέες εκδόσεις JavaScript παρείχαν νέες μεθόδους Number. Ακολουθούν οι νέες μέθοδοι αριθμού:

Number.isNaN ()

Αυτή η μέθοδος κυκλοφόρησε στην ενημερωμένη έκδοση ES6. Ελέγχει την τιμή αριθμού που μεταβιβάστηκε και επιστρέφει αληθής εάν η τιμή είναι NaN. Διαφορετικά, επιστρέφει ψευδής. Αυτή η μέθοδος εμπνέεται από την κλασική συνάρτηση isNAN () σε JavaScript.

Number.isInteger ()

Όπως και η προηγούμενη μέθοδος, το Number.isInteger () ελέγχει αν η τιμή που πέρασε είναι ακέραιος ή όχι. Θα επιστρέψει αληθές εάν η τιμή είναι ακέραιος και ψευδής εάν δεν είναι.

Number.isSafeInteger ()

Ίσως θελήσετε πάντα να επικυρώσετε την είσοδο των χρηστών για να βεβαιωθείτε ότι είναι αριθμός. Number.isSafeInteger () ελέγχει εάν ο αριθμός είναι ασφαλής αριθμός.

Μάθετε περισσότερα εδώ

Number.isFinite ()

Number.isFinite () ελέγχει εάν η τιμή που μεταβιβάζεται είναι πεπερασμένος αριθμός ή όχι.

Υποστήριξη προγράμματος περιήγησης

Οι νέες μέθοδοι Number υποστηρίζονται σχεδόν από το μεγαλύτερο πρόγραμμα περιήγησης εκτός από τα Opera Mini και IE-11. Η υποστήριξη εμφανίζεται στην παρακάτω εικόνα:

Νέα ειδικά αντικείμενα

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

Αντικείμενο διακομιστή μεσολάβησης ()

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

  • επικύρωση δεδομένων χρήστη
  • διόρθωση δεδομένων
  • αναζήτηση ακινήτων
  • ΑΝΑΘΕΣΗ ΕΡΓΑΣΙΑΣ
  • απαρίθμηση
  • επίκληση συνάρτησης

Δείτε άλλες χρήσεις του Proxy και των μεθόδων του εδώ.

Για την κατανόηση του πληρεξούσιου, θα γράψουμε δύο παραδείγματα.

Παράδειγμα 1:

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

Όπως βλέπετε στο παραπάνω παράδειγμα επιστρέφει το userInfo.favCar undefined. Τι γίνεται αν θέλουμε να χειριστούμε αυτό το μήνυμα σφάλματος; Εάν θέλουμε να δημιουργήσουμε μια προσαρμοσμένη συμπεριφορά για το σφάλμα, για παράδειγμα, εμφανίζοντας ένα άλλο μήνυμα αντί για μη καθορισμένο, μπορούμε να χρησιμοποιήσουμε τον διακομιστή μεσολάβησης σε αυτήν την περίπτωση.

Ορίσαμε έναν νέο διακομιστή μεσολάβησης και του δώσαμε δύο επιχειρήματα - το αντικείμενο και τον χειριστή. Ο χειριστής εκτελεί κάποιο κωδικό επικύρωσης και ελέγχει εάν η ιδιότητα υπάρχει στο αντικείμενο. Επιστρέφει την ιδιότητα εάν υπάρχει. Διαφορετικά, επιστρέφει το μήνυμα που ορίσαμε και αυτό ονομάζεται αναζήτηση ιδιότητας.

Παράδειγμα 2:

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

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

Υποστήριξη προγράμματος περιήγησης

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

Ορισμός αντικειμένου ()

Το αντικείμενο Set είναι μια νέα δυνατότητα στο JavaScript. Μας επιτρέπει να αποθηκεύουμε μοναδικές τιμές. Διαθέτει πολλές μεθόδους που μπορείτε να παίξετε. Η μέθοδος Object.add σάς επιτρέπει να προσθέσετε μια νέα ιδιότητα στο αντικείμενο. Το Object.delete αφαιρεί μια ιδιότητα από το αντικείμενο. Το Object.clear διαγράφει όλες τις ιδιότητες από το αντικείμενο. Το παρακάτω παράδειγμα εξηγεί τις μεθόδους αντικειμένου.

Μάθετε περισσότερα σχετικά με το αντικείμενο Set () εδώ.

Τυλίγοντας

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

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

Μπορείτε να με βρείτε στο Twitter και στο Instagram

Προηγούμενα άρθρα:

  • JavaScript ES6 - Γράψτε λιγότερα, κάντε περισσότερα
  • Μάθετε το Bootstrap 4 σε 30 λεπτά δημιουργώντας έναν ιστότοπο προσγείωσης
  • Angular 6 και είναι νέα χαρακτηριστικά, όλα εξηγούνται σε τρία λεπτά
  • Πώς να χρησιμοποιήσετε τη δρομολόγηση στο Vue.js για να δημιουργήσετε μια καλύτερη εμπειρία χρήστη
  • Ακολουθούν οι πιο δημοφιλείς τρόποι υποβολής αιτήματος HTTP σε JavaScript
  • Μάθετε πώς μπορείτε να δημιουργήσετε την πρώτη σας γωνιακή εφαρμογή σε 20 λεπτά