ECMAScript 6 - 10 fantastiske nye funktioner

Vidste du, at JavaScript (sammen med JScript og ActionScript) er en implementering af en generel bruger-klientspecifikationsspecifikation kaldet ECMAScript? For at gøre denne ubehagelige definition lidt mere attraktiv, kan vi sige, at ECMAScript (eller officielt ECMA-262) er standarden, der definerer, hvordan vi bruger JavaScript, og hvad vi kan opnå med det.

Den seneste 6. udgave af sproget, ECMAScript 2015 (eller ES6) er sandsynligvis den mest betydningsfulde opdatering siden den første version i 1997. Hovedformålet med den seneste udgivelse har været at yde en bedre støtte til at skabe større applikationer og biblioteker. Dette betyder en mere moden syntaks, nye genveje, der letter kodningen, og også nye metoder, søgeord, datatyper og mange andre forbedringer.

ES6-dokumentationen er omfattende. Hvis du kan lide at læse meget, kan du downloade hele specifikationerne fra ECMA International's websted. I dette indlæg vil vi se på 10 håndplukkede funktioner, selv om ES6 har meget mere at tilbyde. Hvis du vil eksperimentere med det, er ES6 Fiddle et godt sted at gøre det, og du kan også finde nogle prøvekodeuddrag der.

Støtte til ECMAScript 6

Browserleverandører har gradvist tilføjet support til funktionerne i ECMAScript 6. Du kan finde en cool kompatibilitetstabel her om browser og compiler support til de nye funktioner.

Hvis du er interesseret i ES6-support i Node.js, skal du tjekke dokumenterne her.

Selv om ikke alle funktioner understøttes i øjeblikket, kan vi bruge transpilere som Babel til at transpilere vores ES6-kode til ES5. Der er et køligt Grunt-plugin til Babel, mange fantastiske ES6-plugins til Grunt og et fantastisk Gulp-Babel-plugin derude, så heldigvis har vi masser af valg.

På den måde kan vi begynde at bruge den forbedrede syntaks og kapaciteter, mens vi ikke behøver at bekymre os om kompabilitetsproblemer. Lad os nu se funktionerne.

1. Ny lade Søgeord

