JavaScript ES6 Funksjoner

I denne opplæringen vil du lære om de nye funksjonene i siste versjon av JavaScript.

Hva er ECMAScript 6 (eller ES6)

ECMAScript 2015 (eller ES6) er den sjette og store utgaven av ECMAScript språk spesifikasjon standard. Den definerer standard for JavaScript gjennomføring.

ES6 gitt betydelige endringer i JavaScript språk., Det introduserer flere nye funksjoner, for eksempel, block-omfattet variabler, nye loop for iterating over tabeller og objekter, mal verdiane, og mange andre forbedringer for å gjøre JavaScript programmering enklere og mer moro. I dette kapittelet vil vi diskutere noen av de beste ES6 funksjoner som du kan bruke i din hverdag JavaScript koding.

la Søkeord

ES6 introduserer den nye let søkeord for å deklarere variabler. Før ES6, den eneste måten å deklarere en variabel i JavaScript ble var søkeord., La oss se hva som er forskjellen mellom dem er.

Det er to kritiske forskjeller mellom var og let. Variabler deklarert med var søkeord er funksjon-omfattet og heist på toppen innen sitt virkeområde, mens variabler deklarert med let søkeord er blokker som omfattet ({}), og de er ikke heist.

Blokker scoping rett og slett betyr at en ny omfang er opprettet mellom et par av klammeparentes dvs. {}., Derfor, hvis du deklarerer en variabel med let søkeord i en løkke, som om det ikke eksisterer utenfor løkken, som vist i følgende eksempel:

Som du kan se i eksempelet ovenfor variabelen i i den første blokka er ikke tilgjengelig utenfor for repeterende. Dette gjør oss også i stand til å bruke samme variabel navn flere ganger som sitt virkeområde er begrenset til å blokkere ({}), noe som resulterer i mindre variabel erklæring og mer renere kode.,

const Søkeord

ny const søkeord gjør det mulig å definere konstanter. Konstanter er skrivebeskyttet, kan du ikke tildele nye verdier til dem. De er også blokkere-som omfattet let.

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

Imidlertid kan du fortsatt endre objektet egenskaper eller matrise som inneholder elementer:

for…for Loop

ny for...of loop gir oss muligheten til å iterere over matriser eller andre iterable objekter veldig enkelt., Også, koden inne i løkken utføres for hvert element i iterable objekt. Her er et eksempel:

for...of loop fungerer ikke med objekter fordi de ikke er iterable. Hvis du ønsker å iterere over egenskapene til et objekt du kan bruke for-in repeterende.

Mal Verdiane

Mal verdiane gir en enkel og ren måte å lage multi-line strenger og utføre streng interpolasjon. Nå kan vi legge inn variabler eller uttrykk inn i en streng på hvilket som helst sted uten problemer.,

Mal verdiane er opprettet ved hjelp av back-tick (` `) (grav aksent) karakter i stedet for den vanlige doble eller enkle anførselstegn. Variabler eller uttrykk kan være plassert på innsiden av strengen ved hjelp av ${...} syntaks. Sammenlign følgende eksempler og se hvor mye nyttig det er:

Mens i ES5, for å oppnå den samme som vi hadde til å skrive noe sånt som dette:

standardverdier for Funksjon Parametere

Nå, i ES6 du kan angi standardverdier for funksjonen parametere., Dette betyr at hvis ingen argumenter er forutsatt å fungere når det er kalt disse standard parametere verdier vil bli brukt. Dette er en av de mest etterlengtede funksjoner i JavaScript. Her er et eksempel:

Mens i ES5, for å oppnå den samme som vi hadde til å skrive noe sånt som dette:

Pil Funksjoner

Pil Funksjoner er en annen interessant funksjon i ES6. Det gir en mer konsis syntaksen for å skrive-funksjonen uttrykk ved å velge ut function og return søkeord.,

Pil funksjonene er definert ved hjelp av en ny syntaks, fett piltastene (=>) notasjon. La oss se hvordan det ser ut:

Som du kan se det er ingen function og return søkeord i pil-funksjonen erklæring.

Du kan også hoppe over parentes dvs. () i tilfelle når det er nøyaktig ett parameter, men du vil alltid ha behov for å bruke det når du har null eller mer enn én parameter.,

i Tillegg, hvis det er mer enn ett uttrykk i funksjon kroppen, trenger du å bryte den tannregulering ({}). I dette tilfellet må du også bruke return statement til å returnere en verdi.

Det er flere varianter av hvordan du kan skrive pil funksjoner. Her er de mest brukte:

