ven om ES6-specifikationen inte är superfräsch, tror jag att många utvecklare fortfarande inte ska hoppa bekanta med det., Den främsta orsaken är förmodligen dåligt stöd i webbläsare strax efter specifikationen release. För närvarande är specifikationen över 2 år gammal, och många moderna webbläsare fungerar bra med ES6. Även om du (eller dina kunder) inte använder den senaste versionen av webbläsare, kan du använda transpilers (som Babel), som omvandlar ES6 källor för att ES5 källor under byggprocessen av ansökan. Det betyder att det är dags att göra ett steg framåt och lära ES6.
i den här artikeln kommer jag att försöka introducera de mest användbara funktionerna på ett kortfattat sätt., Efter handledningen kommer du att ha grundläggande färdigheter och kunna tillämpa dem i ett riktigt projekt. Behandla det inte som en guide eller dokumentation. Mitt mål är att uppmuntra dig att gräva djupare och bekanta dig med ES6.
const och låt nyckelord
const kan du definiera konstanter(äntligen!). låt kan du definiera variabler. Det är bra, men har vi inte variabler i JavaScript redan? Ja, det är sant, men variabler som deklareras av var har funktionsomfång och lyfts till toppen. Det innebär att en variabel kan användas innan den har deklarerats., låt variabler och konstanter ha blockomfång (omgiven av {}) och kan inte användas före deklaration.
Array helper functions
nya coola hjälparfunktioner uppträdde, vilket underlättar arbetet med JS-arrayer i de flesta användbara fall. Hur många gånger implementerade du logik som: filtrering, kontroll om några eller alla element uppfyller villkoret eller elements konvertering? Förmodligen mycket ofta. Nu har du bra språkfunktioner för att göra arbetet för dig., Här är enligt min mening de mest värdefulla funktionerna:
forEach
utför den angivna funktionen för varje element i matrisen och passerar matriselementet som ett argument.
karta
skapar en ny matris som innehåller samma antal element, men utgångselement skapas av den medföljande funktionen. Det konverterar bara varje array element till något annat.,
filter
skapar en ny matris som innehåller en delmängd av den ursprungliga matrisen. Resultatet har dessa element som passerar testet implementerat av den tillhandahållna funktionen, vilket ska returnera sant eller falskt.
hitta
hittar det första elementet som passerar testet implementerat av den medföljande funktionen, vilket ska returnera sant eller falskt.,
varje
kontrollerar om varje element i matrisen passerar testet implementerat av den medföljande funktionen, vilket ska returnera sant eller falskt.
vissa
kontrollerar om någon del av matrisen passerar testet som implementeras av den medföljande funktionen, vilket ska returnera sant eller falskt.,
minska
använder en funktion som passeras som den första parametern mot en ackumulator och varje element i matrisen (från vänster till höger), vilket minskar den till ett enda värde. Ackumulatorns ursprungliga värde bör tillhandahållas som den andra parametern för reduktionsfunktionen.
Pilfunktioner
implementering av mycket enkla funktioner (som den ovan nämnda summan eller produkten) kräver att man skriver mycket koilerplate., Finns det något botemedel mot det? Ja, bara prova pil funktioner!
Pilfunktioner kan också vara inline. Det förenklar verkligen koden:
Pilfunktionerna kan också vara mer komplexa och har många rader kod:
klasser
vilken Java-utvecklare saknar klasser när man byter till ett js-projekt?, Vem gillar inte explicit arv, som i Java-språk, istället för att skriva magisk kod för prototypisk arv? Även om vissa JS-Utvecklare klagade har klasser introducerats i ES6. De ändrar inte begreppet arv. De är bara syntaktiskt socker för prototypiskt arv.
förbättrade objektliteraler
objektliteraler har förbättrats., Nu kan vi mycket lättare:
- definiera fält med variabel tilldelning med samma namn
- definiera funktioner
- definiera dynamiska (beräknade) egenskaper
Mallsträngar
som älskar att skriva stora strängar och variabler sammanslagning? Jag tror att en minoritet av oss. Vem hatar att läsa den? Jag är säker på alla. Lyckligtvis introducerar ES6 mycket lättanvända strängmallar med platshållare för variabler.,
Observera att vi kan skriva flerradig text.
Viktigt: Använd backticks istället för apostrofer för att linda in texten.
standardfunktionsargument
gillar du inte att tillhandahålla alla möjliga funktionsparametrar? Använd standardvärden.
vila och sprida operatörer
sprida
det möjliggör extraktion av array eller objektinnehåll som enskilda element.,
exempel — gör Grunt kopia av array:
exempel — sammanfoga matriser:
rest
vill du binda de första funktionsparametrarna till variabler och andra till enskilda variabler som en array? Nu kan du göra det ganska enkelt.,
förstöring
av array
möjliggör extraktion av begärda element från matrisen och tilldelar dem till variabler.
av objekt
möjliggör utvinning av begärda egenskaper från objektet och tilldela dem till variabler med samma namn som egenskaper.,
löften
löfte löften (ja, jag vet att det låter konstigt) som du skulle få i framtida resultat av uppskjutna eller långvariga uppgifter. Promise har två kanaler: den första för resultat, den andra för potentiella fel. För att få resultatet ger du återuppringningsfunktionen som funktionsparametern ”då”. För att hantera fel tillhandahåller du återuppringningsfunktionen som funktionsparametern ”fångst”.
Observera att utdata från exemplet kan skilja sig åt för varje utförande, på grund av slumpmässig funktionsanrop.,
sammanfattning
Jag hoppas att du gillade artikeln. Om du vill ha lite övning kan du använda sandlådan för inlärningsprocessen: https://es6console.com/. Om du behöver mer information hittar du den här: