Τι είναι το ES6 και τι πρέπει να γνωρίζουν οι προγραμματιστές Javascript

Το ES6 αναφέρεται στην έκδοση 6 της γλώσσας προγραμματισμού ECMA Script. Το ECMA Script είναι το τυποποιημένο όνομα για JavaScript και η έκδοση 6 είναι η επόμενη έκδοση μετά την έκδοση 5, η οποία κυκλοφόρησε το 2011. Είναι μια σημαντική βελτίωση στη γλώσσα JavaScript και προσθέτει πολλές περισσότερες δυνατότητες που διευκολύνουν την ανάπτυξη λογισμικού μεγάλης κλίμακας Το

Το ECMAScript ή ES6, δημοσιεύτηκε τον Ιούνιο του 2015. Στη συνέχεια μετονομάστηκε σε ECMAScript 2015. Η υποστήριξη του προγράμματος περιήγησης στο Web για την πλήρη γλώσσα δεν έχει ολοκληρωθεί ακόμη, αν και υποστηρίζονται σημαντικά τμήματα. Τα μεγάλα προγράμματα περιήγησης ιστού υποστηρίζουν ορισμένες δυνατότητες του ES6. Ωστόσο, είναι δυνατό να χρησιμοποιηθεί λογισμικό γνωστό ως a παίχτης για να μετατρέψετε τον κωδικό ES6 σε ES5, ο οποίος υποστηρίζεται καλύτερα στα περισσότερα προγράμματα περιήγησης.

Ας δούμε τώρα μερικές σημαντικές αλλαγές που φέρνει το ES6 στο JavaScript.

1. Σταθερές

Τέλος, η έννοια των σταθερών έφτασε στο JavaScript! Οι σταθερές είναι τιμές που μπορούν να οριστούν μόνο μία φορά (ανά εύρος, πεδίο που εξηγείται παρακάτω). Ένας επαναπροσδιορισμός στο ίδιο πεδίο ενεργοποιεί ένα σφάλμα.

const JOE = 4.0  
JOE= 3.5  
// results in: Uncaught TypeError: Assignment to constant variable.

Μπορείτε να χρησιμοποιήσετε τη σταθερά όπου μπορείτε να χρησιμοποιήσετε μια μεταβλητή ( όπου ).

console.log('Value is: ' + joe * 2)  
// prints: 8

2. Block-Scoped Variables and Functions

Καλώς ήλθατε στον 21ο αιώνα, JavaScript! Με το ES6, οι μεταβλητές δηλώνονται με χρήση αφήνω (και οι σταθερές περιγράφουν παραπάνω) ακολουθήστε τους κανόνες επιλογής μπλοκ όπως στην Java, C ++ κ.λπ. (Για να μάθετε περισσότερα, δείτε πώς να δηλώσετε μεταβλητές στο JavaScript.)

Πριν από αυτήν την ενημέρωση, οι μεταβλητές στο JavaScript είχαν οριοθετηθεί λειτουργίες. Δηλαδή, όταν χρειάζεστε ένα νέο πεδίο για μια μεταβλητή, έπρεπε να το δηλώσετε μέσα σε μια συνάρτηση.

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

γιατί τα μηνύματα κειμένου μου δεν παραδίδονται

{  
 let x = 'hello';  
 {  
 let x = 'world';  
 console.log('inner block, x = ' + x);  
 }  
 console.log('outer block, x = ' + x);  
}  
// prints  
inner block, x = world  
outer block, x = hello

Μπορείτε επίσης να επαναπροσδιορίσετε σταθερές, μέσα σε τέτοια μπλοκ.

{  
 let x = 'hello';  
 {  
 const x = 4.0;  
 console.log('inner block, x = ' + x);  
 try {  
 x = 3.5  
 } catch(err) {  
 console.error('inner block: ' + err);  
 }  
 }  
 x = 'world';  
 console.log('outer block, x = ' + x);  
}  
// prints  
inner block, x = 4  
inner block: TypeError: Assignment to constant variable.  
outer block, x = world

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

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

