JavaScript ES6 funktioner (Svenska)

i den här guiden kommer du att lära dig om de nya funktionerna i senaste versionen av JavaScript.

Vad är ECMAScript 6 (eller ES6)

ECMAScript 2015 (eller ES6) är den sjätte och största utgåvan av ECMAScript-språkspecifikationsstandarden. Det definierar standarden för JavaScript-implementeringen.

ES6 medförde betydande ändringar av JavaScript-språket., Det introducerar flera nya funktioner som block-scoped variabler, new loop för iteration över arrays och objekt, Mall literals, och många andra förbättringar för att göra JavaScript programmering enklare och roligare. I det här kapitlet kommer vi att diskutera några av de bästa ES6-funktionerna som du kan använda i din dagliga JavaScript-kodning.

let-sökordet

ES6 introducerar det nyalet – sökordet för att deklarera variabler. Före ES6 var det enda sättet att deklarera en variabel i JavaScript nyckelordet var., Låt oss se vad som är skillnaden mellan dem är.

det finns två kritiska skillnader mellanvar ochlet. Variabler som deklareras med nyckelordetvar är funktionsscoped och hissas högst upp inom dess räckvidd, medan variabler som deklareras med nyckelordet let blockeras ({}) och de inte hissas.

Block scoping betyder helt enkelt att ett nytt tillämpningsområde skapas mellan ett par lockiga fästen, dvs.{}., Om du deklarerar en variabel med nyckelordet let I en slinga finns det därför inte utanför slingan, vilket visas i följande exempel:

som du kan se i ovanstående exempel är variabeln i I det första blocket inte tillgänglig utanför for. Detta gör det också möjligt för oss att återanvända samma variabelnamn flera gånger eftersom dess omfattning är begränsad till blocket ({}), vilket resulterar i mindre variabel deklaration och mer renare kod.,

det första sökordet

det nyaconst sökordet gör det möjligt att definiera konstanter. Konstanter är skrivskyddade, du kan inte tilldela nya värden till dem. De är också block-scoped som let.

const PI = 3.14;console.log(PI); // 3.14PI = 10; // error

Du kan dock fortfarande ändra objektegenskaper eller matriselement:

för…for...of loop tillåter oss att iterera över arrays eller andra objekten mycket lätt., Koden inuti slingan exekveras också för varje element i det tillåtna objektet. Här är ett exempel:

for...of – slingan fungerar inte med objekt eftersom de inte är tillåtna. Om du vill iterera över egenskaperna hos ett objekt kan du använda for-in loop.

Mall Literals

Mall literals ger ett enkelt och rent sätt skapa flera rader strängar och utföra sträng interpolation. Nu kan vi bädda in variabler eller uttryck i en sträng på någon plats utan krångel.,

Template literals skapas med hjälp av Back-tick (` `) (grave accent) tecken i stället för de vanliga dubbla eller enstaka citat. Variabler eller uttryck kan placeras inuti strängen med syntaxen ${...}. Jämför följande exempel och se hur mycket användbart det är:

i ES5, för att uppnå samma sak var vi tvungna att skriva något så här:

standardvärden för funktionsparametrar

nu, i ES6 kan du ange standardvärden till funktionsparametrarna., Detta innebär att om inga argument lämnas för att fungera när det kallas dessa standardparametrar värden kommer att användas. Detta är en av de mest efterlängtade funktionerna i JavaScript. Här är ett exempel:

medan i ES5, för att uppnå samma var vi tvungna att skriva något så här:

Pilfunktioner

Pilfunktioner är en annan intressant funktion i ES6. Det ger en mer kortfattad syntax för skrivfunktion uttryck genom att välja utfunction ochreturn nyckelord.,

Pilfunktioner definieras med en ny syntax, fat arrow (=>) notation. Låt oss se hur det ser ut:

som du kan se thre är ingenfunction ochreturn nyckelord i Arrow funktionsdeklaration.

Du kan också hoppa över parenteserna, dvs () om det finns exakt en parameter, men du måste alltid använda den när du har noll eller mer än en parameter.,

dessutom, om det finns mer än ett uttryck i funktionskroppen, måste du linda in det hängslen ({}). I det här fallet måste du också använda return – satsen för att returnera ett värde.

det finns flera varianter av hur du kan skriva pilfunktioner. Här är de vanligaste:

