ECMAScript 6 - 10 fantastiska nya funktioner

Visste du att JavaScript (tillsammans med JScript och ActionScript) är en implementering av en generell användarscriptspecifikation för kundsidan, kallad ECMAScript? För att göra denna otäcka definition lite mer attraktiv kan vi säga att ECMAScript (eller officiellt ECMA-262) är standarden som definierar hur vi använder JavaScript och vad vi kan åstadkomma med det.

Den senaste 6: e språket, ECMAScript 2015 (eller ES6) är förmodligen den viktigaste uppdateringen sedan den första versionen 1997. Huvudmålet med den senaste versionen har varit att ge bättre stöd för att skapa större applikationer och bibliotek. Det betyder en mer mogen syntax, nya genvägar för att göra kodning enklare och även nya metoder, nyckelord, datatyper och många andra förbättringar.

ES6-dokumentationen är omfattande, om du gillar att läsa mycket, kan du ladda ner hela specifikationerna från ECMA Internationals webbplats. I det här inlägget tar vi en titt på 10 handplockade funktioner, även om ES6 har mycket mer att erbjuda. Om du vill experimentera med det, är ES6 Fiddle ett bra ställe att göra det, och du kan också hitta några exempelkodsutdrag där.

Stöd för ECMAScript 6

Webbläsarförsäljare har gradvis lagt till stöd för funktionerna i ECMAScript 6. Du kan hitta en cool kompatibilitetstabell här om webbläsaren och kompilatorsupport för de nya funktionerna.

Om du är intresserad av ES6-support i Node.js, kolla in dokumenten här.

Även om inte alla funktioner stöds för tillfället kan vi använda transpilrar som Babel för att transpilera vår ES6-kod till ES5. Det finns ett coolt Grunt-plugin för Babel, många fantastiska ES6-plugins för Grunt, och en fantastisk Gulp-Babel-plugin där ute, så lyckligtvis har vi gott om val.

På detta sätt kan vi börja använda den förbättrade syntaxen och möjligheterna, samtidigt som vi inte behöver oroa oss för kompatibilitetsproblem. Nu får vi se funktionerna.

1. Ny låta Nyckelord

