JavaScript ES6 bringer ny syntaks og nye fantastiske funktioner til at gøre din kode mere moderne og mere læsbar. Det giver dig mulighed for at skrive mindre kode og gøre mere. ES6 introducerer os til mange fantastiske funktioner som pil funktioner, skabelon strenge, klasse ødelæggelse, moduler … og meget mere. Lad os se.

const og lad

const er et nyt søgeord i ES6 for at erklære variabler. const er mere kraftfuld end var. Når den er brugt, kan variablen ikke tildeles igen., Med andre ord er det en uforanderlig variabel, undtagen når den bruges med objekter.

Dette er virkelig nyttigt til målretning af selektorerne. For eksempel, når vi har en enkelt knap, der fyrer en begivenhed, eller når du vil vælge et HTML-element i JavaScript, skal du bruge const i stedet for var. Dette skyldes, at var er ‘hejst’. Det foretrækkes altid at bruge const, når du ikke vil tildele variablen igen .,

I koden ovenfor, const vil ikke ændre sig og kan ikke overdrages. Hvis du forsøger at give det en ny værdi, vil det returnere dig en fejl.

let kan blive overført og tage nye værdi. Det skaber en foranderlig variabel.

let er det samme som const, idet begge er blokeret-omfang. Det betyder, at variablen kun er tilgængelig inden for dens anvendelsesområde.,

Pilefunktioner

pilfunktionen er virkelig fantastisk, og gør din kode mere læsbar, mere struktureret og ligner moderne kode. I stedet for at bruge dette:

Brug denne:

Som du kan se, pil funktion virker mere læsbar og ren! Du behøver ikke at bruge den gamle syntaks længere.

du kan Også bruge Pil funktion med map filter og reduce indbyggede funktioner.,

kortfunktion med pile, der ser mere klart og læsbart end map i ES5. Med ES6 kan du skrive kortere og smartere kode. Du kan bruge det samme med filter og reduce.

Skabelonlitteraler

Skabelonlitteraler eller skabelonstrenge er ret seje. Vi behøver ikke at bruge plus ( + ) – operatøren til at sammenkæde strenge, eller når vi vil bruge en variabel inde i en streng.,

Den gamle syntax:

Med nye ES6 syntax:

Så simpelt! Det er en virkelig stor forskel mellem den gamle syntaks og ES6. Når man spiller med strenge, ser den bogstavelige streng i ES6 mere organiseret og godt struktureret ud end ES5.

standardparametre

Når jeg arbejder i PHP, bruger jeg normalt standardparametre. Disse giver dig mulighed for at definere en parameter på forhånd.,

så når du glemmer at skrive parameteren, returnerer den ikke en udefineret fejl, fordi parameteren allerede er defineret i standardindstillingen. Så når du kører din funktion med en savnet parameter, vil den tage værdien af standardparameteren t, og den vil ikke returnere en fejl!

Kig på dette eksempel:

Den funktion ovenstående returnerer udefineret, fordi vi har glemt at give det til den anden parameter age.,

men hvis vi brugte standardparameteren, returnerer den ikke udefineret, og den bruger dens værdi, når vi glemmer at tildele en parameter!

som du ser, returnerer funktionen en værdi, selvom vi gik glip af den anden parameter. Nu med standardparameteren kan vi håndtere fejlen på forhånd.

Array og objektdestruktion

ødelæggelse gør tildelingen af værdierne for et array eller objekt til den nye variabel lettere.,

Den gamle syntax:

Med ES6 syntax:

Med ES5, vi er nødt til at tildele hver enkelt værdi for hver variabel. Med ES6 sætter vi bare vores værdier inden for krøllede parenteser for at få nogen egenskab af objektet.Bemærk: Hvis du tildeler en variabel, der ikke er identisk med egenskabens navn, returnerer den udefineret. For eksempel, hvis ejendommens navn er name og vi tildeler det til en username variabel, returnerer den udefineret.,

Vi skal altid navngive variablen det samme som ejendommens navn. Men hvis vi vil omdøbe variablen, kan vi bruge kolon : i stedet.

til arrayet bruger vi den samme syntaks som objektet. Vi skal bare udskifte de krøllede parenteser med firkantede parenteser.

Import og eksport

ved Brug af import og export i din JavaScript applikation gør det mere kraftfulde., De giver dig mulighed for at oprette separate og genanvendelige komponenter.

Hvis du er bekendt med nogen JavaScript MVC framework, vil du se, at de bruger import og export til at håndtere de komponenter, der det meste af tiden. Så hvordan fungerer de virkelig?

det er simpelt! export giver dig mulighed for at eksportere et modul, der skal bruges i en anden JavaScript-komponent. Vi bruger import til at importere dette modul til at bruge det i Vores komponent.

for eksempel har vi to filer., Den første hedder detailComponent.js og den anden hedder homeComponent.js.

i detailComponent.js vil vi eksportere funktionen detail.

Og hvis vi ønsker at bruge denne funktion i homeComponent.js, vil vi bare bruge import.

Hvis vi vil importere mere end et modul, sætter vi dem bare i krøllede parenteser.,

så cool, er det ikke?!

løfter

løfter er en ny funktion i ES6. Det er en metode til at skrive asynkron kode. Det kan bruges, når vi for eksempel ønsker at hente data fra en API, eller når vi har en funktion, der tager tid at blive udført. Løfter gør det lettere at løse problemet, så lad os skabe vores første løfte!

Hvis du logger din konsol, vil det returnere et løfte. Så hvis vi ønsker at udføre en funktion, efter at data er hentet, bruger vi et løfte., Løftet tager to parametre: resolve og reject for at håndtere en forventet fejl.

Bemærk: fetch-funktionen returnerer et løfte 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));

nu, hvis du logger din konsol, returnerer den en række data.

Rest-parameter og Spredningsoperatør

rest-parametrene bruges til at få argumentet for et array og returnere et nyt array.,

spredningen operatøren har samme syntaks som resten parameter, men spredningen operatøren tager den Vifte selv og ikke bare argumenter. Vi kan bruge Spredningsparameteren til at få værdierne for et Array i stedet for at bruge en for loop eller en anden metode.

klasser

klasser er kernen i objektorienteret programmering (OOP). De gør din kode mere sikker og indkapslet. Brug af klasser giver din kode en dejlig struktur og holder den orienteret.,

for At oprette en klasse, skal du bruge class søgeord efterfulgt af navnet på klassen med to krøllede parenteser.

Nu kan vi få adgang til de class metoder og egenskaber ved brug af new søgeord.

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

for At nedarve fra en anden klasse, skal du bruge extends søgeord efterfulgt af navnet på den klasse, du ønsker at arve fra.,

Du kan lære mere om Klasser her.

ES6 har andre fantastiske funktioner — du kan udforske dem her.

konklusion

Jeg håber, at I fandt denne artikel nyttig, og jeg håber, at jeg var i stand til at introducere dig nogle af ES6-funktionerne. Hvis så, abonner på denne mail-liste for at lære mere om Front-end emner. Tak for din tid.

forresten har jeg for nylig arbejdet med en stærk gruppe Soft .areingeniører til en af mine mobile applikationer., Organisationen var stor, og produktet blev leveret meget hurtigt, meget hurtigere end andre virksomheder og freelancere, jeg har arbejdet med, og jeg tror, jeg kan ærligt anbefale dem til andre projekter derude. Skyd mig en e-mail, hvis du ønsker at komme i kontakt — [email protected].