var x = a => a + 1;  
x(4) // returns 5

Χρησιμοποιώντας αυτήν τη σύνταξη, μπορείτε να ορίσετε και να περάσετε ορίσματα σε συναρτήσεις με ευκολία.

Χρήση με α για κάθε() :

[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))  
// prints  
1 => 1  
2 => 4  
3 => 9  
4 => 16

Ορίστε συναρτήσεις που δέχονται πολλαπλά ορίσματα περικλείοντάς τις σε παρένθεση:

[22, 98, 3, 44, 67].sort((a, b) => a - b)  
// returns  
[3, 22, 44, 67, 98]

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

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

var x = (a, b = 1) => a * b  
x(2)  
// returns 2  
x(2, 2)  
// returns 4

Σε αντίθεση με άλλες γλώσσες όπως η C ++ ή η python, οι παράμετροι με προεπιλεγμένες τιμές ενδέχεται να εμφανιστούν πριν από αυτές χωρίς προεπιλογές. Σημειώστε ότι αυτή η συνάρτηση ορίζεται ως μπλοκ με a ΕΠΙΣΤΡΟΦΗ αξία ως απεικόνιση.

var x = (a = 2, b) => { return a * b }

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

x(2)  
// returns NaN  
x(1, 3)  
// returns 3

Όταν εισάγετε ρητά απροσδιόριστος ως όρισμα, η προεπιλεγμένη τιμή χρησιμοποιείται εάν υπάρχει.

x(undefined, 3)  
// returns 6

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

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

var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }  
x(2, 3)  
// prints  
a = 2, b = 3, 0 args left  
x(2, 3, 4, 5)  
// prints  
a = 2, b = 3, 2 args left

6. Πρότυπο συμβολοσειράς

Το πρότυπο συμβολοσειράς αναφέρεται στην παρεμβολή μεταβλητών και εκφράσεων σε συμβολοσειρές χρησιμοποιώντας μια σύνταξη όπως το perl ή το κέλυφος. Ένα πρότυπο συμβολοσειράς περικλείεται σε χαρακτήρες back-tick ( ' ). Αντίθετα, μόνο εισαγωγικά ( ' ) ή διπλά εισαγωγικά ( ' ) υποδεικνύουν κανονικές συμβολοσειρές. Οι εκφράσεις μέσα στο πρότυπο επισημαίνονται μεταξύ τους $ { και } Το Εδώ είναι ένα παράδειγμα:

var name = 'joe';  
var x = `hello ${name}`  
// returns 'hello joe'

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

// define an arrow function  
var f = a => a * 4  
// set a parameter value  
var v = 5  
// and evaluate the function within the string template  
var x = `hello ${f(v)}`  
// returns 'hello 20'

Αυτή η σύνταξη για τον καθορισμό συμβολοσειρών μπορεί επίσης να χρησιμοποιηθεί για τον ορισμό συμβολοσειρών πολλαπλών γραμμών.

var x = `hello world  
next line`  
// returns  
hello world  
next line

7. Ιδιότητες αντικειμένου

Το ES6 φέρνει μια απλοποιημένη σύνταξη δημιουργίας αντικειμένου. Ρίξτε μια ματιά στο παρακάτω παράδειγμα:

var x = 'hello world', y = 25  
var a = { x, y }  
// is equivalent to the ES5:  
{x: x, y: y}

Τα υπολογισμένα ονόματα ιδιοκτησίας είναι επίσης πολύ έξυπνα. Με το ES5 και παλαιότερα, για να ορίσετε μια ιδιότητα αντικειμένου με υπολογισμένο όνομα, έπρεπε να το κάνετε αυτό:

var x = 'hello world', y = 25  
var a = {x: x, y: y}  
a['joe' + y] = 4  
// a is now:  
{x: 'hello world', y: 25, joe25: 4}

Τώρα μπορείτε να τα κάνετε όλα σε έναν ορισμό:

var a = {x, y, ['joe' + y]: 4}  
// returns  
{x: 'hello world', y: 25, joe25: 4}

Και φυσικά, για να ορίσετε μεθόδους, μπορείτε απλά να το ορίσετε με το όνομα:

var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}  
a.foo(2)  
// returns  
6