Det er en viktig forskjell mellom vanlig funksjoner og pil funksjoner., I motsetning til en normal funksjon, en pil funksjonen ikke har sin egen this, det tar this fra den ytre funksjonen, hvor det er definert. I JavaScript, this er gjeldende gjennomføring kontekst av en funksjon.,

for Å forstå dette helt klart, la oss se på følgende eksempler:

å Skrive den samme eksempel ved hjelp av ES6 mal verdiane og pil funksjon:

Som du kan tydelig se den this søkeord i eksempelet ovenfor viser til sammenheng med funksjon som omslutter pil-funksjon som er Person-objekt (linje ingen-9), i motsetning til det forrige eksemplet, der det refereres til det globale objektet Vindu (linje ingen-9).

Klasser

I ECMAScript 5 og tidligere, klasser ble aldri har eksistert i JavaScript., Klassene er innført i ES6 som ser lik klasser i andre objektorienterte språk, som for eksempel Java, PHP, osv. imidlertid har de ikke fungerer på nøyaktig samme måte. ES6 klasser gjøre det enklere å opprette objekter, implementere arv ved å bruke extends søkeord, og gjenbruk av kode.

I ES6 du kan deklarere en klasse med den nye class nøkkelord etterfulgt av en klasse-navn. Konvensjonen er klasse navn er skrevet i TitleCase (dvs. bruk av stor forbokstav i hvert ord).,

I eksempelet ovenfor Torget klasse som arver fra Rektangel ved å bruke extends søkeord. Klasser som arver fra andre klasser er referert til som avledet klasser eller barn klasser.

du må Også ringe super() i barnets klasse constructor før du går til konteksten (this)., For eksempel, hvis du utelater super() og ringe getArea() metode på plassen objekt vil det resultere i en feil, siden getArea() metoden krever tilgang til this søkeord.

Moduler

Før ES6, var det ingen innebygd støtte for moduler i JavaScript. Alt inne i en JavaScript-program, for eksempel variabler på tvers av ulike JavaScript-filer, delte samme omfang.

ES6 introduserer fil basert modul, der hver modul er representert ved en egen .js – filen., Nå kan du bruke export eller import uttalelse i en modul for å eksportere eller importere variabler, funksjoner, klasser eller noen annen enhet til/fra andre moduler eller filer.

La oss lage en modul dvs. en JavaScript-fil «main.js» og legger inn følgende kode:

Nå kan du opprette en annen JavaScript-fil » – appen.js» med følgende kode:

til Slutt lage en HTML-fil «test.html» og med følgende kode og åpne HTML-filen i nettleseren ved hjelp av HTTP-protokollen (eller bruke localhost). Legg også merke til type="module" skript-tag.,

Resten Parametere

ES6 introduserer resten parametre som tillater oss å passere et vilkårlig antall parametre til en funksjon i form av en matrise. Dette er særlig nyttig i situasjoner når du ønsker å sende parametere til en funksjon, men du har ingen anelse om hvor mange du trenger.

En resten parameteren er angitt av prefixing en navngitt parameter med resten operatøren (...) dvs. tre prikker. Resten parameteren kan bare være den siste i listen over parametre, og det kan bare være én resten parameter., Ta en titt på følgende eksempel, for å se hvordan det fungerer:

Når resten parameteren er den eneste parameteren i en funksjon, blir alle argumentene som sendes til funksjonen, ellers blir resten av argumentene som overstiger antall navngitte parametre.

Spredningen Operatør

spredningen operatør, noe som er også merket med (...), utfører den motsatte funksjon av resten operatør. Spredningen operatør sprer seg ut (dvs. deler opp) en matrise og går inn verdier i den angitte funksjon, som vist i følgende eksempel:

spredningen operatøren kan også brukes for å sette inn elementer av en tabell til en annen matrise uten å bruke array metoder som push(), unshift() concat(), osv.,

Destructuring Oppdraget

destructuring oppdrag er et uttrykk som gjør det enkelt å hente ut verdier fra tabeller, eller egenskaper på objekter, inn i forskjellige variabler ved å gi en kortere syntaks.

Det er to typer destructuring oppdrag uttrykk—matrisen og objekt destructuring oppdrag.,gjør det samme på bare en linje ved hjelp av matrisen destructuring oppdrag:

Du kan også bruke resten operatør i tabellen destructuring oppdrag, som vist her:

objektet destructuring oppdraget

I ES5 å trekke ut holderen verdier av et objekt vi trenger å skrive noe sånt som dette:

Men i ES6, du kan trekke ut objektet eiendom verdier og tilordne dem til de variablene enkelt som dette:

de Fleste av de funksjonene vi har diskutert ovenfor er støttet i nyeste versjonen av de store nettlesere som Google Chrome, Mozilla Firefox, Microsoft Kanten, Safari, etc.,