Az ES6 használatának megkezdése néhány kedvenc dolgom használatával

Ez az oktatóanyag bemutatja néhány egyszerű lépést a JavaScript legújabb verziójának: ES6 elsajátításához .

Hogy megérezzük a nyelvet, elmélyülök néhány kedvenc funkciómban. Ezután rövid listát adok az ES6 elsajátításához szükséges nagyszerű forrásokról.

ES6 vagy ECMAScript 2015?

"Mi van a névben?"

- Júlia Shakespeare „Rómeó és Júlia” című művéből

A hivatalos neve a 6. kiadás ECMAScript az ECMAScript 2015 mivel januárban fejeződött be, 2015-ben azonban általában az emberek úgy tűnik, hogy hivatkoznak rá egyszerűen ES6 .

Korábban olyan transzpilert kellett használnia, mint a Babel, hogy még az ES6-hoz is kezdjen. Úgy tűnik, hogy a Microsoft Internet Explorer kivételével szinte mindenki támogatja az ES6 legtöbb funkcióját. Igazság szerint a Microsoft valóban támogatja az ES6-ot az Edge-ben. Ha további részleteket szeretne, tekintse meg a kangax kompatibilitási táblázatát.

ES6 tanulási környezet

Az ES6 megtanulásának legjobb módja az ES6 írása és futtatása. Lehetnek erre módok. De a kettő, amelyet kísérletezés közben használok:

  • Node.js
  • A Babel.io Próbáld ki oldala

Node.js és Visual Studio kód

Az ES6 kényelmeinek felfedezésének egyik legjobb módja az, ha a kódot olyan szerkesztőbe írja, mint a Visual Studio Code, majd futtatja a Node.js fájlban

Telepítse a Visual Studio Code alkalmazást, és hozzon létre egy nevű fájlt helloworld.js. Illessze be a következő kódot:

console.log('Hello world');

Mentsd el. Valahogy így kell kinéznie:

A 6.5-ös verzió óta a Node.js támogatja az ES6 szabvány nagy részét. A példánk futtatásához nyissa meg a Node.js parancssort arra a mappára, ahol a helloworld.jsfájlt létrehozta . Csak írja be:

node helloworld.js

A console.logkifejezés kiírja a kimenet:

Babel.io

Ez nem olyan szórakoztató, mint a Node.js, de az ES6 kód futtatásának kényelmes módja a Babel.io webhelyen található Próbáld ki oldal. Bontsa ki a Beállításokat, és ellenőrizze, hogy az Értékelés be van-e jelölve. Ezután nyissa meg a böngésző konzolt .

Írja be az ES6-ot a bal oldali oszlopba. A Babel egyszerű régi JavaScript-re fordítja. Használhatja console.logés megtekintheti a kimenetet a jobb oldali Web Console-ban.

Néhány a Kedvenc funkcióim közül

- Ez néhány kedvenc dolgom.

- Maria Rodgersből és Hammerstein „A zene hangja” című művéből

Ebben a szakaszban az ES6 néhány új funkcióját vesszük szemügyre, beleértve a következőket:

  • Használata letés constahelyett,var
  • Nyíl funkciók
  • Sablon húrok
  • Szerkezetátalakítás

const és hagyja Versus var

Most, hogy az ES6-ban kódol: Ne használja var! Komolyan, soha ne használja varújra.

Mostantól használja a constvagy let. Használja, constha egyszer beállítja az értéket. letAkkor használja, ha módosítani kívánja az értéket.

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

Általában előbb szeretem használni const. Aztán ha panaszkodik, megnézem a kódomat, és megbizonyosodom arról, hogy valóban tudnom kell-e módosítani a változót. Ha igen, akkor megváltoztatom let.

Győződjön meg róla, hogy nézd meg a forrásokat a cikk későbbi részében további információt letés const. Látni fogja, hogy sokkal intuitívabban működnek, mint var.

Nyílfunkciók

A nyílfüggvények az ES6 egyik meghatározó jellemzője. A nyílfüggvények a függvények írásának új módja. Például a következő funkciók azonos módon működnek:

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

Néhány dolgot érdemes megjegyezni a nyílfunkciókkal kapcsolatban:

  • Automatikusan visszaadják a kiszámított értéket.
  • Van lexikális this.

Ez az első alkalom, amikor ezt láttam, azon tűnődtem: „Mi ez a nagyvilágban egy lexikális ? És tényleg érdekel? Nézzünk meg egy példát arra, hogy a lexikális miért olyan hasznos, és hogyan teszi sokkal kódosabbá a kódunkat:

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 tips and tricks to make your code cleaner, shorter, and easier to read! by Sam Williams

    This is a great article in Free Code Camp’s Medium publication.

  • MPJ’s video series: ES6 JavaScript Features

    If you prefer videos, MPJ is your guy. Not only is he good technically, his stuff is really entertaining.

  • ES6 in Depth series on Mozilla Hacks

    This is an excellent in depth series.

  • Eric Elliott’s series Composing Software

    Read through this one for a real challenge. Be forewarned though, some of Eric’s stuff is college level Computer Science.

This article is based on a lecture I gave in March 2018.