JavaScript ES6 brengt nieuwe syntaxis en nieuwe geweldige functies om uw code moderner en leesbaarder te maken. Hiermee kunt u minder code schrijven en meer doen. ES6 introduceert ons vele geweldige functies zoals pijl functies, template strings, class destruction, Modules… en meer. Laten we eens kijken.

const en let

const is een nieuw sleutelwoord in ES6 voor het declareren van variabelen. const is krachtiger dan var. Eenmaal gebruikt, kan de variabele niet opnieuw worden toegewezen., Met andere woorden, het is een onveranderlijke variabele behalve wanneer het gebruikt met objecten.

Dit is echt handig voor het richten van de selectors. Als we bijvoorbeeld een enkele knop hebben die een gebeurtenis start, of als u een HTML-element in JavaScript wilt selecteren, gebruik dan const in plaats van var. Dit komt omdat var ‘gehesen’is. Het is altijd beter om const te gebruiken als u de variabele niet opnieuw wilt toewijzen .,

In de bovenstaande code zal const niet veranderen en kan niet opnieuw worden toegewezen. Als je probeert om het een nieuwe waarde te geven, zal het je een fout teruggeven.

let kan opnieuw worden toegewezen en een nieuwe waarde aannemen. Het creëert een veranderlijke variabele.

let is hetzelfde als const omdat beide blocked-scope zijn. Dit betekent dat de variabele alleen beschikbaar is binnen de reikwijdte ervan.,

pijl functies

de pijl functie is echt geweldig, en maakt uw code leesbaarder, meer gestructureerd, en ziet eruit als moderne code. In plaats van dit te gebruiken:

Gebruik dit:

zoals u ziet, lijkt de arrow-functie leesbaar en schoon! U hoeft de oude syntaxis niet meer te gebruiken.

ook kunt u de Pijlfunctie gebruiken met map, filter, en reduce ingebouwde functies.,

de kaartfunctie met pijlen ziet er duidelijker en leesbaarder uit dan map in ES5. Met ES6 kunt u kortere en slimmere code schrijven. U kunt hetzelfde gebruiken met filter en reduce.

Template Literals

Template literals of template strings zijn vrij cool. We hoeven de plus ( + ) operator niet te gebruiken om strings samen te voegen, of wanneer we een variabele in een string willen gebruiken.,

de oude syntaxis:

With new ES6 syntax:

So simple! Het is echt een enorm verschil tussen de oude syntaxis en ES6. Bij het spelen met snaren, de letterlijke snaar in ES6 ziet er meer georganiseerd en goed gestructureerd dan ES5.

standaardparameters

wanneer ik in PHP werk, gebruik ik meestal standaardparameters. Hiermee kunt u vooraf een parameter definiëren.,

dus, wanneer je vergeet om de parameter te schrijven, zal het geen ongedefinieerde fout geven omdat de parameter al is gedefinieerd in de standaard. Dus als je je functie uitvoert met een gemiste parameter, zal het de waarde nemen van de standaard parameter t, en het zal geen fout geven!

Kijk naar dit voorbeeld:

De functie hierboven geeft ongedefinieerd terug, omdat we vergeten zijn om het de tweede parameter agete geven.,

maar als we de standaard parameter gebruiken, zal het niet ongedefinieerd terugkeren, en het zal zijn waarde gebruiken wanneer we vergeten een parameter toe te wijzen!

zoals u ziet, retourneert de functie een waarde ook al hebben we de tweede parameter gemist. Nu met de standaard parameter kunnen we de fout van tevoren verwerken.

Array en objectdestructie

destructie maakt het toewijzen van de waarden van een array of object aan de nieuwe variabele eenvoudiger.,

de oude syntaxis:

met ES6 syntax:

met ES5 moeten we elke waarde toewijzen voor elke variabele. Met ES6 zetten we gewoon onze waarden tussen accolades om elke eigenschap van het object te krijgen.

