JavaScript ES6 bringer nye syntaks og nye fantastiske funksjoner for å gjøre koden mer moderne og mer lesbar. Det lar deg skrive mindre kode og gjøre mer. ES6 introduserer oss til mange flotte funksjoner som for eksempel pil funksjoner, mal strenger, klasse ødeleggelse, Moduler… og mer. La oss ta en titt.

const og la

const er et nytt søkeord i ES6 for deklarere variabler. const er kraftigere enn var. Når det brukes, variabel kan ikke tilordnes på nytt., Med andre ord, det er en uforanderlig variabel, bortsett fra når det brukes med objekter.

Dette er virkelig nyttig for målretting av velgere. For eksempel, når vi har en enkelt knapp som utløser en hendelse, eller når du ønsker å velge et HTML-element i JavaScript, bruk const i stedet for var. Dette er fordi var er ‘heist’. Det er alltid best å bruke const når du ikke ønsker å tilordne variabelen .,

I koden ovenfor, const vil ikke endre seg, og det kan ikke tilordnes på nytt. Hvis du prøver å gi det en ny verdi, det vil komme tilbake med en feilmelding.

let kan tilordnes på nytt og ta nye verdien. Det skaper en foranderlig variabel.

let er det samme som const i at begge er blokkert-scope. Det betyr at variabelen er bare tilgjengelig innenfor sitt virkeområde.,

Pil funksjoner

pil-funksjonen er virkelig fantastisk, og gjør koden mer lesbar, mer strukturert, og ser ut som moderne kode. I stedet for å bruke dette:

Bruk denne:

Som du ser, pil-funksjonen virker mer lesbar og rent! Du trenger ikke å bruke den gamle syntaks lenger.

du kan Også bruke Pil-funksjonen med map, filter, og reduce innebygde funksjoner.,

kartet funksjon med piler ser mer tydelig og lesbar enn map i ES5. Med ES6 du kan skrive kortere og smartere kode. Du kan bruke det samme med filter og reduce.

Mal Verdiane

Mal verdiane eller mal strenger er ganske kult. Vi trenger ikke å bruke pluss – ( + ) operatøren å sette sammen strenger, eller når vi ønsker å bruke en variabel i en streng.,

Den gamle syntaks:

Med nye ES6 syntaks:

Så enkelt! Det er en veldig stor forskjell mellom den gamle syntaks og ES6. Når du spiller med strenger, bokstavelig streng i ES6 ser mer organisert og strukturert enn ES5.

Standard parametere

Når jeg jobber i PHP, jeg pleier å bruke standard parametere. Dette tillater deg å definere en parameter på forhånd.,

Så, når du glemmer å skrive parameter, det vil ikke returnere en udefinert feil fordi parameteren er allerede definert i standard. Så når du kjører funksjonen din med en savnet parameter, det vil ta verdien av standard parameter t, og det vil ikke returnere en feil!

Se på dette eksempelet:

funksjonen ovenfor gir udefinert, fordi vi glemte å gi det til den andre parameteren age.,

Men hvis vi brukt standard parameter, det vil ikke gå tilbake udefinert, og det vil bruke sin verdi når vi glemmer å tildele en parameter!

Som du ser, funksjon returnerer en verdi selv om vi tapte den andre parameteren. Nå med standard parameter kan vi håndtere feil i forveien.

Array og objekter destruering

Ødeleggelse gjør tilordning av verdier til en matrise eller objektet til den nye variabelen lettere.,

Den gamle syntaks:

Med ES6 syntaks:

Med ES5, vi må tilordne hver verdi til hver variabel. Med ES6, vi bare sette våre verdier i klammeparentes å få noen eiendom på objektet.

Merk: hvis du vil tilordne en variabel som ikke er identisk med navnet på eiendommen, vil det gå tilbake udefinert. Hvis For eksempel navnet på egenskapen som er name og vi tilordne den til en username variabel, vil den gå tilbake udefinert.,

Vi har alltid å gi variabelen navnet det samme som navnet på eiendommen. Men i tilfelle vi ønsker å gi nytt navn til den variable, kan vi bruke kolon : i stedet.

For matrisen, og vi bruker samme syntaks som objekt. Vi har bare for å erstatte den klammeparentes med hakeparenteser.

Importer og eksporter

ved Hjelp av import og export i JavaScript-program som gjør det mer kraftig., De tillater deg å opprette egne og gjenbrukbare komponenter.

Hvis du er kjent med alle JavaScript-MVC-rammeverk, vil du se at de bruker import og export for å håndtere komponenter mesteparten av tiden. Så hvordan gjør de virkelig fungerer?

Det er enkelt! export kan du eksportere en modul som skal brukes i en annen JavaScript komponent. Vi bruker import for å importere modulen for å bruke det i vår komponent.

For eksempel, vi har to filer., Det første er navnet detailComponent.js og den andre heter homeComponent.js.

I detailComponent.js vi kommer til å eksportere detail funksjon.

Og hvis vi ønsker å bruke denne funksjonen i homeComponent.js, vil vi bare bruke import.

Hvis vi ønsker å importere mer enn én modul, vi bare sette dem i klammeparentes.,

Så kult, er det ikke?!

Løfter

Løftene er en ny funksjon i ES6. Det er en metode for å skrive asynkron kode. Den kan brukes når, for eksempel, vi ønsker å hente data fra en API, eller når vi har en funksjon som tar tid å bli henrettet. Lover å gjøre det enklere å løse problemet, så la oss lage vår første Løftet!

Hvis du logger av konsollen, vil den gå tilbake et Løfte. Så, hvis vi ønsker å utføre en funksjon etter at dataene er hentet, vil vi bruke et Løfte., Løftet tar to parametere: resolve og reject for å håndtere en forventet feil.

Merk: hente funksjonen returnerer et Løfte seg selv!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

hvis du Nå logge konsollen vil den returnere et array av data.

Resten parameter og Spre operatør

resten parametre er brukt for å få argument i en matrise og returnerer en ny matrise.,

spredningen operatøren har samme syntaks som resten parameter, men spredningen operatøren tar Matrisen i seg selv og ikke bare argumentene. Vi kan bruke Spredning parameter for å få verdiene i en Array, i stedet for å bruke en for-løkke eller en annen metode.

Klasser

Klasser er kjernen av objekt-orientert programmering (OOP). De gjør koden din mer sikker og innkapslet. Ved hjelp av klasser gir din kode en fin struktur og holder det orientert.,

for Å lage en klasse, kan du bruke class nøkkelord etterfulgt av navnet på klassen med to klammeparentes.

Nå kan vi få tilgang til class metoder og egenskaper ved hjelp av new søkeord.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

for Å arve fra en annen klasse, kan du bruke extends nøkkelord etterfulgt av navnet på den klassen du ønsker å arve fra.,

Du kan lære mer om Klasser her.

ES6 har andre fantastiske funksjoner — du kan se dem her.

Konklusjon

jeg håper dere fant denne artikkelen nyttig, og jeg håper jeg var i stand til å introdusere deg noen av de ES6 funksjoner. Hvis så, må du abonnere på denne e-post-liste for å lære mer om Front-end emner. Takk for din tid.

forresten, jeg har i det siste arbeidet med en sterk gruppe av programvare ingeniører for en av mine mobile applikasjoner., Organisasjonen var stor, og produktet ble levert svært raskt, mye raskere enn andre bedrifter og frilansere jeg har jobbet med, og jeg tror jeg kan ærlig anbefale dem til andre prosjekter der ute. Skyt meg en e-post hvis du ønsker å komme i kontakt — [email protected].