ES6 introducerar det nya låta nyckelord som tillåter oss att deklarera lokala variabler inom ramen för ett block, t.ex. ett uttalande, ett uttryck eller en (n inre) funktion. Till exempel kan vi förklara en för loop på följande sätt, använd sedan samma variabelnamn (eftersom dess räckvidd är begränsat till för loop) inuti nästa om påstående:

 för (låt jag = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Vi återanvändar "jag" låt i = x * y

Använda låta sökord leder till en renare och mer användbar kod. Skillnaden mellan låta och var ligger inom ramen för exempelvis en lokal variabel definierad av var sökord kan användas i hela omslutningsfunktionen, medan variabler definieras av låta arbetar bara i sitt eget (under) block. Låta kan också användas globalt, i det här fallet uppträder det på samma sätt som var. Naturligtvis, i ES6 kan vi fortfarande använda var om vi vill.

2. Ny const Nyckelord

Den nya const nyckelord gör det möjligt att deklarera konstanter, även kända som oföränderliga variabler, som vi inte kan vidarebefordra nytt innehåll senare.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Tyst fel, eftersom vi inte kan omfördela ett nytt värde till en konstant

Immutabla variabler är emellertid inte alltid fullständigt oföränderliga i ECMAScript 6, men som om en konstant håller ett objekt kan vi senare ändra värdet av dess egenskaper och metoder. Detsamma gäller för elementen i en 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 fortfarande inte omplacera ett nytt värde till MY_CONSTANT-objektet i ovanstående kodbit, vilket innebär att vi inte kan ändra namnen på egenskaperna och metoderna, en kan inte heller lägga till en ny eller ta bort en befintlig, så vi kan inte göra det följande sak:

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

3. Pilfunktioner

ECMAScript 6 underlättar hur vi skriver anonyma funktioner, som vi helt kan utelämna fungera nyckelord. Vi behöver bara använda den nya syntaxen för pilfunktioner, uppkallad efter => pilsignalen (fet pil), som ger oss en bra genväg.

 // 1. En parameter i ES6 låt summa = (a, b) => a + b; // i ES5 var sum = funktion (a, b) return a + b; ; // 2. Utan parametrar i ES6 låt randomNum = () => Math.random (); // i ES5 var randomNum = function () returnera Math.random (); ; // 3. Utan retur i ES6 låt meddelandet = (namn) => alert ("Hi" + namn + "!"); // i ES5 var message = function (yourName) alert ("Hi" + yourName + "!"); ;

Det finns en viktig skillnad mellan regelbundna och pilfunktioner, det vill säga pilfunktionerna får inte en detta värdet automatiskt som funktioner definierade med fungera sökord gör. Pilfunktioner binda lexiskt de detta värdet till det nuvarande omfånget. Det innebär att vi enkelt kan återanvända detta nyckelord i en inre funktion. I ES5 är det bara möjligt med följande hack:

 // ES5 Hack att använda "detta" nyckelordet i en inre funktion ... addAll: funktion addAll (bitar) var själv = this; _.each (bitar, funktion (bit) self.add (bit);); , ... // ES6 samma inre funktion kan nu använda sin egen "this" ... addAll: funktion addAll (bitar) _.each (bitar, bit => this.add (piece)); , ...

Koden ovan är från Mozilla Hacks

4. Ny spridning Operatör

Den nya spridning Operatören är markerad med 3 punkter (...), och vi kan använda den för att signera platsen för flera förväntade objekt. Ett av de vanligaste användningsfallen hos spridningsoperatören är att infoga elementen i en array i en annan grupp:

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

Vi kan också ta hävstång av spridning operatör i funktionssamtal där vi vill passera i argument från en array:

 låt myArray = [1, 2, 3]; funktionssumma (a, b, c) returnera a + b + c;  console.log (summa (... myArray)); // 6

De spridning Operatören är ganska flexibel, eftersom den kan användas flera gånger i samma array eller funktionssamtal.

5. Standardvärden för parametrar och nya viloparametrar

Goda nyheter, att i ECMAScript 6 kan vi lägga till standardvärden till parametrarna för en funktion. Detta innebär att om vi inte skickar in argument senare i funktionssamtalet kommer standardparametrarna att användas. I ES5 är standardvärdena för parametrar alltid inställda på odefinierad, så den nya möjligheten att ställa dem till vad vi vill är definitivt en stor förbättring av språket.

 funktionssumma (a = 2, b = 4) returnera a + b;  console.log (summa ()); // 6 console.log (summa (3, 6)); // 9

ES6 introducerar också en ny typ av parameter, den viloparametrar. De ser och fungerar på samma sätt som att sprida operatörer. De är praktiska om vi inte vet hur många argument som kommer att skickas senare i funktionssamtalet. Vi kan använda egenskaperna och metoderna för Array-objektet på viloparametrar:

 funktion putInAlphabet (... args) lades sorteras = args.sort (); returnera sorterade;  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 för av Påstående

Med hjälp av det nya för av slinga kan vi lätt återskapa över arrays eller andra iterable objekt. Tillsammans med det nya för av uttalande, ECMAScript 6 introducerar också två nya iterbara objekt, Karta för nyckel / värdekartor och Set för samlingar av unika värden som också kan vara primitiva värden och objektreferenser. När vi använder för av uttalandet exekveras koden inuti blocket för varje element i det iterbara objektet.

 låt myArray = [1, 2, 3, 4, 5]; låt summan = 0; för (låt mig av myArray) sum + = i;  console.log (summa); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Mall Literals

ECMAScript 6 ger oss ett nytt alternativ för strängkoppling. Mall bokstäver Låt oss enkelt skapa mallar där vi kan bädda in olika värden till vilken plats som helst. För att göra så måste vi använda $ ... syntax överallt där vi vill infoga de data som vi kan passera in från variabler, arrays eller objekt på följande sätt:

 låt kund = titel: 'Ms', förnamn: 'Jane', efternamn: 'Doe', ålder: '34'; låt mall = "Kära $ customer.title $ customer.firstname $ customer.surname! Lycklig $ customer.age th födelsedag! '; console.log (mall); // Kära fru Jane Doe! Lycklig 34-årsdag!

8. klasser

ES6 introducerar JavaScript-klasser som bygger på det befintliga prototypbaserade arvet. Den nya syntaxen gör det enklare att skapa objekt, utnyttja arv och återanvända kod. Det kommer också att underlätta för nybörjare som kommer från andra programmeringsspråk för att förstå hur JavaScript fungerar.

I ES6 klassificeras de med den nya klass sökord, och behöver ha en konstruktör() metod som kallas när ett nytt objekt är instantiated genom att använda ny myClass () syntax. Det är också möjligt att utöka nya klasser med klass barnet utökar föräldern syntax som kan vara bekant från andra objektorienterade språk som PHP. Det är också viktigt att veta att klassdeklarationer, till skillnad från funktionella och variabla deklarationer, inte lyftas i ECMAScript 6.

 klasspolygon konstruktör (höjd, bredd) // klasskonstruktor this.name = 'Polygon'; this.height = height; this.width = width;  sayName () // class method console.log ('Hej, jag är en', detta.namn + '.');  låt myPolygon = ny polygon (5, 6); console.log (myPolygon.sayName ()); // Hej, jag är en polygon.

Kod ovan från ES6 Fiddle-exempel, .

9. Moduler

Har du någonsin undrat hur cool det skulle vara om JavaScript var modulärt? Det har naturligtvis funnits lösningar som CommonJS (används i Node.js) eller AMD (Asynchronous Module Definition) (används i RequireJS) för att göra det innan men ES6 introducerar moduler som en inbyggd funktion.

Vi måste definiera varje modul i sin egen fil och använd sedan exportera sökord för att exportera variabler och funktioner till andra filer och importera sökord för att importera dem från andra filer, enligt följande syntax:

 // functions.js funktionskub (a) returnera a * a * a;  funktion cubeRoot (a) returnera Math.cbrt (a);  exportera kub, cubeRoot // eller exportera kub som cb, cubeRoot as cr // app.js import kub, cubeRoot från "functions"; console.log (kub (4)); // 64 console.log (cubeRoot (125)); // 5

Denna lösning är lysande, eftersom koden som lagras i en modul är osynlig från utsidan, och vi behöver bara exportera den del som vi vill få åtkomst till av andra filer. Vi kan göra mycket mer fantastiska saker med ES6-moduler, här kan du hitta en bra och detaljerad förklaring om dem.

10. Massor av nya metoder

ECMAScript 6 introducerar många nya metoder för den befintliga strängprototypen, Array Object, Array Prototype och Math Object. De nya metoderna kan väsentligt förbättra hur vi kan manipulera dessa enheter. Mozilla Dev har bra kodexempel på de nya tilläggen, det är värt att ta tid och grundligt undersöka dem.

Bara för att visa hur cool de verkligen är, här är min favorit: findmetoden för Array-prototypen, som gör det möjligt för oss att testa vissa kriterier på elementen i en array genom att utföra återuppringningsfunktionen på varje element och sedan returnera det första elementet som avkastning Sann.

 funktionen är Primär (element, index, array) var start = 2; medan (starta <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // odefinierad, inte hittad console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Koden ovan från: Mozilla Dev