de Todd Palmer
Noțiuni introductive despre ES6 folosind câteva dintre lucrurile mele preferate
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:
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:
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ă.
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
șiconst
în loc devar
- 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:
-
Aflați ES2015 pe Babel
Aceasta este o prezentare generală a tuturor noilor caracteristici. Deși nu intră în profunzime, aceasta este o pagină excelentă de păstrat ca referință rapidă cu exemple. -
Sfaturi și trucuri ES6 pentru a vă face codul mai curat, mai scurt și mai ușor de citit! de Sam Williams
Acesta este un articol grozav în Free Code Camp’s Publicație medie. -
MPJseria video: Caracteristici JavaScript ES6
Dacă preferați videoclipuri, MPJ este tipul dvs. Nu numai că este bun din punct de vedere tehnic, lucrurile sale sunt chiar distractive. -
ES6 în adâncime seria pe Hacks Mozilla
Aceasta este o serie excelentă în profunzime. - Seria lui Eric Elliott Software de compunere
Citiți aceasta pentru o adevărată provocare. Fiți avertizați, totuși, unele dintre lucrurile lui Eric sunt informatică la nivel de facultate.
Acest articol se bazează pe o prelegere susținută în martie 2018.
#Noțiuni #introductive #despre #ES6 #folosind #câteva #dintre #lucrurile #mele #preferate
Noțiuni introductive despre ES6 folosind câteva dintre lucrurile mele preferate