det finns en viktig skillnad mellan vanliga funktioner och pilfunktioner., Till skillnad från en normal funktion har en pilfunktion inte sin egen this, det tar this från den yttre funktionen där den definieras. I JavaScript är this den aktuella körningskontexten för en funktion.,

för att förstå detta tydligt, låt oss kolla in följande exempel:

skriva om samma exempel med hjälp av ES6 mallliteraler och pilfunktion:

som du tydligt kan se, this nyckelordet i ovanstående exempel hänvisar till sammanhanget för funktionen som omsluter pilfunktionen som är Personobjekt (rad nr-9), till skillnad från det tidigare exemplet där det hänvisas till det globala objektfönstret (rad nr-9).

klasser

i ECMAScript 5 och tidigare fanns klasser aldrig i JavaScript., Klasser införs i ES6 som liknar klasser i andra objektorienterade språk såsom Java, PHP, etc., men de fungerar inte exakt på samma sätt. ES6 klasser gör det lättare att skapa objekt, implementera arv genom att använda nyckelordet extends och återanvända koden.

i ES6 kan du deklarera en klass med det nya class nyckelordet följt av ett klassnamn. Genom konventionen klassnamn skrivs i Titelfall (dvs kapitalisera den första bokstaven i varje ord).,

i exemplet ovan ärver Kvadratklassen från rektangel med nyckelordetextends. Klasser som ärver från andra klasser kallas härledda klasser eller barnklasser.

Du måste också ringa super() I barnklasskonstruktören innan du öppnar sammanhanget (this)., Om du till exempel utelämnar metoden super() och anropar metoden getArea() på kvadratiskt objekt resulterar det i ett fel, eftersom metoden getArea() kräver åtkomst till nyckelordet this.

moduler

innan ES6 fanns det inget inbyggt stöd för moduler i JavaScript. Allt i ett JavaScript-program, till exempel variabler över olika JavaScript-filer, delade samma omfattning.

ES6 introducerar filbaserad modul, där varje modul representeras av en separat.js – fil., Nu kan du använda export eller import – satsen i en modul för att exportera eller importera variabler, funktioner, klasser eller någon annan enhet till/från andra moduler eller filer.

låt oss skapa en modul dvs en JavaScript-fil ”main.js” och placera följande kod i den:

skapa nu en annan JavaScript-fil ”app.js” med följande kod:

slutligen skapa en HTML-fil ”test.html ” och med följande kod och öppna den här HTML-filen i din webbläsare med hjälp av HTTP-protokollet (eller använd localhost). Lägg också märke tilltype="module" på scripttaggen.,

Restparametrarna

ES6 introducerar restparametrar som tillåter oss att skicka ett godtyckligt antal parametrar till en funktion i form av en array. Detta är särskilt användbart i situationer när du vill skicka parametrar till en funktion men du har ingen aning om hur många du behöver.

en restparameter anges genom att prefix en namngiven parameter med rest operator (...) dvs. tre punkter. Restparameter kan bara vara den sista i listan över parametrar, och det kan bara finnas en restparameter., Ta en titt på följande exempel för att se hur det fungerar:

När Rest-parametern är den enda parametern i en funktion får den alla argument som skickas till funktionen, annars får den resten av argumenten som överstiger antalet namngivna parametrar.

spread-operatören

spread-operatören, som också betecknas med (...), utför den exakta motsatta funktionen hos vilooperatören. Spread-operatören sprider ut (dvs. delar upp) en matris och överför värdena till den angivna funktionen, som visas i följande exempel:

spread-operatören kan också användas för att infoga elementen i en matris i en annan matris utan att använda matrismetoderna som push(), unshift() concat(), etc.,

Destructuring Assignment

destructuring assignment är ett uttryck som gör det enkelt att extrahera värden från matriser, eller egenskaper från objekt, till olika variabler genom att tillhandahålla en kortare syntax.

det finns två typer av förstöringstilldelningsuttryck—arrayen och objektförstöringstilldelningen.,gör samma sak på bara en rad med hjälp av arrayen destructuring assignment:

Du kan också använda rest operator i arrayen destructuring assignment, som visas här:

objektet destructuring assignment

i ES5 för att extrahera egenskapsvärdena för ett objekt som vi behöver skriva något så här:

men i ES6 kan du extrahera objektets egenskapsvärden och tilldela dem till variablerna enkelt så här:

de flesta funktioner vi har diskuterat ovan stöds i den senaste versionen av de stora webbläsarna som Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, etc.,