Opmerking: Als u een variabele toewijst die niet identiek is aan de naam van de eigenschap, zal deze ongedefinieerd retourneren. Bijvoorbeeld, als de naam van de eigenschap name is en we het toewijzen aan een username variabele, zal het ongedefinieerd terugkeren.,

We moeten de variabele altijd dezelfde naam geven als de naam van de eigenschap. Maar in het geval dat we de variabele willen hernoemen, kunnen we in plaats daarvan de dubbele punt : gebruiken.

voor de array gebruiken we dezelfde syntaxis als het object. We moeten alleen de krullende haakjes vervangen door vierkante haakjes.

Import en export

met behulp van import en export in uw JavaScript-toepassing maakt het krachtiger., Hiermee kunt u afzonderlijke en herbruikbare componenten maken.

Als u bekend bent met een JavaScript MVC framework, zult u zien dat ze import en export gebruiken om de componenten meestal af te handelen. Dus hoe werken ze echt?

Het is eenvoudig! export staat u toe om een module te exporteren die gebruikt wordt in een ander JavaScript-component. We gebruiken import om die module te importeren om het in onze component te gebruiken.

bijvoorbeeld, we hebben twee bestanden., De eerste wordt detailComponent.js genoemd en de tweede wordt homeComponent.jsgenoemd.

In detailComponent.js gaan we de functie detail exporteren.

en als we deze functie willen gebruiken in homeComponent.js, gebruiken we gewoon import.

als we meer dan één module willen importeren, plaatsen we ze tussen accolades.,

zo cool, is het niet?!

Beloften

Beloften zijn een nieuwe functie van ES6. Het is een methode om asynchrone code te schrijven. Het kan worden gebruikt wanneer we bijvoorbeeld gegevens van een API willen ophalen, of wanneer we een functie hebben die tijd nodig heeft om te worden uitgevoerd. Beloften maken het makkelijker om het probleem op te lossen, dus laten we onze eerste belofte maken!

Als u uw console logt, zal het een belofte retourneren. Dus, als we een functie willen uitvoeren nadat gegevens zijn opgehaald, zullen we een belofte gebruiken., De belofte heeft twee parameters: resolve en reject om een verwachte fout af te handelen.

opmerking: de fetch-functie geeft zelf een belofte terug!

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

Als u nu uw console logt, zal het een reeks gegevens retourneren.

Rest parameter en Spread operator

de rest parameters worden gebruikt om het argument van een array te krijgen en een nieuwe array terug te geven.,

De spread operator heeft dezelfde syntaxis als de rest parameter, maar de spread operator neemt de Array zelf en niet alleen de argumenten. We kunnen de Spread parameter gebruiken om de waarden van een Array te krijgen, in plaats van een for lus of een andere methode te gebruiken.

klassen

klassen zijn de kern van object oriented programming (OOP). Ze maken je code veiliger en ingekapseld. Het gebruik van klassen geeft je code een mooie structuur en houdt het georiënteerd.,

om een klasse aan te maken, gebruikt u het sleutelwoord class gevolgd door de naam van de klasse met twee accolades.

nu kunnen we toegang krijgen tot de class methoden en eigenschappen met behulp van het new sleutelwoord.

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

gebruik het sleutelwoord extends gevolgd door de naam van de klasse waarvan u wilt erven.,

U kunt hier meer informatie over klassen vinden.

ES6 heeft andere geweldige functies-je kunt ze hier verkennen.

conclusie

Ik hoop dat jullie dit artikel nuttig vonden, en ik hoop dat ik jullie enkele van de ES6-functies heb kunnen introduceren. Abonneer je dan op deze maillijst voor meer informatie over Front-end onderwerpen. Bedankt voor je tijd.

tussen haakjes, ik heb onlangs gewerkt met een sterke groep software engineers voor een van mijn mobiele applicaties., De organisatie was geweldig, en het product werd zeer snel geleverd, veel sneller dan andere bedrijven en freelancers waarmee ik heb gewerkt, en ik denk dat ik ze eerlijk kan aanbevelen voor andere projecten die er zijn. Stuur me een e-mail als je contact wilt opnemen … [email protected].