Ξεκινώντας με το ES6 χρησιμοποιώντας μερικά από τα αγαπημένα μου πράγματα

Αυτό το σεμινάριο σας καθοδηγεί σε μερικά εύκολα βήματα για να ξεκινήσετε να μαθαίνετε τη νεότερη έκδοση του JavaScript: ES6.

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

ES6 ή ECMAScript 2015;

«Τι υπάρχει στο όνομα;»

- Ιουλιέτα από το "Romeo and Juliet" του Σαίξπηρ

Το επίσημο όνομα της 6ης έκδοσης του ECMAScript είναι το ECMAScript 2015, όπως ολοκληρώθηκε τον Ιούνιο του 2015. Ωστόσο, σε γενικές γραμμές, οι άνθρωποι φαίνεται να το αναφέρονται απλώς ως ES6 .

Προηγουμένως, έπρεπε να χρησιμοποιήσετε ένα transpiler όπως το Babel για να ξεκινήσετε ακόμη και με το ES6. Τώρα, φαίνεται ότι σχεδόν όλοι εκτός από τον Microsoft Internet Explorer υποστηρίζει τις περισσότερες από τις δυνατότητες του ES6. Για να είμαστε δίκαιοι, η Microsoft υποστηρίζει το ES6 στο Edge. Αν θέλετε περισσότερες λεπτομέρειες, ρίξτε μια ματιά στον πίνακα συμβατότητας του kangax .

ES6 Μαθησιακό Περιβάλλον

Ο καλύτερος τρόπος για να μάθετε το ES6 είναι να γράψετε και να εκτελέσετε το ES6. Υπάρχουν τρόποι για να το κάνετε αυτό. Αλλά τα δύο που χρησιμοποιώ όταν πειραματίζομαι είναι:

  • Node.js
  • Babel.io's Δοκιμάστε τη σελίδα

Κωδικός Node.js και Visual Studio

Ένας από τους καλύτερους τρόπους για να εξερευνήσετε τις απολαύσεις του ES6 είναι να γράψετε τον κώδικά σας σε ένα πρόγραμμα επεξεργασίας όπως το Visual Studio Code και στη συνέχεια να τον εκτελέσετε στο Node.js

Εγκαταστήστε τον Visual Studio Code και δημιουργήστε ένα αρχείο με το όνομα helloworld.js. Επικολλήστε τον ακόλουθο κώδικα σε:

console.log('Hello world');

Σώσε το. Θα πρέπει να μοιάζει με αυτό:

Από την έκδοση 6.5, το Node.js έχει υποστηρίξει το μεγαλύτερο μέρος του προτύπου ES6. Για να εκτελέσετε το παράδειγμά μας, ανοίξτε τη γραμμή εντολών Node.js στο φάκελό σας όπου δημιουργήσατε το helloworld.jsαρχείο. Και, απλώς πληκτρολογήστε:

node helloworld.js

Η console.logδήλωσή μας εκτυπώνεται ως έξοδος:

Babel.io

Δεν είναι τόσο διασκεδαστικό όσο το Node.js, αλλά ένας βολικός τρόπος εκτέλεσης του κώδικα ES6 είναι η σελίδα "Δοκιμάστε το" στο Babel.io. Αναπτύξτε τις Ρυθμίσεις και βεβαιωθείτε ότι είναι επιλεγμένη η Αξιολόγηση . Στη συνέχεια, ανοίξτε την κονσόλα του προγράμματος περιήγησής σας .

Πληκτρολογήστε το ES6 στη στήλη στα αριστερά. Το Babel το συντάσσει σε απλό παλιό JavaScript. Μπορείτε να χρησιμοποιήσετε console.logκαι να δείτε την έξοδο στην Κονσόλα Web στα δεξιά.

Μερικές από τις αγαπημένες μου δυνατότητες

"Αυτά είναι μερικά από τα αγαπημένα μου πράγματα."

- Η Μαρία από τον Rodgers και το "The Sound of Music" του Hammerstein

Σε αυτήν την ενότητα, θα ρίξουμε μια γρήγορη ματιά σε μερικές από τις νέες δυνατότητες του ES6, όπως:

  • Χρήση letκαι constαντί γιαvar
  • Λειτουργίες βέλους
  • Συμβολοσειρές προτύπων
  • Καταστροφή

const και αφήστε το Versus var

Τώρα που κωδικοποιείτε στο ES6: Σταματήστε να χρησιμοποιείτε var! Σοβαρά, μην το varξαναχρησιμοποιείτε.

Από τώρα και στο εξής, χρησιμοποιήστε μία constή let. Χρησιμοποιήστε το constόταν θα ορίσετε την τιμή μία φορά. Χρησιμοποιήστε το letόταν σκοπεύετε να αλλάξετε την τιμή.

let bar = { x: 'x'};const foo = { x: 'x'};
bar.x = 'other'; // This is finefoo.x = 'other'; // This is fine
bar = {}; // This is also finefoo = {}; // This will throw an error

Συνήθως, μου αρέσει να χρησιμοποιώ constπρώτα. Στη συνέχεια, εάν παραπονιέται, κοιτάζω τον κωδικό μου και βεβαιώνω ότι πρέπει πραγματικά να μπορώ να τροποποιήσω τη μεταβλητή. Εάν ναι, το αλλάζω σε let.

