JavaScript ES6 ger ny syntax och nya fantastiska funktioner för att göra din kod mer modern och mer läsbar. Det låter dig skriva mindre kod och göra mer. ES6 introducerar oss till många bra funktioner som pilfunktioner, mallsträngar, klassförstöring, moduler… och mer. Låt oss ta en titt.

const and let

const är ett nytt sökord i ES6 för att förklara variabler. const är kraftfullare än var. När variabeln används kan den inte omplaceras., Med andra ord, det är en oföränderlig variabel utom när den används med objekt.

det här är verkligen användbart för att rikta in väljarna. Till exempel, när vi har en enda knapp som avfyrar en händelse, eller när du vill välja ett HTML-element i JavaScript, använd const istället för var. Detta beror på att var är ’hissas’. Det är alltid att föredra att använda const när du inte vill omfördela variabeln .,

i koden ovan ändras inte const och kan inte överlåtas. Om du försöker ge det ett nytt värde kommer det att returnera ett fel.

let kan omplaceras och ta nytt värde. Det skapar en muterbar variabel.

let är samma som const eftersom båda är blockerade-omfattning. Det innebär att variabeln endast är tillgänglig inom dess räckvidd.,

Pilfunktioner

pilfunktionen är verkligen fantastisk och gör din kod mer läsbar, mer strukturerad och ser ut som modern kod. Istället för att använda detta:

Använd detta:

som du ser verkar pilfunktionen mer läsbar och ren! Du behöver inte använda den gamla syntaxen längre.

Du kan också använda Pilfunktionen med map, filter och reduce inbyggda funktioner.,

kartfunktionen med pilar ser tydligare och läsbar ut änmap I ES5. Med ES6 kan du skriva kortare och smartare kod. Du kan använda samma med filterochreduce.

Mall Literals

Mall literals eller mallsträngar är ganska cool. Vi behöver inte använda plus ( + ) – operatören för att sammanfoga strängar, eller när vi vill använda en variabel inuti en sträng.,

den gamla syntaxen:

med nya ES6 syntax:

så enkelt! Det är en riktigt stor skillnad mellan den gamla syntaxen och ES6. När du spelar med strängar ser den bokstavliga strängen i ES6 mer organiserad och välstrukturerad ut än ES5.

standardparametrar

När jag arbetar i PHP använder jag vanligtvis standardparametrar. Dessa låter dig definiera en parameter i förväg.,

så, när du glömmer att skriva parametern, kommer det inte att returnera ett odefinierat fel eftersom parametern redan är definierad i standardinställningen. Så när du kör din funktion med en missad parameter tar det värdet av standardparametern t, och det kommer inte att returnera ett fel!

titta på det här exemplet:

funktionen ovan returnerar odefinierad, eftersom vi glömde att ge den den andra parameternage.,

men om vi använde standardparametern kommer den inte att returnera odefinierad, och den kommer att använda dess värde när vi glömmer att tilldela en parameter!

som du ser returnerar funktionen ett värde även om vi missade den andra parametern. Nu med standardparametern kan vi hantera felet i förväg.

Array och object destructing

Destruction gör tilldelningen av värdena för en array eller ett objekt till den nya variabeln enklare.,

den gamla syntaxen:

med ES6 syntax:

med ES5 måste vi tilldela varje värde till varje variabel. Med ES6 lägger vi bara våra värden inom lockiga parentes för att få någon egenskap hos objektet.

Obs! Om du tilldelar en variabel som inte är identisk med Egenskapens namn kommer den att returneras odefinierad. Om Egenskapens namn till exempel är name och vi tilldelar den till en username – variabel kommer den att returneras odefinierad.,

Vi måste alltid namnge variabeln på samma sätt som Egenskapens namn. Men om vi vill byta namn på variabeln kan vi istället använda kolon :.

för matrisen använder vi samma syntax som objektet. Vi måste bara byta ut de lockiga konsolerna med hakparenteser.

importera och exportera

användaimport och export I JavaScript-programmet gör det kraftfullare., De låter dig skapa separata och återanvändbara komponenter.

om du känner till JavaScript MVC-ramverk ser du att de använder import och export för att hantera komponenterna för det mesta. Så hur fungerar de verkligen?

det är enkelt! export låter dig exportera en modul som ska användas i en annan JavaScript-komponent. Vi använderimport för att importera den modulen för att använda den i vår komponent.

till exempel har vi två filer., Den första heter detailComponent.js och den andra heter homeComponent.js.

idetailComponent.js kommer vi att exportera funktionendetail.

och om vi vill använda den här funktionen i homeComponent.js använder vi bara import.

om vi vill importera mer än en modul lägger vi dem bara inom lockiga fästen.,

så coolt, eller hur?!

löften

löften är ett nytt inslag i ES6. Det är en metod att skriva asynkron kod. Den kan användas när vi till exempel vill hämta data från ett API, eller när vi har en funktion som tar tid att exekveras. Löften gör det lättare att lösa problemet, så låt oss skapa vårt första löfte!

om du loggar din konsol kommer det att returnera ett löfte. Så, om vi vill utföra en funktion efter att data har hämtats, kommer vi att använda ett löfte., Löftet tar två parametrar: resolve och reject för att hantera ett förväntat fel.

Obs! hämtningsfunktionen returnerar ett löfte själv!

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

om du loggar din konsol kommer den att returnera en mängd data.

Rest parameter och Spread operator

rest parametrar används för att få argumentet för en array, och returnera en ny array.,

spread-operatören har samma syntax som restparametern, men spread-operatören tar matrisen själv och inte bara argumenten. Vi kan använda Spread parametern för att få värdena för en Array, istället för att använda en för loop eller någon annan metod.

klasser

klasser är kärnan i objektorienterad programmering (OOP). De gör din kod säkrare och inkapslad. Med hjälp av klasser ger din kod en fin struktur och håller den orienterad.,

för att skapa en klass, använd nyckelordetclass följt av namnet på klassen med två lockiga fästen.

Nu kan vi komma åtclass metoder och egenskaper med hjälp avnew nyckelordet.

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

om du vill ärva från en annan klass använder du nyckelordetextends följt av namnet på klassen du vill ärva från.,

Du kan läsa mer om klasser här.

ES6 har andra fantastiska funktioner — Du kan utforska dem här.

slutsats

Jag hoppas att ni hittade den här artikeln användbar, och jag hoppas att jag kunde presentera några av ES6-funktionerna. Om så är fallet, prenumerera på den här maillistan för att lära dig mer om front-end-ämnen. Tack för din tid.

förresten har jag nyligen arbetat med en stark grupp mjukvaruingenjörer för en av mina mobila applikationer., Organisationen var stor, och produkten levererades mycket snabbt, mycket snabbare än andra företag och frilansare jag har arbetat med, och jag tror att jag ärligt kan rekommendera dem för andra projekt där ute. Skjut mig ett mail om du vill komma i kontakt — [email protected].