JavaScript ES6 Funktioner

I denne tutorial vil du lære om de nye funktioner i den seneste version af JavaScript.

Hvad er ECMAScript 6 (eller ES6)

ECMAScript 2015 (eller ES6) er den sjette og større udgave af ECMAScript sprog specifikation standard. Det definerer standarden for JavaScript-implementeringen.

ES6 bragte væsentlige ændringer i JavaScript-sproget., Det introducerer flere nye funktioner såsom, blok-scoped variabler, ny løkke til iteration løbet arrays og objekter, skabelon bogstaver, og mange andre forbedringer for at gøre JavaScript programmering lettere og sjovere. I dette kapitel vil vi diskutere nogle af de bedste ES6-funktioner, som du kan bruge i din daglige JavaScript-kodning.

let-nøgleordet

ES6 introducerer det nyelet nøgleord til deklarering af variabler. Før ES6 var den eneste måde at erklære en variabel i JavaScript på var nøgleord., Lad os se, hvad der er forskellen mellem dem er.

Der er to afgørende forskelle mellem var og let. Variabler erklæret med var søgeord funktion scoped og hejst i toppen inden for dens anvendelsesområde, der henviser til, at variabler, der er erklæret med let søgeord blok scoped ({}), og de er ikke hejst.

Block scoping betyder simpelthen, at der oprettes et nyt omfang mellem et par krøllede parenteser, dvs.{}., Derfor, hvis du kan erklære en variabel med let søgeord i en løkke, det eksisterer ikke uden for løkken, som vist i følgende eksempel:

Som du kan se i ovenstående eksempel er den variabel i i den første blok er ikke tilgængelige uden for den for loop. Dette gør det også muligt for os at genbruge det samme variabelnavn flere gange, da dets omfang er begrænset til blokken ({}), hvilket resulterer i mindre variabel erklæring og mere renere kode.,

const-nøgleordet

det nye const nøgleord gør det muligt at definere konstanter. Konstanter er skrivebeskyttede, du kan ikke tildele nye værdier til dem. De er også blok-scoped ligesom let.

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

Men du kan stadig ændre egenskaber for objekt eller array-elementer:

Den til…Loop

den nye for...of loop giver os mulighed for at gentage over arrays eller andre iterbare objekter meget let., Koden inde i løkken udføres også for hvert element i det iterbare objekt. Her er et eksempel:

for...of loop fungerer ikke med objekter, fordi de ikke kan gentages. Hvis du vil gentage over egenskaberne for et objekt, kan du bruge for-in loop.

Skabelonlitteraler

Skabelonlitteraler giver en nem og ren måde at oprette flerlinjestrenge og udføre strenginterpolation. Nu kan vi integrere variabler eller udtryk i en streng på ethvert sted uden besvær.,Skabelonlitteraler oprettes ved hjælp af back-tick (` `) (grav accent) karakter i stedet for de sædvanlige dobbelt-eller enkelt citater. Variabler eller udtryk kan placeres inde i strengen ved hjælp af ${...} syntaks. Undersøg følgende eksempler og se, hvor meget nyttigt det er:

Mens der i ES5, for at opnå den samme, som vi var nødt til at skrive noget som dette:

standardværdier for funktionsparametre

Nu, i ES6 du kan angive standardværdier for funktionsparametre., Det betyder, at hvis ingen argumenter er givet til at fungere, når det kaldes disse standardparametre værdier vil blive brugt. Dette er en af de mest ventede funktioner i JavaScript. Her er et eksempel:

mens vi var i ES5, for at opnå det samme, måtte vi skrive noget som dette:

Pilefunktioner

Pilefunktioner er en anden interessant funktion i ES6. Det giver en mere kortfattet syntaks til at skrive funktionsudtryk ved at fravælge function og return nøgleord.,

Pilefunktioner defineres ved hjælp af en ny syntaks, fat Arro. (=>) notation. Lad os se, hvordan det ser ud:

Som du kan se forrige function og return søgeord i pil funktion erklæring.

Du kan også springe parenteserne over, dvs.() i tilfælde, hvor der er nøjagtigt en parameter, men du skal altid bruge den, når du har nul eller mere end en parameter.,

Hvis der er mere end et udtryk i funktionskroppen, skal du desuden pakke det seler ({}). I dette tilfælde skal du også bruge return erklæring for at returnere en værdi.

Der er flere variationer af, hvordan du kan skrive pilefunktioner. Her er de mest almindeligt anvendte:

Der er en vigtig forskel mellem almindelige funktioner og pilefunktioner., I modsætning til en normal funktion, en pil funktion ikke har sin egen this, det tager this fra den ydre funktion, hvor den er defineret. I JavaScript er this den aktuelle eksekveringskontekst for en funktion.,