8. Σύνταξη ορισμού κατηγορίας

Ορισμός τάξης

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

class Circle {  
 constructor(radius) {  
 this.radius = radius  
 }  
}  
// use it  
var c = new Circle(4)  
// returns: Circle {radius: 4}

Μέθοδοι δήλωσης

Ο καθορισμός μιας μεθόδου είναι επίσης αρκετά απλός. Δεν υπάρχει έκπληξη εκεί.

class Circle {  
 constructor(radius) {  
 this.radius = radius  
 }  
 computeArea() { return Math.PI * this.radius * this.radius }  
}  
var c = new Circle(4)  
c.computeArea()  
// returns: 50.26548245743669

Αποκτήτες και Ρυθμιστές

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

class Circle {  
 constructor(radius) {  
 this.radius = radius  
 }  
 get area() { return Math.PI * this.radius * this.radius }  
}  
var c = new Circle(4)  
// returns: Circle {radius: 4}  
c.area  
// returns: 50.26548245743669

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

Εδώ είναι η επανακαθορισμένη κατηγορία:

class Circle {  
 constructor(radius) {  
 this._radius = radius  
 }  
 get area() { return Math.PI * this._radius * this._radius }  
 set radius(r) { this._radius = r }  
}  
var c = new Circle(4)  
// returns: Circle {_radius: 4}  
c.area  
// returns: 50.26548245743669  
c.radius = 6  
c.area  
// returns: 113.09733552923255

Συνολικά, αυτό είναι μια ωραία προσθήκη σε αντικειμενοστραφή JavaScript.

Κληρονομία

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

class Ellipse {  
 constructor(width, height) {  
 this._width = width;  
 this._height = height;  
 }  
 get area() { return Math.PI * this._width * this._height; }  
 set width(w) { this._width = w; }  
 set height(h) { this._height = h; }  
}  
class Circle extends Ellipse {  
 constructor(radius) {  
 super(radius, radius);  
 }  
 set radius(r) { super.width = r; super.height = r; }  
}  
// create a circle  
var c = new Circle(4)  
// returns: Circle {_width: 4, _height: 4}  
c.radius = 2  
// c is now: Circle {_width: 2, _height: 2}  
c.area  
// returns: 12.566370614359172  
c.radius = 5  
c.area  
// returns: 78.53981633974483

Και αυτό ήταν μια σύντομη εισαγωγή σε μερικές από τις δυνατότητες του JavaScript ES6.

Επόμενο: εξοικείωση με μερικές σημαντικές μεθόδους πίνακα JavaScript και σενάριο κινούμενου ρομπότ ευαίσθητο στη φωνή! Επίσης, μάθετε για ένα υπέροχο πλαίσιο front-end που ονομάζεται Vue.

Πιστωτική εικόνα: micrologia/ Φωτογραφίες καταθέσεων

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Canon εναντίον Nikon: Ποια μάρκα κάμερας είναι καλύτερη;

Η Canon και η Nikon είναι τα δύο μεγαλύτερα ονόματα στη βιομηχανία κάμερας. Ποια μάρκα προσφέρει όμως την καλύτερη γκάμα φωτογραφικών μηχανών και φακών;

tcl roku τηλεχειριστήριο δεν λειτουργεί

Διαβάστε Επόμενο Σχετικά θέματα

Προγραμματισμός
JavaScript

Σχετικά με τον Συγγραφέα Jay Sridhar(Δημοσιεύθηκαν 17 άρθρα) Περισσότερα από τον Jay Sridhar

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή