Kom godt i gang med ES6 ved hjælp af et par af mine yndlings ting

Denne vejledning fører dig gennem nogle nemme trin for at komme i gang med at lære den nyeste version af JavaScript: ES6.

For at få en fornemmelse af sproget vil vi dykke ned i et par af mine yndlingsfunktioner. Derefter vil jeg give en kort liste over nogle gode ressourcer til læring af ES6.

ES6 eller ECMAScript 2015?

"Hvad er i et navn?"

- Juliet fra Shakespeares “Romeo and Juliet”

Det officielle navn på 6. udgave af ECMAScript er ECMAScript 2015, da det blev afsluttet i juni 2015. Men generelt ser folk ud til at henvise til det simpelthen som ES6 .

Tidligere var du nødt til at bruge en transpiller som Babel til endda at komme i gang med ES6. Nu ser det ud til, at næsten alle undtagen Microsoft Internet Explorer understøtter de fleste af funktionerne i ES6. For at være retfærdig understøtter Microsoft ES6 i Edge. Hvis du vil have flere detaljer, skal du kigge på kangaxs kompatibilitetstabel.

ES6 læringsmiljø

Den bedste måde at lære ES6 på er at skrive og køre ES6. Der er måske måder at gøre det på. Men de to, som jeg bruger, når jeg eksperimenterer, er:

  • Node.js
  • Babel.io's Prøv siden

Node.js og Visual Studio-kode

En af de bedste måder at udforske det behagelige ved ES6 er at skrive din kode i en editor som Visual Studio Code og derefter køre den i Node.js

Installer Visual Studio-koden, og opret en fil, der hedder helloworld.js. Indsæt følgende kode i:

console.log('Hello world');

Gem det. Det skal se sådan ud:

Siden version 6.5 har Node.js understøttet det meste af ES6-standarden. For at køre vores eksempel skal du åbne Node.js kommandoprompt til din mappe, hvor du oprettede helloworld.jsfilen. Og skriv bare:

node helloworld.js

Vores console.logerklæring udskrives som output:

Babel.io

Det er ikke så sjovt som Node.js, men en bekvem måde at køre ES6-kode er siden Prøv det på Babel.io. Udvid indstillingerne, og sørg for, at Evaluer er markeret. Åbn derefter din browser Console .

Skriv ES6 i kolonnen til venstre. Babel kompilerer det til almindeligt gammelt JavaScript. Du kan bruge console.logog se output i webkonsollen til højre.

Nogle af mine yndlingsfunktioner

"Dette er et par af mine yndlings ting."

- Maria fra Rodgers og Hammersteins "The Sound of Music"

I dette afsnit vil vi se hurtigt på blot nogle få af de nye funktioner i ES6, herunder:

  • Brug letog i conststedet forvar
  • Pilfunktioner
  • Skabelonstrenge
  • Destrukturer

const og lad Versus var

Nu hvor du koder i ES6: Stop med at bruge var! Seriøst, brug aldrig varigen.

Brug nu enten consteller let. Brug, constnår du vil indstille værdien en gang. Brug, letnår du har til hensigt at ændre værdien.

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

Typisk kan jeg godt lide at bruge constførst. Så hvis det klager, ser jeg på min kode og sørger for, at jeg virkelig har brug for at kunne ændre variablen. I så fald ændrer jeg det til let.

Sørg for at tjekke ressourcerne senere i denne artikel for at få flere oplysninger om letog const. Du vil se, at de fungerer meget mere intuitivt end var.

Pilfunktioner

Pilfunktioner er et af de definerende træk ved ES6. Pilfunktioner er en ny måde at skrive funktioner på. Følgende funktioner fungerer f.eks. Identisk:

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));

Der er et par ting at huske på pilfunktioner:

  • De returnerer automatisk den beregnede værdi.
  • De har leksikalsk this.

Denne første gang jeg så dette, spekulerede jeg på, ”Hvad i den store verden er en leksikalsk dette ? Og er jeg virkelig ligeglad? ” Lad os se på et eksempel på, hvorfor det leksikale er så nyttigt, og hvordan det gør vores kode så meget mere intuitiv:

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 tip og tricks til at gøre din kode renere, kortere og lettere at læse! af Sam Williams

    Dette er en god artikel i Free Code Camp's Medium-publikation.

  • MPJs videoserie: ES6 JavaScript-funktioner

    Hvis du foretrækker videoer, er MPJ ​​din fyr. Ikke kun er han god teknisk, hans ting er virkelig underholdende.

  • ES6 i dybde-serien om Mozilla Hacks

    Dette er en fremragende dybdegående serie.

  • Eric Elliotts serie Komponeringssoftware

    Læs denne for en reel udfordring. Vær dog opmærksom, nogle af Erics ting er computervidenskab på universitetsniveau.

Denne artikel er baseret på et foredrag, jeg holdt i marts 2018.