ECMAScript 6 - 10 τρομερά νέα χαρακτηριστικά

Γνωρίζατε ότι το JavaScript (μαζί με το JScript και το ActionScript) είναι μια εφαρμογή μιας γενικής χρήσης προγράμματος-πελάτη-γλώσσα γλώσσα scripting που ονομάζεται ECMAScript; Για να καταστήσουμε αυτόν τον δυσάρεστο ορισμό λίγο πιο ελκυστικό, μπορούμε να πούμε ότι το ECMAScript (ή επίσημα το ECMA-262) είναι το πρότυπο που καθορίζει τον τρόπο με τον οποίο χρησιμοποιούμε το JavaScript και τι μπορούμε να επιτύχουμε Με αυτό.

Η τελευταία έκδοση της γλώσσας ECMAScript 2015 (ή ES6) είναι ίσως η πιο σημαντική ενημέρωση από την πρώτη έκδοση του 1997. Ο κύριος στόχος της τελευταίας έκδοσης ήταν να προσφέρει καλύτερη υποστήριξη για τη δημιουργία μεγαλύτερων εφαρμογών και βιβλιοθηκών. Αυτό σημαίνει μια πιο ώριμη σύνταξη, νέες συντομεύσεις για ευκολότερη κωδικοποίηση, καθώς και νέες μέθοδοι, λέξεις-κλειδιά, τύποι δεδομένων και πολλές άλλες βελτιώσεις.

Η τεκμηρίωση ES6 είναι εκτεταμένη, αν θέλετε να διαβάσετε πολλά, μπορείτε να κάνετε λήψη όλων των προδιαγραφών από την ιστοσελίδα της ECMA International. Σε αυτή τη θέση θα ρίξουμε μια ματιά σε 10 χειροκίνητα χαρακτηριστικά, παρόλο που το ES6 έχει πολλά περισσότερα να προσφέρει. Αν θέλετε να πειραματιστείτε με αυτό, το ES6 Fiddle είναι ένα εξαιρετικό μέρος για να το κάνετε αυτό και μπορείτε επίσης να βρείτε κάποια δείγματα αποσπασμάτων κώδικα εκεί.

Υποστήριξη για το ECMAScript 6

Οι προμηθευτές προγράμματος περιήγησης έχουν προσθέσει σταδιακά υποστήριξη για τις λειτουργίες του ECMAScript 6. Μπορείτε να βρείτε έναν δροσερό πίνακα συμβατότητας εδώ για την υποστήριξη του προγράμματος περιήγησης και του μεταγλωττιστή για τις νέες λειτουργίες.

Εάν ενδιαφέρεστε για την υποστήριξη ES6 στο Node.js, δείτε τα έγγραφα εδώ.

Παρόλο που δεν υποστηρίζονται όλες οι λειτουργίες, μπορούμε να χρησιμοποιήσουμε transpilers όπως η Babel για να μεταφέρουμε τον κώδικα ES6 στον ES5. Υπάρχει ένα δροσερό plugin Grunt για τη Babel, πολλά εκπληκτικά plug-ins ES6 για το Grunt και ένα καταπληκτικό plugin Gulp-Babel εκεί έξω, έτσι ευτυχώς έχουμε πολλές επιλογές.

Με αυτόν τον τρόπο μπορούμε να αρχίσουμε να χρησιμοποιούμε την ενισχυμένη σύνταξη και τις δυνατότητες, ενώ δεν χρειάζεται να ανησυχούμε για θέματα συμβατότητας. Τώρα ας δούμε τα χαρακτηριστικά.

1. Νέα αφήνω Λέξη κλειδί