for At forstå dette helt klart, lad os se på følgende eksempler:

Omskrivning af det samme eksempel ved hjælp af ES6 skabelon konstanter og pil funktion:

Som du tydeligt kan se, den this nøgleordet i ovenstående eksempel refererer til den kontekst, funktion, der omgiver pil funktion, som er Person, der er objekt (linie-9), i modsætning til det foregående eksempel, hvor det er nævnt at den globale objekt Vindue (linie-9).

klasser

i ECMAScript 5 og tidligere eksisterede klasser aldrig i JavaScript., Klasser introduceres i ES6, der ligner klasser på andre objektorienterede sprog, såsom Java, PHP osv., men de fungerer ikke nøjagtigt på samme måde. ES6-klasser gør det lettere at oprette objekter, implementere arv ved at bruge extends nøgleord og genbruge koden.

i ES6 kan du erklære en klasse ved hjælp af det nye class nøgleord efterfulgt af et klassenavn. Ved konvention klasse navne er skrevet med TitleCase (dvs.kapitalisere det første bogstav i hvert ord).,

i ovenstående eksempel arver firkantet klasse fra rektangel ved hjælp af extends nøgleord. Klasser, der arver fra andre klasser, kaldes afledte klasser eller børneklasser.

Du skal også ringe til super() i børneklassekonstruktøren, før du får adgang til konteksten (this)., For eksempel, hvis du udelader super() og kalder getArea() metode på pladsen-objekt, det vil resultere i en fejl, da getArea() metode kræver adgang til this søgeord.

moduler

før ES6 var der ingen indbygget understøttelse af moduler i JavaScript. Alt inde i en JavaScript-applikation, for eksempel variabler på tværs af forskellige JavaScript-filer, delte det samme omfang.

ES6 introducerer filbaseret modul, hvor hvert modul er repræsenteret af en separat.js fil., Nu kan du bruge export eller import erklæring i et modul for at eksportere eller importere variabler, funktioner, klasser eller andre enheder til/fra andre moduler eller filer.

lad os oprette et modul, dvs.en JavaScript-fil “main.js “og placer følgende kode i den:

Opret nu en anden JavaScript-fil” – app.js ” med følgende kode:

endelig oprette en HTML-fil “test.HTML ” og med følgende kode og åbn denne HTML-fil i din bro .ser ved hjælp af HTTP-protokollen (eller brug localhost). Bemærk også type="module" på script-tag.,

Rest-parametrene

ES6 introducerer rest-parametre, der giver os mulighed for at overføre et vilkårligt antal parametre til en funktion i form af et array. Dette er især nyttigt i situationer, hvor du vil videregive parametre til en funktion, men du har ingen ID.om, hvor mange du har brug for.

en hvileparameter angives ved at præfiksere en navngivet parameter med hvileoperatør (...), dvs.tre prikker. Hvileparameter kan kun være den sidste på listen over parametre, og der kan kun være en hvileparameter., Se på følgende eksempel for at se, hvordan det fungerer:

Når rest-parameteren er den eneste parameter i en funktion, får den alle argumenterne overført til funktionen, ellers får den resten af argumenterne, der overstiger antallet af navngivne parametre.

Spredningsoperatøren

spredningsoperatøren, som også betegnes med (...), udfører den nøjagtige modsatte funktion af resten operatør. Spredningen operatør, der breder sig ud (dvs splittes op) en matrix og passerer værdier i den angivne funktion, som vist i følgende eksempel:

spredningen operatøren kan også bruges til at indsætte elementer i et array til et andet array uden brug af den vifte af metoder som push() unshift() concat() osv.,

Destruktureringsdeklaration Opgave

destruktureringsdeklaration opgave er et udtryk, der gør det let at udtrække værdier fra arrays, eller egenskaber fra objekter, i forskellige variabler ved at give en kortere syntaks.

Der er to slags destructuring tildeling udtryk—array og objekt destructuring tildeling.,gør det samme på bare én linje ved hjælp af array-destruktureringsdeklaration opgave:

Du kan også bruge resten operatør i array destruktureringsdeklaration opgave, som vist her:

objektet destruktureringsdeklaration opgave

I ES5 at udtrække ejendom værdier i et objekt, er vi nødt til at skrive noget som dette:

Men i ES6, du kan udtrække objekt ejendom værdier og tildele dem til de variabler, der er let som dette:

de Fleste af de funktioner, vi har behandlet ovenfor, er understøttet i den seneste version af de store web-browsere som Google Chrome, Mozilla Firefox, Microsoft Kant, Safari, etc.,