Hallo, ik ben Alberto Montalesi, een full-stack autodidactische ontwikkelaar. Ik maak praktische JavaScript-tutorials en -cursussen op mijn website inspirationwebdev.com om andere ontwikkelaars te inspireren om te groeien en de carrière op te bouwen die ze willen.
JavaScript is een taal in constante evolutie en in de afgelopen jaren zijn er veel nieuwe functies toegevoegd aan de ECMAScript specificatie.
Dit artikel is een uittreksel van mijn boek Complete Guide to Modern JavaScript en behandelt de nieuwe toevoegingen van ES2016, ES2017, ES2018, ES2019 en is oorspronkelijk gepost op mijn blog InspiredWebDev.
Aan het einde van het artikel vind je een link om een spiekbriefje te downloaden dat alles samenvat.
Alles nieuw in ES2016
ES2016 heeft slechts twee nieuwe functies geïntroduceerd:
Array.prototype.includes()- De exponentiële operator
Array.prototype.includes()
De includes() methode retourneert true als onze array een bepaald element bevat, of false als dat niet zo is.
let array = [1,2,4,5];
array.includes(2);
// true
array.includes(3);
// false
Combineer includes() met fromIndex
We kunnen .includes() . leveren met een index om te beginnen met zoeken naar een element. De standaardwaarde is 0, maar we kunnen ook een negatieve waarde doorgeven.
De eerste waarde die we doorgeven is het element om te zoeken en de tweede is de index:
let array = [1,3,5,7,9,11];
array.includes(3,1);
// find the number 3 starting from array index 1
// true
array.includes(5,4);
//false
array.includes(1,-1);
// find the number 1 starting from the ending of the array going backwards
// false
array.includes(11,-3);
// true
array.includes(5,4); false geretourneerd omdat, ondanks de array met het getal 5, het wordt gevonden op index 2, maar we begonnen te kijken naar positie 4. Dat is waarom we het niet konden vinden en het gaf false terug .
array.includes(1,-1); geretourneerd false omdat we begonnen te kijken naar de index -1 (wat het laatste element van de array is) en vanaf dat punt verder gingen.
array.includes(11,-3); true geretourneerd omdat we teruggingen naar de index -3 en omhoog gingen en de waarde 11 op ons pad vonden.
De exponentiële operator
Voorafgaand aan ES2016 zouden we het volgende hebben gedaan:
Math.pow(2,2);
// 4
Math.pow(2,3);
// 8
Met de nieuwe exponentiële operator kunnen we nu het volgende doen:
2**2;
// 4
2**3;
// 8
Het wordt behoorlijk handig bij het combineren van meerdere bewerkingen, zoals in dit voorbeeld:
2**2**2;
// 16
Math.pow(Math.pow(2,2),2);
// 16
Math.pow() gebruiken je moet ze continu aaneenschakelen en het kan behoorlijk lang en rommelig worden. De exponentiële operator biedt een snellere en schonere manier om hetzelfde te doen.
ES2017 tekenreeksopvulling, Object.entries() , Object.values() en meer
ES2017 heeft veel coole nieuwe functies geïntroduceerd, die we hier gaan zien.
String opvulling (.padStart() en .padEnd() )
We kunnen nu wat opvulling aan onze strings toevoegen, ofwel aan het einde (.padEnd() ) of aan het begin (.padStart() ) van hen.
"hello".padStart(6);
// " hello"
"hello".padEnd(6);
// "hello "
We hebben aangegeven dat we 6 als opvulling willen, dus waarom kregen we in beide gevallen maar 1 spatie?
Het gebeurde omdat padStart en padEnd gaat en vult de lege ruimtes . In ons voorbeeld is "hallo" 5 letters en onze opvulling is 6, waardoor er slechts 1 lege ruimte overblijft.
Kijk naar dit voorbeeld:
"hi".padStart(10);
// 10 - 2 = 8 empty spaces
// " hi"
"welcome".padStart(10);
// 10 - 6 = 4 empty spaces
// " welcome"
Rechts uitlijnen met padStart
We kunnen padStart . gebruiken als we iets goed willen uitlijnen.
const strings = ["short", "medium length", "very long string"];
const longestString = strings.sort(str => str.length).map(str => str.length)[0];
strings.forEach(str => console.log(str.padStart(longestString)));
// very long string
// medium length
// short
Eerst pakten we de langste van onze snaren en maten de lengte ervan. We hebben toen een padStart . toegepast naar alle snaren op basis van de lengte van de langste, zodat we ze nu allemaal perfect rechts uitgelijnd hebben.
Voeg een aangepaste waarde toe aan de opvulling
We zijn niet verplicht om alleen een witruimte als opvulling toe te voegen, we kunnen zowel strings als cijfers doorgeven.
"hello".padEnd(13," Alberto");
// "hello Alberto"
"1".padStart(3,0);
// "001"
"99".padStart(3,0);
// "099"
Object.entries() en Object.values()
Laten we eerst een object maken.
const family = {
father: "Jonathan Kent",
mother: "Martha Kent",
son: "Clark Kent",
}
In eerdere versies van JavaScript we zouden als volgt toegang hebben gekregen tot de waarden in het object:
Object.keys(family);
// ["father", "mother", "son"]
family.father;
"Jonathan Kent"
Object.keys() gaf alleen de sleutels terug van het object dat we toen moesten gebruiken om toegang te krijgen tot de waarden.
We hebben nu nog twee manieren om toegang te krijgen tot onze objecten:
Object.values(family);
// ["Jonathan Kent", "Martha Kent", "Clark Kent"]
Object.entries(family);
// ["father", "Jonathan Kent"]
// ["mother", "Martha Kent"]
// ["son", "Clark Kent"]
Object.values() retourneert een array van alle waarden terwijl Object.entries() retourneert een array van arrays die zowel sleutels als waarden bevatten.
Object.getOwnPropertyDescriptors()
Deze methode retourneert alle eigen eigenschapsbeschrijvingen van een object.
De attributen die het kan retourneren zijn value , writable , get , set , configurable en enumerable .
const myObj = {
name: "Alberto",
age: 25,
greet() {
console.log("hello");
},
}
Object.getOwnPropertyDescriptors(myObj);
// age:{value: 25, writable: true, enumerable: true, configurable: true}
// greet:{value: ƒ, writable: true, enumerable: true, configurable: true}
// name:{value: "Alberto", writable: true, enumerable: true, configurable: true}
Laatste komma's in lijsten met functieparameters en oproepen
Dit is slechts een kleine wijziging in een syntaxis. Nu kunnen we bij het schrijven van objecten een komma achterlaten na elke parameter, of dit nu de laatste is of niet.
// from this
const object = {
prop1: "prop",
prop2: "propop"
}
// to this
const object = {
prop1: "prop",
prop2: "propop",
}
Merk op hoe ik een komma schreef aan het einde van de tweede eigenschap.
Het zal geen enkele fout opleveren als je het niet zegt, maar het is een betere gewoonte om te volgen omdat het het leven van je collega of teamlid gemakkelijker maakt.
// I write
const object = {
prop1: "prop",
prop2: "propop"
}
// my colleague updates the code, adding a new property
const object = {
prop1: "prop",
prop2: "propop"
prop3: "propopop"
}
// Suddenly, he gets an error because he did not notice that I forgot to leave a comma at the end of the last parameter.
Gedeeld geheugen en Atomics
Van MDN:
Atomics is geen constructor, alle eigenschappen en methoden zijn statisch (net als Math ) daarom kunnen we het niet gebruiken met een nieuwe operator of de Atomics . aanroepen object als een functie.
Voorbeelden van zijn methoden zijn:
- toevoegen / sub
- en / of / xor
- laden / opslaan
Atomics worden gebruikt met SharedArrayBuffer (generieke buffer voor binaire gegevens met een vaste lengte) objecten die een algemene buffer voor onbewerkte binaire gegevens met een vaste lengte vertegenwoordigen.
Laten we eens kijken naar enkele voorbeelden van Atomics methoden:
Atomics.add() , Atomics.sub() , Atomics.load() en Atomics.store()
Atomics.add() heeft drie argumenten, een array, een index en een waarde en retourneert de vorige waarde bij die index voordat een optelling wordt uitgevoerd.
// create a `SharedArrayBuffer`
const buffer = new SharedArrayBuffer(16);
const uint8 = new Uint8Array(buffer);
// add a value at the first position
uint8[0] = 10;
console.log(Atomics.add(uint8, 0, 5));
// 10
// 10 + 5 = 15
console.log(uint8[0])
// 15
console.log(Atomics.load(uint8,0));
// 15
Zoals u kunt zien, belt u Atomics.add() retourneert de vorige waarde op de matrixpositie die we targeten. wanneer we weer uint8[0] bellen we zien dat de optelling is uitgevoerd en we hebben er 15 gekregen.
Om een specifieke waarde uit onze array op te halen, kunnen we Atomics.load . gebruiken en geef twee argumenten, een array en een index door.
Atomics.sub() werkt op dezelfde manier als Atomics.add() maar het zal een waarde aftrekken.
// create a `SharedArrayBuffer`
const buffer = new SharedArrayBuffer(16);
const uint8 = new Uint8Array(buffer);
// add a value at the first position
uint8[0] = 10;
console.log(Atomics.sub(uint8, 0, 5));
// 10
// 10 - 5 = 5
console.log(uint8[0])
// 5
console.log(Atomics.store(uint8,0,3));
// 3
console.log(Atomics.load(uint8,0));
// 3
Hier gebruiken we Atomics.sub() om 5 af te trekken van de waarde op positie uint8[0] wat overeenkomt met 10 - 5.
Hetzelfde als met Atomics.add() , retourneert de methode de vorige waarde bij die index, in dit geval 10.
We gebruiken dan Atomics.store() om een specifieke waarde, in dit geval 3, op te slaan bij een specifieke index van de array, in dit geval 0, de eerste positie.
Atomics.store() geeft de waarde terug die we zojuist hebben doorgegeven, in dit geval 3. Dat kun je zien als we Atomics.load() aanroepen op die specifieke index krijgen we 3 en niet meer 5.
Atomics.and() , Atomics.or() en Atomics.xor()
Deze drie methoden voeren allemaal bitsgewijze AND-, OR- en XOR-bewerkingen uit op een bepaalde positie van de array. U kunt meer lezen over bitsgewijze bewerkingen op Wikipedia via deze link https://en.wikipedia.org/wiki/Bitwise_operation
ES2017 Async en wachten
Blijf lezen... of haal gewoon de cheatsheets.
Hartelijk dank voor het lezen. Volg mij op DevTo of op mijn blog op inspirationwebdev of op twitter.
Disclaimer:Links naar Amazon en Educative zijn affiliate links, aankopen die je doet zullen extra commissies voor mij genereren. Bedankt
Download mijn e-boek op Amazon en Leanpub