hoewel de ES6-specificatie niet super vers is, denk ik dat veel ontwikkelaars er nog steeds niet vertrouwd mee zijn., De belangrijkste reden is waarschijnlijk slechte ondersteuning in webbrowsers net na specificatie release. Momenteel is de specificatie meer dan 2 jaar oud en veel moderne webbrowsers werken goed met ES6. Zelfs als u (of uw klanten) niet de meest recente versie van de webbrowser gebruikt, kunt u transpilers (zoals Babel) gebruiken, die ES6-bronnen transformeert naar ES5-bronnen tijdens het bouwproces van de applicatie. Het betekent dat het tijd wordt om een stap vooruit te zetten en ES6 te leren.
In dit artikel zal ik proberen om de meest nuttige functies op een bondige manier te introduceren., Na de tutorial, zult u basisvaardigheden bezitten en in staat zijn om ze toe te passen in een echt project. Behandel het niet als een gids of documentatie. Mijn doel is om u aan te moedigen om dieper te graven en vertrouwd te raken met ES6.
const en let keywords
const stelt u in staat om constanten te definiëren (tot slot!). let stelt u in staat om variabelen te definiëren. Dat is geweldig, maar hebben we niet variabelen in JavaScript al? Ja, dat is waar, maar variabelen gedeclareerd door var hebben functie scope en worden opgetild naar de top. Het betekent dat een variabele kan worden gebruikt voordat deze is gedeclareerd., laat variabelen en constanten block scope hebben (omgeven door {}) en kan niet gebruikt worden voor declaratie.
Array helper functies
nieuwe coole helper functies verschenen, die het werken met js arrays in de meeste nuttige gevallen vergemakkelijken. Hoe vaak hebt u logica geïmplementeerd zoals: filteren, controleren of een of alle elementen aan de voorwaarde voldoen, of elementconversie? Waarschijnlijk heel vaak. Nu heb je geweldige taalfuncties om het werk voor u te doen., Hier, naar mijn mening, zijn de meest waardevolle functies:
forEach
voert de gegeven functie uit voor elk element van de array, waarbij het array-element als argument wordt doorgegeven.
map
maakt een nieuwe array aan die hetzelfde aantal elementen bevat, maar uitvoerelementen worden door de opgegeven functie aangemaakt. Het zet gewoon elk array-element om in iets anders.,
filter
maakt een nieuwe array aan die een subset van de originele array bevat. Het resultaat heeft deze elementen die de test uitgevoerd door de verstrekte functie passeren, die waar of onwaar zou moeten retourneren.
find
vindt het eerste element dat de test doorstaat die door de gegeven functie wordt uitgevoerd, en dat true of false moet retourneren.,
elke
controleert of elk element van de array voldoet aan de test die door de opgegeven functie wordt uitgevoerd, wat true of false zou moeten opleveren.
sommige
controleert of een element van de array de test doorstaat die door de gegeven functie is geïmplementeerd, wat true of false zou moeten geven.,
reduce
past een functie toe die als eerste parameter wordt doorgegeven tegen een accumulator en elk element in de array (van links naar rechts), waardoor deze wordt gereduceerd tot een enkele waarde. De initiële waarde van de accumulator moet worden verstrekt als de tweede parameter van de reductiefunctie.
Pijlfuncties
implementatie van zeer eenvoudige functies (zoals de eerder genoemde som of product) vereist het schrijven van veel boilerplate., Is daar een remedie voor? Ja, probeer gewoon pijl functies!
Pijlfuncties kunnen ook inline zijn. Het is echt vereenvoudigt de code:
Pijl-functies kunnen ook worden meer complex en hebben vele regels code:
Klassen
Die Java ontwikkelaar maakt niet missen klassen bij het overschakelen naar een JS-project?, Wie houdt er niet van expliciete overerving, zoals in Java, in plaats van het schrijven van magische code voor prototypale overerving? Hoewel sommige js-ontwikkelaars klaagden, zijn klassen geïntroduceerd in ES6. Ze veranderen het concept van erfenis niet. Ze zijn gewoon syntactische suiker voor prototypale overerving.
verbeterde objectletters
Objectletters zijn verbeterd., Nu kunnen we veel eenvoudiger:
- definieer velden met variabele toewijzing met dezelfde naam
- definieer functies
- definieer dynamische (berekende) eigenschappen
Template strings
wie houdt er van het schrijven van grote aaneenschakeling van strings en variabelen? Ik geloof een minderheid van ons. Wie haat het om het te lezen? Ik weet zeker dat iedereen. Gelukkig introduceert ES6 zeer eenvoudig te gebruiken string templates met placeholders voor variabelen.,
merk op dat we tekst met meerdere regels kunnen schrijven.
belangrijk: gebruik backticks in plaats van apostrofen om de tekst af te wikkelen.
standaard Functieargumenten
wilt u niet alle mogelijke functieparameters opgeven? Standaardwaarden gebruiken.
rest-en spreadoperators
Spread
Het maakt extractie van array of objectinhoud als afzonderlijke elementen mogelijk.,
Voorbeeld — maak ondiepe kopie van de array:
Voorbeeld — samenvoegen-arrays:
Rest,
wilt u het binden van de eerste paar parameters van de functie de variabelen, en anderen om enkele variabelen als een matrix? Nu kun je het vrij gemakkelijk doen.,
Destructuring
van array
maakt extractie van gevraagde elementen uit de array mogelijk en wijst ze toe aan variabelen.
van object
maakt extractie van gevraagde eigenschappen uit het object mogelijk en wijst deze toe aan variabelen met dezelfde naam als eigenschappen.,
Promise promises
Promise promises (Ja, ik weet dat het raar klinkt) dat je in de toekomst resultaten zou krijgen van uitgestelde of langlopende taken. Promise heeft twee kanalen: de eerste voor resultaten, de tweede voor mogelijke fouten. Om het resultaat te krijgen, geef je de callback functie op als de ‘then’ functie parameter. Om fouten te verwerken, geeft u de callback functie als de ‘catch’ functie parameter.
merk op dat de uitvoer van het voorbeeld kan verschillen voor elke uitvoering, vanwege willekeurige functie aanroep.,
samenvatting
Ik hoop dat u genoten hebt van het artikel. Als je wat oefening wilt, kun je de sandbox gebruiken voor het leerproces: https://es6console.com/. Als u meer informatie nodig heeft, kunt u deze hier vinden: