de Todd Palmer

Noțiuni introductive despre ES6 folosind câteva dintre lucrurile mele preferate

Notiuni introductive despre ES6 folosind cateva dintre lucrurile mele preferate
Calea pădurii în vestul Finlandei de Miguel Virkkunen Carvalho

Acest tutorial vă ghidează prin câțiva pași simpli pentru a începe să învățați cea mai nouă versiune de JavaScript: ES6.

Pentru a simți limba, vom aprofunda câteva dintre caracteristicile mele preferate. Apoi voi oferi o scurtă listă cu câteva resurse excelente pentru învățarea ES6.

ES6 sau ECMAScript 2015?

„Ce e într-un nume?”
– Julieta din „Romeo și Julieta” de la Shakespeare

Numele oficial al Ediția a 6-a ECMAScript este ECMAScript 2015, deoarece a fost finalizat în iunie 2015. Cu toate acestea, în general, oamenii par să se refere la el pur și simplu ca ES6.

Anterior, trebuia să utilizați un transpilator ca Babel pentru a începe chiar și cu ES6. Acum, se pare că aproape toată lumea, cu excepția Microsoft Internet Explorer, acceptă majoritatea funcțiilor din ES6. Pentru a fi corect, Microsoft acceptă ES6 în Edge. Dacă doriți mai multe detalii, aruncați o privire la lui kangax tabel de compatibilitate.

ES6 Mediul de învățare

Cel mai bun mod de a învăța ES6 este să scrieți și să rulați ES6. Există mai multe modalități de a face acest lucru. Dar cele două pe care le folosesc atunci când experimentez sunt:

Node.js și Visual Studio Code

Una dintre cele mai bune modalități de a explora plăcerile ES6 este să vă scrieți codul într-un editor de genul Cod Visual Studio și apoi rulați-l Node.js

Instalați Visual Studio Code și creați un fișier numit helloworld.js. Lipiți următorul cod în:

console.log('Hello world');

Salvați-l. Ar trebui să arate cam așa:

Notiuni introductive despre ES6 folosind cateva dintre lucrurile mele preferate

De la versiunea 6.5, Node.js a acceptat majoritatea standardului ES6. Pentru a rula exemplul nostru, deschideți linia de comandă Node.js în folderul dvs. în care ați creat helloworld.js fişier. Și, tastați doar:

node helloworld.js

Al nostru console.log declarația se imprimă ca ieșire:

1612040587 200 Notiuni introductive despre ES6 folosind cateva dintre lucrurile mele preferate

Babel.io

Nu este la fel de distractiv ca Node.js, dar un mod convenabil de a rula codul ES6 este Încearcă pagina pe Babel.io. Extindeți Setări și asigurați-vă A evalua este bifat. Apoi deschideți browserul Consolă.

1612040587 387 Notiuni introductive despre ES6 folosind cateva dintre lucrurile mele preferate
Babel REPL

Tastați ES6 în coloana din stânga. Babel îl compilează în JavaScript simplu. Poți să folosești console.log și vedeți rezultatul în Consola Web din dreapta.

Unele dintre caracteristicile mele preferate

„Acestea sunt câteva dintre lucrurile mele preferate.”
– Maria din „Sunetul muzicii” al lui Rodgers și Hammerstein

În această secțiune, vom analiza rapid câteva dintre noile caracteristici ale ES6, inclusiv:

  • Folosind let și const în loc de var
  • Funcții săgeată
  • Șiruri șablon
  • Destructurarea

const și lăsați Versus var

Acum că codificați în ES6: Opriți utilizarea var! Serios, nu folosiți niciodată var din nou.

De acum înainte, utilizați oricare const sau let. Utilizare const când veți seta valoarea o dată. Utilizare let când intenționați să modificați valoarea.

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

De obicei, îmi place să folosesc const primul. Apoi, dacă se plânge, mă uit la codul meu și mă asigur că trebuie să pot modifica variabila. Dacă da, îl schimb let.

Asigurați-vă că verificați resursele mai târziu în acest articol pentru mai multe informații despre let și const. Veți vedea că funcționează mult mai intuitiv decât var.

Funcții săgeată

Funcțiile săgeți sunt una dintre caracteristicile definitorii ale ES6. Funcțiile săgeți sunt un nou mod de a scrie funcții. De exemplu, următoarele funcții funcționează identic:

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

Există câteva lucruri de reținut despre funcțiile săgeată:

  • Acestea returnează automat valoarea calculată.
  • Au lexical this.

Prima dată când am văzut acest lucru, m-am întrebat: „Ce este în lumea largă un lexical aceasta? Și, chiar îmi pasă? ” Să vedem un exemplu de ce lexicalul este atât de util și cum face codul nostru mult mai intuitiv:

În rândurile 1-31, definim o clasă numită ThisTester. Are două funcții thisArrowTest() și thisTest() care practic fac același lucru. Dar, una folosește o funcție săgeată, iar cealaltă folosește notația funcției clasice.

Pe linia 33, creăm un obiect nou myTester pe baza noastra ThisTester clasă și apelează cele două funcții din clasa noastră.

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

În thisTest() funcție, vedem că încearcă să o folosească this în linia 26.

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

Dar, eșuează, deoarece acea funcție devine a sa this și nu este același lucru this ca clasă. Dacă credeți că acest lucru este confuz, asta pentru că este. Nu este deloc intuitiv. Și noii dezvoltatori își petrec uneori prima săptămână luptându-se this în funcții de rambursare și promisiuni ca și mine

În cele din urmă, după ce am analizat o grămadă de exemple, am descoperit „trucul” standard al utilizării unei variabile numite self a se apuca de this pe care vrem să o folosim. De exemplu, în linia 17:

let self = this;

Cu toate acestea, observați cum în funcția săgeată din linia 10 putem accesa direct this.testValue și magic funcționează:

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

Acesta este lexical aceasta în acțiune. this în funcția săgeată este aceeași cu this în funcția înconjurătoare care o numește. Și, prin urmare, putem folosi intuitiv this pentru a accesa proprietățile din obiectul nostru cum ar fi this.testValue.

Șiruri șablon

Șirurile șablon (uneori numite șablon literal) sunt o modalitate ușoară de a construi șiruri. Acestea sunt excelente pentru șirurile cu mai multe linii, cum ar fi cele utilizate în șabloanele unghiulare. Șirurile șablon folosesc bifează înapoi `în loc de citat sau apostrof.

Iată un exemplu de creare a unui șir lung, cu mai multe linii:

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

Puteți lega cu ușurință variabile la șirul dvs., de exemplu:

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

Privind acea atribuire variabilă se pune întrebarea:
„Ce se întâmplă dacă trebuie să folosesc $, {, sau } caractere din șirul meu? ”

Ei bine, singurul care are nevoie de un tratament special este secvența ${.

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

Șirurile șablon sunt utile în special în Unghiular și AngularJS unde creați șabloane HTML, deoarece acestea tind să fie multi-linii și au o mulțime de ghilimele și apostrofe. Iată cum arată un mic exemplu de șablon unghiular care utilizează căpușa din spate:

import { Component } from '@angular/core';
@Component({  selector: 'app-root',  template: `    <h1>{{title}}</h1>    <h2>My favorite hero is: {{myHero}}</h2>  `})export class AppComponent {  title="Tour of Heroes";  myHero = 'Windstorm';}

Destructurarea

Destructurarea vă permite să luați părți ale unui obiect sau matrice și să le atribuiți propriilor variabile numite. Pentru mai multe informații despre destructurare, consultați articolul meu despre ITNEXT.

Resurse ES6

Aceasta a fost doar o prezentare rapidă a câtorva dintre noile funcții din ES6. Iată câteva resurse excelente pentru continuarea călătoriei pe calea învățării ES6:

Acest articol se bazează pe o prelegere susținută în martie 2018.