ES6 introducerer den nye lade søgeord, der giver os mulighed for at erklære lokale variabler inden for rammerne af en blok, f.eks. en erklæring, et udtryk eller en (n indre) funktion. For eksempel kan vi erklære en til loop på følgende måde, og genbruge det samme variabelnavn (da dens anvendelsesområde er begrænset til til loop) inde i det næste hvis udmelding:

 for (lad jeg = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Vi genbruger "jeg" lad i = x * y

Bruger lade Søgeord fører til en renere og mere brugbar kode. Forskellen på lade og Var er i anvendelsesområdet, for eksempel en lokal variabel defineret af Var Søgeord kan bruges i hele omsluttende funktion, mens variabler defineret af lade arbejder kun i deres egen (under) blok. Lade kan også bruges globalt, i dette tilfælde opfører den sig på samme måde som Var. Selvfølgelig, i ES6 kan vi stadig bruge Var hvis vi vil.

2. Ny konst Søgeord

Den nye konst søgeord gør det muligt at erklære konstanter, også kendt som uforanderlige variabler, som vi ikke kan omfordele nyt indhold senere.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Silent fejl, da vi ikke kan omfordele en ny værdi til en konstant

Immutable variabler er dog ikke altid fuldt ud uændrede i ECMAScript 6, men som om en konstant har et objekt, kan vi senere ændre værdien af ​​dets egenskaber og metoder. Det samme gælder for elementerne i et array.

 const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22

Vi kan stadig ikke direkte omfordele en ny værdi til MY_CONSTANT-objektet i ovenstående kodestykke, hvilket betyder, at vi ikke kan ændre navnene på egenskaberne og metoderne, og det kan heller ikke tilføjes en ny eller slette en eksisterende, så vi kan ikke gøre det følgende ting:

 MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // fejl

3. Pilfunktioner

ECMAScript 6 letter, hvordan vi skriver anonyme funktioner, som vi helt kan udelade fungere søgeord. Vi skal kun bruge den nye syntaks for pil funktioner, opkaldt efter => piletegn (fed pil), der giver os en stor genvej.

 // 1. En parameter i ES6 lad summen = (a, b) => a + b; // i ES5 var sum = funktion (a, b) return a + b; ; // 2. Uden parametre i ES6 lad randomNum = () => Math.random (); // i ES5 var randomNum = function () return Math.random (); ; // 3. Uden retur i ES6, lad besked = (navn) => alarm ("Hej" + navn + "!"); // i ES5 var message = funktion (yourName) alert ("Hi" + yourName + "!"); ;

Der er en vigtig forskel mellem regulære og pilfunktioner, det vil sige pilfunktioner modtager ikke a dette værdi automatisk som funktioner defineret med fungere søgeord gør. Pil funktioner bindes leksisk det dette værdi til det nuværende omfang. Det betyder, at vi let kan genbruge dette søgeord i en indre funktion. I ES5 er det kun muligt med følgende hack:

 // ES5 Hack for at bruge "dette" søgeordet i en indre funktion ... addAll: funktion addAll (stykker) var self = this; _.each (stykker, funktion (stykke) self.add (piece);); , ... // ES6 den samme indre funktion kan nu bruge sin egen "denne" ... addAll: funktion addAll (stykker) _.each (stykker, stykke => this.add (piece)); , ...

Koden ovenfor er fra Mozilla Hacks

4. Ny sprede Operatør

Den nye sprede Operatøren er markeret med 3 prikker (...), og vi kan bruge den til at underskrive stedet for flere forventede elementer. Et af de mest anvendte tilfælde af spredningsoperatøren er at indsætte elementerne i et array i et andet array:

 lad myArray = [1, 2, 3]; lad newArray = [... myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

Vi kan også tage løftestang af sprede operatør i funktionsopkald, hvor vi vil passere i argumenter fra en matrix:

 lad myArray = [1, 2, 3]; funktions sum (a, b, c) return a + b + c;  console.log (sum (... myArray)); // 6

Det sprede Operatøren er ret fleksibel, da den kan bruges flere gange i samme array eller funktionsopkald.

5. Standardværdier for parametre og nye hvileparametre

Gode ​​nyheder, at i ECMAScript 6 kan vi tilføje standardværdier til parametrene for en funktion. Dette betyder, at hvis vi ikke sender argumenter senere i funktionsopkaldet, vil standardparametrene blive brugt. I ES5 er standardværdierne for parametre altid indstillet til undefined, så den nye mulighed for at sætte dem til hvad vi vil, er helt sikkert en stor forbedring af sproget.

 funktions sum (a = 2, b = 4) return a + b;  console.log (sum ()); // 6 console.log (sum (3, 6)); // 9

ES6 introducerer også en ny type parameter, den hvileparametre. De ser og arbejder på samme måde som spredningsoperatører. De er nyttige, hvis vi ikke ved, hvor mange argumenter der skal sendes senere i funktionsopkaldet. Vi kan bruge egenskaberne og metoderne til Array-objektet på hvileparametre:

 funktion putInAlphabet (... args) lad sorteret = args.sort (); returneres sorteret;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t

6. Ny for ... af Udmelding

Med hjælp fra den nye for ... af loop vi kan let gentage over arrays eller andre iterable objekter. Sammen med den nye for ... af erklæring, ECMAScript 6 introducerer også to nye iterable objekter, Kort for nøgle / værdikort og Sæt for samlinger af unikke værdier, som også kan være primitive værdier og objektreferencer. Når vi bruger for ... af erklæringen, koden i blokken udføres for hvert element i den iterable objekt.

 lad myArray = [1, 2, 3, 4, 5]; lad summen = 0; for (lad mig af myArray) sum + = i;  console.log (sum); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Skabelon Literals

ECMAScript 6 giver os et nyt alternativ til strengforbindelser. Skabelon bogstaver lad os nemt oprette skabeloner, hvor vi kan integrere forskellige værdier til ethvert sted, vi ønsker. For at gøre det skal vi bruge $ ... syntax overalt, hvor vi vil indsætte de data, som vi kan passere ind fra variabler, arrayer eller objekter på følgende måde:

 lad kunde = titel: 'Ms', fornavn: 'Jane', efternavn: 'Doe', alder: '34'; lad skabelon = 'Kære $ customer.title $ customer.firstname $ customer.sername! Glad $ customer.age fødselsdag! '; console.log (template); // Kære Ms Jane Doe! Glad 34 års fødselsdag!

8. Klasser

ES6 introducerer JavaScript klasser, der er bygget på den eksisterende prototype-baserede arv. Den nye syntaks gør det mere ligetil at oprette objekter, udnytte arv og genbruge kode. Det vil også gøre det nemmere for begyndere, der kommer fra andre programmeringssprog for at forstå, hvordan JavaScript fungerer.

I ES6 klasser er deklareret med den nye klasse søgeord, og skal have en constructor () metode, der kaldes, når en ny genstand er instantiated ved at bruge ny myClass () syntaks. Det er også muligt at udvide nye klasser med klasse barn udvider moderselskabet syntaks der kan være kendt fra andre objektorienterede sprog som PHP. Det er også vigtigt at vide, at i modsætning til funktions- og variable erklæringer hæves klasseerklæringerne IKKE i ECMAScript 6.

 klasse polygon konstruktør (højde, bredde) // klasse constructor this.name = 'Polygon'; this.height = height; this.width = width;  sayName () // class method console.log ('Hej, jeg er en', dette.navn + '.');  lad myPolygon = nyt polygon (5, 6); console.log (myPolygon.sayName ()); // Hej, jeg er en polygon.

Kode ovenfor fra ES6 Fiddle Eksempler, .

9. Moduler

Har du nogensinde spekuleret på, hvor cool det ville være, hvis JavaScript var modulært? Selvfølgelig har der været løsninger som CommonJS (bruges i Node.js) eller AMD (Asynchronous Module Definition) (bruges i RequireJS) for at gøre det før, men ES6 introducerer moduler som en indbygget funktion.

Vi skal definere hvert modul i sin egen fil, og brug derefter eksport søgeord for at eksportere variabler og funktioner til andre filer og importere søgeord for at importere dem fra andre filer, i henhold til følgende syntaks:

 // functions.js funktion kube (a) return a * a * a;  funktion cubeRoot (a) return Math.cbrt (a);  eksport kube, cubeRoot // eller: eksporter kube som cb, cubeRoot as cr // app.js import kube, cubeRoot fra 'funktioner'; console.log (terning (4)); // 64 console.log (cubeRoot (125)); // 5

Denne løsning er strålende, da koden gemt i et modul er usynlig udefra, og vi skal kun eksportere den del, som vi ønsker at få adgang til af andre filer. Vi kan gøre meget mere fantastiske ting med ES6-moduler, her kan du finde en stor og detaljeret forklaring om dem.

10. Masser af nye metoder

ECMAScript 6 introducerer mange nye metoder til den eksisterende String Prototype, Array Object, Array Prototype og Math Object. De nye metoder kan betydeligt forbedre den måde, hvorpå vi kan manipulere disse enheder. Mozilla Dev har gode kodeeksempler på de nye tilføjelser, det er værd at tage tid og grundigt undersøge dem.

Bare for at vise, hvor cool de virkelig er, her er min favorit: findmetoden til Array prototypen, som gør det muligt for os at teste visse kriterier på elementerne i et array ved at udføre tilbagekaldsfunktionen på hvert element og derefter returnere det første element, der vender tilbage rigtigt.

 funktion erPrime (element, indeks, array) var start = 2; mens (start <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, ikke fundet console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Koden ovenfor fra: Mozilla Dev