Βεβαιωθείτε ότι έχετε ελέγξει τους πόρους αργότερα σε αυτό το άρθρο για περισσότερες πληροφορίες σχετικά με letκαι const. Θα δείτε ότι λειτουργούν πολύ πιο διαισθητικά από ό, τι var.

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

Οι λειτουργίες βέλους είναι ένα από τα καθοριστικά χαρακτηριστικά του ES6. Οι λειτουργίες βέλους είναι ένας νέος τρόπος για να γράψετε συναρτήσεις. Για παράδειγμα, οι ακόλουθες συναρτήσεις λειτουργούν πανομοιότυπα:

function oneMore(val){ return val+1;}console.log('3 and one more is:', oneMore(3));
const oneMore = (val) => val+1;console.log('3 and one more is:', oneMore(3));

Υπάρχουν μερικά πράγματα που πρέπει να θυμάστε σχετικά με τις λειτουργίες βέλους:

  • Επιστρέφουν αυτόματα την υπολογισμένη τιμή.
  • Έχουν λεξικά this.

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

In lines 1–31, we define a Class called ThisTester. It has two functions thisArrowTest() and thisTest() that basically do the same thing. But, one uses an arrow function and the other uses the classic function notation.

On line 33, we create an new object myTester based on our ThisTester class and call the two functions in our class.

const myTester = new ThisTester();console.log('TESTING: thisArrowTest');myTester.thisArrowTest();console.log('');console.log('TESTING: thisTest');myTester.thisTest();

In the thisTest() function, we see that it tries to use this in line 26.

console.log('function this fails', this.testValue);

But, it fails because that function gets its own this and it isn’t the same this as the class. If you think this is confusing, that’s because it is. It isn’t intuitive at all. And, new developers sometimes spend their first week fighting with this in callback functions and promises like I did.

Eventually, after reviewing a bunch of examples, I figured out the standard “trick” of using a variable called self to hold onto the this that we want to use. For example, in line 17:

let self = this;

However, notice how in the arrow function in line 10, we can directly access this.testValue and magically it works:

let myFunction = (x) =>console.log('arrow "this" works:', this.testValue)

That is lexical this in action. The this in the arrow function is the same as the this in the surrounding function that calls it. And hence we can intuitively use this to access the properties in our object like this.testValue.

Template Strings

Template Strings (sometimes called Template Literals) are an easy way to construct strings. They are great for multi line strings such as those used in Angular templates. Template Strings use the back tick ` instead of quote or apostrophe.

Here is an example of creating a long, multi-line string:

const myLongString = `This stringactually spans many lines.And, I don't even need to use any "strange"notation.`;console.log (myLongString);

You can easily bind variables to your string, for example:

const first = 'Todd', last = 'Palmer';console.log(`Hello, my name is ${first} ${last}.`)

Looking at that variable assignment begs the question:

“What if I need to use the $, {, or } characters in my string?”

Well, the only one that needs special treatment is the sequence ${.

console.log(`I can use them all separately $ { }`);console.log(`$\{ needs a backslash.`);

Template Strings are especially useful in Angular and AngularJS where you create HTML templates, because they tend to be multi-line and have a lot of quotes and apostrophes. Here is what a small example of an Angular Template leveraging the back tick looks like:

import { Component } from '@angular/core';
@Component({ selector: 'app-root', template: ` 

{{title}}

My favorite hero is: {{myHero}}

`})export class AppComponent { title = 'Tour of Heroes'; myHero = 'Windstorm';}

Destructuring

Destructuring lets you take parts of an object or array and assign them to your own named variables. For more information on Destructuring, check out my article on ITNEXT.

ES6 Resources

That was just a quick overview of a few of the new features in ES6. Here are some great resources for continuing your journey down the path of learning ES6:

  • Learn ES2015 on Babel

    This is an overview of all the new features. Although it doesn’t go into much depth, this is a great page to keep as a quick reference with examples.

  • Συμβουλές και κόλπα ES6 για να κάνετε τον κώδικά σας πιο καθαρό, μικρότερο και πιο εύκολο να το διαβάσετε! από τον Sam Williams

    Αυτό είναι ένα υπέροχο άρθρο στην έκδοση του Free Code Camp's Medium.

  • Σειρά βίντεο MPJ: ES6 JavaScript Features

    Αν προτιμάτε βίντεο, το MPJ είναι ο τύπος σας. Όχι μόνο είναι καλός τεχνικά, τα πράγματα του είναι πραγματικά διασκεδαστικά.

  • ES6 σε σειρά Depth στο Mozilla Hacks

    Αυτή είναι μια εξαιρετική σε βάθος σειρά.

  • Λογισμικό σύνθεσης σειράς Eric Elliott

    Διαβάστε ολόκληρο αυτό για μια πραγματική πρόκληση. Προσοχή όμως, μερικά από τα πράγματα του Eric είναι το Science Science σε επίπεδο κολλεγίων.

Αυτό το άρθρο βασίζεται σε μια διάλεξη που έδωσα τον Μάρτιο του 2018.