Το ES6 εισάγει το νέο αφήνω λέξη-κλειδί που μας επιτρέπει να δηλώσουμε τοπικές μεταβλητές στο πεδίο ενός μπλοκ, όπως μια δήλωση, μια έκφραση ή μια (n εσωτερική) συνάρτηση. Για παράδειγμα, μπορούμε να δηλώσουμε α Για βρόχο με τον ακόλουθο τρόπο, στη συνέχεια να επαναχρησιμοποιηθεί το ίδιο όνομα μεταβλητής (δεδομένου ότι το πεδίο εφαρμογής του περιορίζεται στο Για βρόχο) μέσα στο επόμενο αν δήλωση:

 για (ας i = 0, i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Επαναχρησιμοποιούμε "i" ας i = x * y

Χρησιμοποιώντας το αφήνω λέξη-κλειδί οδηγεί σε έναν πιο καθαρό και πιο χρησιμοποιήσιμο κώδικα. Η διαφορά μεταξύ αφήνω και var είναι στο πεδίο εφαρμογής, για παράδειγμα μια τοπική μεταβλητή που ορίζεται από το var η λέξη-κλειδί μπορεί να χρησιμοποιηθεί σε ολόκληρη τη λειτουργία εγκλεισμού, ενώ οι μεταβλητές που ορίζονται από το αφήνω δουλεύουν μόνο στο δικό τους (υπο) μπλοκ. Αφήνω μπορεί επίσης να χρησιμοποιηθεί σε παγκόσμιο επίπεδο, στην περίπτωση αυτή συμπεριφέρεται με τον ίδιο τρόπο var. Φυσικά, στο ES6 μπορούμε ακόμα να χρησιμοποιήσουμε var αν θέλουμε.

2. Νέα const Λέξη κλειδί

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

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Σιωπηλό σφάλμα, καθώς δεν μπορούμε να επαναπροσδιορίσουμε μια νέα τιμή σε μια σταθερά

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

 const MY_CONSTANT = myProperty: 6. console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]. console.log (OTHER_CONSTANT [0]). // 12 OTHER_CONSTANT [0] = 22. console.log (OTHER_CONSTANT [0]). // 22

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

 MY_CONSTANT = newProperty: 18. console.log (MY_CONSTANT.newProperty); // λάθος

3. Λειτουργίες βέλους

Το ECMAScript 6 διευκολύνει τον τρόπο με τον οποίο γράφουμε ανώνυμες λειτουργίες, καθώς μπορούμε να το παραλείψουμε εντελώς λειτουργία λέξη-κλειδί. Χρειάζεται μόνο να χρησιμοποιήσουμε τη νέα σύνταξη για βέλη, που ονομάζεται μετά από το σημάδι βέλους = (βέλος λίπους), που μας παρέχει μια μεγάλη συντόμευση.

 // 1. Μια παράμετρος στο ES6 let sum = (a, b) => a + b; // στο ES5 var sum = συνάρτηση (a, b) επιστροφή a + b; , // 2. Χωρίς παραμέτρους στο ES6 let randomNum = () => Math.random (); // σε ES5 var randomNum = λειτουργία () επιστροφή Math.random (); , // 3. Χωρίς επιστροφή στο ES6 αφήστε το μήνυμα = (name) => alert ("Hi" + όνομα + "!"); // σε ES5 var μήνυμα = λειτουργία (yourName) alert ("Hi" + yourName + "!"); ,

Υπάρχει μια σημαντική διαφορά μεταξύ των κανονικών λειτουργιών και των λειτουργιών βέλους, δηλαδή οι λειτουργίες βέλους δεν λαμβάνουν α Αυτό αξία αυτόματα όπως λειτουργίες που ορίζονται με το λειτουργία λέξη κλειδί κάνει. Λειτουργίες βέλους δεσμεύουν λεξικά ο Αυτό αξία στο τρέχον πεδίο εφαρμογής. Αυτό σημαίνει ότι μπορούμε εύκολα να επαναχρησιμοποιήσουμε το Αυτό λέξη-κλειδί σε μια εσωτερική λειτουργία. Στο ES5 είναι δυνατή μόνο με την ακόλουθη hack:

 // ES5 Προσπαθήστε να χρησιμοποιήσετε τη λέξη "αυτή" σε μια εσωτερική συνάρτηση ... addAll: λειτουργία addAll (κομμάτια) var self = this; _.each (κομμάτια, λειτουργία (κομμάτι) self.add (κομμάτι)?); , ... // ES6 η ίδια εσωτερική λειτουργία τώρα μπορεί να χρησιμοποιήσει τη δική της "αυτή" ... addAll: λειτουργία addAll (κομμάτια) _.each (κομμάτια, κομμάτι => this.add (κομμάτι))? , ...

Ο παραπάνω κώδικας είναι από Mozilla Hacks

4. Νέα διάδοση Χειριστής

Το νέο διάδοση ο χειριστής επισημαίνεται με 3 κουκκίδες (...) και μπορούμε να το χρησιμοποιήσουμε για να υπογράψουμε τον τόπο των πολλαπλών αναμενόμενων στοιχείων. Μια από τις πιο συνηθισμένες περιπτώσεις χρήσης του διαχειριστή εξάπλωσης είναι η εισαγωγή των στοιχείων μιας συστοιχίας σε μια άλλη συστοιχία:

 ας myArray = [1, 2, 3]; αφήστε newArray = [... myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

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

 ας myArray = [1, 2, 3]; (a, b, c) επιστροφή a + b + c;  console.log (άθροισμα (... myArray))? // 6

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

5. Προεπιλεγμένες τιμές για παραμέτρους και νέες παραμέτρους ανάπαυσης

Καλά νέα, ότι στο ECMAScript 6 μπορούμε να προσθέσουμε προκαθορισμένες τιμές στις παραμέτρους μιας συνάρτησης. Αυτό σημαίνει ότι αν δεν μεταβιβάσουμε αργότερα τα επιχειρήματα στην κλήση λειτουργίας, θα χρησιμοποιηθούν οι προεπιλεγμένες παράμετροι. Στο ES5 οι προεπιλεγμένες τιμές των παραμέτρων ρυθμίζονται πάντοτε στο απροσδιόριστος, έτσι η νέα δυνατότητα να τα θέσουμε σε ό, τι θέλουμε είναι σίγουρα μια μεγάλη ενίσχυση της γλώσσας.

 (α = 2, β = 4) επιστροφή a + b;  console.log (άθροισμα ()); // 6 console.log (άθροισμα (3, 6)). // 9

Το ES6 εισάγει επίσης ένα νέο είδος παραμέτρου, το παραμέτρους ανάπαυσης. Φαίνονται και δουλεύουν ομοίως για να διαδώσουν τους χειριστές. Έρχονται βολικά αν δεν γνωρίζουμε πόσα επιχειρήματα θα μεταβιβαστούν αργότερα στην κλήση λειτουργίας. Μπορούμε να χρησιμοποιήσουμε τις ιδιότητες και τις μεθόδους του αντικειμένου Array στις παραμέτρους ανάπαυσης:

 συνάρτηση putInAlphabet (... args) ας ταξινομηθεί = args.sort (); επιστροφή ταξινομημένη?  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t

6. Νέα για ... Δήλωση

Με τη βοήθεια του νέου για ... loop μπορούμε να επαναλάβουμε μέσω συστοιχιών ή άλλων επαναληπτικών αντικειμένων εύκολα. Μαζί με το νέο για ... ECMAScript 6 εισάγει επίσης δύο νέα επαναληπτά αντικείμενα, Χάρτη για χάρτες κλειδιών / τιμών και Ορισμός για συλλογές μοναδικών τιμών που μπορούν επίσης να είναι πρωτόγονες τιμές και αναφορές αντικειμένων. Όταν χρησιμοποιούμε το για ... , ο κώδικας μέσα στο μπλοκ εκτελείται για κάθε στοιχείο του επαναληπτικού αντικειμένου.

 ας myArray = [1, 2, 3, 4, 5]. άθροισμα = 0. για (ας της myArray) sum + = i;  console.log (άθροισμα); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Κυματομορφές προτύπων

Το ECMAScript 6 μας παρέχει μια νέα εναλλακτική λύση για τη σύζευξη των συμβολοσειρών. Πρότυπα κυριολεκτικά επιτρέψτε μας να δημιουργούμε εύκολα πρότυπα στα οποία μπορούμε να ενσωματώσουμε διαφορετικές αξίες σε οποιοδήποτε σημείο θέλουμε. Για να γίνει αυτό, πρέπει να χρησιμοποιήσουμε το $ ... σύνταξη παντού όπου θέλουμε να εισαγάγουμε τα δεδομένα που μπορούμε να περάσουμε από μεταβλητές, συστοιχίες ή αντικείμενα με τον ακόλουθο τρόπο:

 ας customer = title: 'Ms', όνομα: 'Jane', επώνυμο: 'Doe', ηλικία: '34'; let template = 'Αγαπητέ $ client.title $ client.firstname $ όνομα_χρήστη! Happy $ customer.age τα γενέθλια! '; console.log (πρότυπο); // Αγαπητέ κα Jane Doe! Χαρούμενα 34α γενέθλια!

8. Μαθήματα

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

Στα ES6 τάξεις δηλώνονται με το νέο τάξη λέξη-κλειδί, και πρέπει να έχετε ένα κατασκευαστής() μέθοδος που ονομάζεται όταν ένα νέο αντικείμενο δημιουργείται με χρήση του νέο myClass () σύνταξη. Είναι επίσης δυνατό να επεκταθούν νέες τάξεις με το το παιδί κατηγορίας επεκτείνει τον γονέα σύνταξη που μπορεί να είναι γνωστή από άλλες αντικειμενοστρεφείς γλώσσες όπως η PHP. Είναι επίσης σημαντικό να γνωρίζουμε ότι, αντίθετα με τις δηλώσεις λειτουργίας και μεταβλητών, οι δηλώσεις κλάσης ΔΕΝ ανυψώνονται στο ECMAScript 6.

 class Polygon κατασκευαστής (ύψος, πλάτος) // κατασκευαστής τάξης this.name = 'Polygon'; this.height = ύψος; this.width = width;  sayName () // method class console.log ('Γεια σας, είμαι', αυτό το όνομα + '.');  let myPolygon = νέο Πολύγωνο (5, 6); console.log (myPolygon.sayName ()); // Γεια σου, είμαι πολύγωνο.

Κωδικός παραπάνω από παραδείγματα ES6 Fiddle, .

9. Ενότητες

Έχετε αναρωτηθεί ποτέ πόσο δροσερό θα ήταν εάν το JavaScript ήταν αρθρωτό; Φυσικά, έχουν υπάρξει λύσεις όπως το CommonJS (που χρησιμοποιείται στο Node.js) ή η AMD (Asynchronous Module Definition) (που χρησιμοποιείται στο RequireJS) για να γίνει αυτό πριν, αλλά το ES6 εισάγει τις λειτουργικές μονάδες ως εγγενές χαρακτηριστικό.

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

 // function.js κύβος λειτουργίας (α) επιστροφή a * a * a;  λειτουργία cubeRoot (α) επιστροφή Math.cbrt (a);  export cube, cubeRoot // ή: εξαγωγή cube ως cb, cubeRoot ως cr // app.js εισαγωγή cube, cubeRoot από "λειτουργίες"; console.log (κύβος (4)). // 64 κονσόλας.log (cubeRoot (125)); // 5

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

10. Φορτία νέων μεθόδων

Το ECMAScript 6 εισάγει πολλές νέες μεθόδους για το υπάρχον Πρωτότυπο String, Array Object, Array Πρωτότυπο και Math Object. Οι νέες μέθοδοι μπορούν να βελτιώσουν σημαντικά τον τρόπο με τον οποίο μπορούμε να χειριστούμε αυτές τις οντότητες. Το Mozilla Dev έχει εξαιρετικά παραδείγματα κώδικα για τις νέες προσθήκες, αξίζει να αφιερώσετε χρόνο και να τα εξετάσετε διεξοδικά.

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

 η συνάρτηση isPrime (στοιχείο, ευρετήριο, πίνακας) var start = 2; ενώ (έναρξη <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1.  console.log ([4, 6, 8, 12] .find (isPrime)). // undefined, δεν βρέθηκε console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Κωδικός παραπάνω από: Mozilla Dev