Hier zijn voorbeelden van alles nieuw in ECMAScript 2016, 2017, en 2018

door rajaraodv

het is moeilijk om bij te houden wat er nieuw is in JavaScript (ECMAScript). En het is nog moeilijker om nuttige code voorbeelden te vinden.

dus in dit artikel zal ik alle 18 functies behandelen die zijn vermeld in de voltooide voorstellen van de tc39 die zijn toegevoegd in ES2016, ES2017 en ES2018 (final draft) en ze laten zien met nuttige voorbeelden.

Dit is een vrij lang bericht, maar het zou gemakkelijk te lezen moeten zijn. Zie dit als ” Netflix binge reading.”Tegen het einde van dit, Ik beloof dat je een ton van de kennis over al deze functies.

OK, laten we deze een voor een doornemen.

Array.prototype.includes

includes is een eenvoudige instantie methode op de Array en helpt om gemakkelijk te vinden of een item in de Array is (inclusief NaN in tegenstelling tot indexOf).

Trivia: De JavaScript spec mensen wilden het contains noemen, maar dit werd blijkbaar al gebruikt door Mootools dus gebruikten ze includes .

exponentiatie infix operator

wiskundige bewerkingen zoals optellen en aftrekken hebben infix-operatoren zoals + en - , respectievelijk. Net als deze wordt de infix-operator ** vaak gebruikt voor exponent-bewerkingen. In ECMAScript 2016 werd de ** geïntroduceerd in plaats van Math.pow .

bezwaar.waarden()

Object.values() is een nieuwe functie die vergelijkbaar is met Object.keys() maar alle waarden van de eigen eigenschappen van het Object retourneert, met uitzondering van elke waarde (s) in de prototypische keten.

bezwaar.ingangen()

Object.entries() is gerelateerd aan Object.keys, maar in plaats van alleen sleutels terug te geven, geeft het zowel sleutels als waarden terug in de array Mode. Dit maakt het heel eenvoudig om dingen te doen zoals het gebruik van objecten in lussen of het omzetten van objecten in Kaarten.

Voorbeeld 1:

Voorbeeld 2:

String padding

twee instance methoden zijn toegevoegd aan String – String.prototype.padStart en String.prototype.padEnd – die het mogelijk maken om een lege string of een andere string toe te voegen aan het begin of het einde van de originele string.

'someString'.padStart(numberOfCharcters ); '5'.padStart(10) // ' 5''5'.padStart(10, '=*') //'=*=*=*=*=5''5'.padEnd(10) // '5 ''5'.padEnd(10, '=*') //'5=*=*=*=*='

dit is handig als we dingen willen uitlijnen in scenario ‘ s zoals pretty print display of terminal print.

3.1 padStart voorbeeld:

in het onderstaande voorbeeld hebben we een lijst van getallen van verschillende lengtes. We willen “0” voorvoegen zodat alle items dezelfde lengte van 10 cijfers hebben voor weergavedoeleinden. We kunnen padStart(10, '0') gebruiken om dit gemakkelijk te bereiken.

3.2 padEnd voorbeeld:

padEnd komt echt van pas wanneer we meerdere items van verschillende lengtes printen en ze goed naar rechts willen uitlijnen.

het voorbeeld hieronder is een goed realistisch voorbeeld van hoe padEnd, padStart, en Object.entries allemaal samenkomen om een mooie output te produceren.

3.3 ⚠️ padStart en padEnd op emoji ’s en andere dubbele byte-tekens

emoji’ s en andere dubbele byte-tekens worden weergegeven met behulp van meerdere bytes van unicode. Dus padStart en padEnd werken misschien niet zoals verwacht!⚠ ️

bijvoorbeeld: stel dat we proberen de tekenreeks heart te vullen om 10 tekens te bereiken met de emo emoji. Het resultaat ziet er hieronder uit:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

dit komt omdat ❤ ️ 2 Codepunten lang is ('\u2764\uFE0F')! Het woord heart zelf is 5 karakters, dus we hebben nog maar 5 karakters over. Dus wat er gebeurt is dat JS twee harten opvult met '\u2764\uFE0F' en dat produceert❤ ️ ❤ ️. Voor de laatste gebruikt het gewoon de eerste byte van het hart \u2764 die ❤

produceert, dus we eindigen met: ❤️❤️❤heart

PS: u kunt deze link gebruiken om te controleren Unicode char conversies.

Object.getOwnPropertyDescriptors

deze methode geeft alle details (inclusief getter geten setter set methoden) voor alle eigenschappen van een bepaald object. De belangrijkste motivatie om dit toe te voegen is om oppervlakkig kopiëren / klonen van een object toe te staan naar een ander object dat ook getter en setter functies kopieert in tegenstelling tot Object.assign .

Object.wijs ondiepe kopieën alle details behalve getter en setter functies van het oorspronkelijke bron object.

het voorbeeld hieronder toont het verschil tussen Object.assign en Object.getOwnPropertyDescriptors samen met Object.defineProperties om een origineel object Car naar een nieuw object ElectricCar te kopiëren . U zult zien dat door gebruik te maken van Object.getOwnPropertyDescriptors ,discount getter en setter functies ook worden gekopieerd naar het doel object.

eerder…

toewijzen na…

voeg achterliggende komma ’s toe in de functieparameters

Dit is een kleine update waarmee we achterliggende komma’ s kunnen hebben na de laatste functieparameter. Waarom? Om te helpen met tools zoals Git blame om ervoor te zorgen dat alleen nieuwe ontwikkelaars de schuld krijgen.

het onderstaande voorbeeld toont het probleem en de oplossing.

Opmerking: U kunt ook functies aanroepen met achterliggende komma ‘ s!

Async / Await

dit is verreweg de belangrijkste en meest nuttige functie als je het mij vraagt. Async functies stelt ons in staat om niet om te gaan met callback hell en maken de hele code lijkt eenvoudig.

het async sleutelwoord vertelt De JavaScript-compiler om de functie anders te behandelen. De compiler pauzeert wanneer het await trefwoord binnen die functie bereikt. Het veronderstelt dat de uitdrukking na await een belofte retourneert en wacht tot de belofte is opgelost of afgewezen alvorens verder te gaan.

in het voorbeeld hieronder roept de functie getAmount twee asynchrone functies getUser en getBankBalance aan . We kunnen dit doen in promise, maar het gebruik van async await is eleganter en eenvoudiger.

6.1 Async functies zelf retourneren een belofte.

als u wacht op het resultaat van een async-functie, moet u de syntaxis then van Promise gebruiken om het resultaat vast te leggen.

in het volgende voorbeeld willen we het resultaat loggen met console.log maar niet binnen de doubleAndAdd. We willen dus wachten en then syntaxis gebruiken om het resultaat door te geven aan console.log .

6.2 Calling async / wait in parallel

in het vorige voorbeeld roepen we wacht twee keer, maar elke keer wachten we op een seconde (in totaal 2 seconden). In plaats daarvan kunnen we het parallelliseren omdat a en b niet van elkaar afhankelijk zijn met Promise.all.

6.3 foutafhandeling async / wait-functies

er zijn verschillende manieren om fouten te verwerken bij het gebruik van async wait.

Optie 1 – gebruik try catch binnen de functie

Optie 2-Catch every wait expression

aangezien elke await expressie een belofte retourneert, kunt u fouten op elke regel opvangen zoals hieronder weergegeven.

optie 3 — Catch the entire async-wait function

ECMAScript is momenteel in definitieve versie en zal verschijnen in juni of juli 2018. Alle hieronder besproken functies zijn in Fase 4 en zullen deel uitmaken van ECMAScript 2018.

1. Gedeeld geheugen en atomics

dit is een enorme, vrij geavanceerde functie en is een belangrijke verbetering voor JS engines.

het belangrijkste idee is om een soort multi-threading-functie naar JavaScript te brengen, zodat JS-ontwikkelaars in de toekomst krachtige, gelijktijdige programma ‘ s kunnen schrijven door het geheugen zelf te beheren in plaats van js engine het geheugen te laten beheren.

dit wordt gedaan door een nieuw type van een globaal object genaamd SharedArrayBuffer dat in wezen gegevens opslaat in een gedeelde geheugenruimte. Dus deze gegevens kunnen worden gedeeld tussen de belangrijkste js thread en web-worker threads.

tot nu toe, als we gegevens willen delen tussen de belangrijkste js-thread en web-workers, moesten we de gegevens kopiëren en naar de andere thread sturen met postMessage . Niet meer!

u gebruikt gewoon SharedArrayBuffer en de gegevens zijn direct toegankelijk voor zowel de hoofd thread als meerdere web-worker threads.

maar het delen van geheugen tussen threads kan racecondities veroorzaken. Om rasomstandigheden te voorkomen, wordt het “Atomics” globale object geïntroduceerd. Atomics biedt verschillende methoden om het gedeelde geheugen te vergrendelen wanneer een thread zijn gegevens gebruikt. Het biedt ook methoden om dergelijke gegevens veilig bij te werken in dat gedeelde geheugen.

de aanbeveling is om deze functie te gebruiken via een bibliotheek, maar op dit moment zijn er geen bibliotheken gebouwd op de top van deze functie.

Als u geïnteresseerd bent, raad ik u aan:

1. From Workers to Shared Memory-lucasfcosta
2. een cartoon intro van SharedArrayBuffers-Lin Clark
3. gedeeld geheugen en atomics-Dr. Axel Rauschmayer

2. Tagged Template letterlijke beperking verwijderd

eerst moeten we verduidelijken wat een “Tagged Template letterlijke” is, zodat we deze functie beter kunnen begrijpen.

in ES2015+ is er een functie genaamd een tagged template letteral die ontwikkelaars in staat stelt om aan te passen hoe strings worden geïnterpoleerd. Bijvoorbeeld, in de standaard manier strings worden geïnterpoleerd zoals hieronder…

In de tagged letterlijke, kunt u een functie schrijven om de hardcoded delen van de string letterlijke ontvangen, bijvoorbeeld , en de vervangende variabelen, bijvoorbeeld, als parameters in een aangepaste functie (bijvoorbeeld greet), en retourneren wat u wilt van die aangepaste functie.

het onderstaande voorbeeld laat zien dat onze aangepaste ” Tag “functie greet het tijdstip van de dag toevoegt als” Good Morning!””Goede middag,” en zo verder afhankelijk van de tijd van de dag om de string letterlijke en geeft een aangepaste string.

toont nu we besproken hebben wat “Tagged” functies zijn, willen veel mensen deze functie in verschillende domeinen gebruiken, zoals in Terminal voor commando ’s en HTTP-verzoeken voor het samenstellen van URI’ s, enzovoort.

⚠ ️het probleem met tagged string literal

dus als je een tagged functie hebt die intern de regels van een ander domein gebruikt (zoals de regels van terminal), die mogelijk \ubla123abla moet gebruiken die er niet uitziet als \u0049 of \u{@f804}, dan krijg je een syntaxfout.

in ES2018 zijn de regels versoepeld om zulke schijnbaar ongeldige escape-tekens toe te staan, zolang de Tagged-functie de waarden in een object retourneert met een “gekookte” eigenschap (waar ongeldige tekens “ongedefinieerd” zijn), en dan een “ruwe” eigenschap (met wat je maar wilt).

“dotall” Vlag voor reguliere expressie

momenteel in RegEx, hoewel de dot (“.”) moet overeenkomen met een enkel teken, het komt niet overeen met nieuwe regeltekens zoals \n \r \f etc.

bijvoorbeeld:

//Before/first.second/.test('first\nsecond'); //false

deze verbetering maakt het mogelijk voor de dot operator om een enkel teken aan te passen. Om ervoor te zorgen dat dit niets breekt, moeten we \s vlag gebruiken wanneer we de RegEx maken om dit te laten werken.

//ECMAScript 2018/first.second/s.test('first\nsecond'); //true Notice: /s ?? 

hier is de Algemene API van het voorstel doc:

RegExp Named Group Captures ?

deze verbetering brengt een nuttige RegExp functie van andere talen zoals Python, Java en ga zo maar door genaamd ” Named Groups.”Met deze eigenschappen kunnen ontwikkelaars die RegExp schrijven namen (identifiers) in het formaat(?<name>...) geven voor verschillende delen van de groep in de RegExp. Ze kunnen dan gebruik maken van die naam om te grijpen welke groep ze nodig hebben met gemak.

4.1 Basic Named group voorbeeld

4.2 Met Named groups binnen de regex zelf

kunnen we het \k<group name> formaat gebruiken om de groep binnen de regex zelf terug te verwijzen. Het volgende voorbeeld laat zien hoe het werkt.

4.3 named groups in String gebruiken.prototype.vervang

de functie named group wordt nu gebakken in de instantiemethode replace van de String. Zo kunnen we eenvoudig woorden in de string verwisselen.

verander bijvoorbeeld “voornaam, achternaam” In “achternaam, voornaam”.

Resteigenschappen voor objecten

Restoperator ... (drie punten) kunnen we Objecteigenschappen extraheren die nog niet zijn geëxtraheerd.

5.1 u kunt rest gebruiken om alleen eigenschappen te extraheren die u wilt

5.2 nog beter, u kunt ongewenste items verwijderen! ??

Spread-eigenschappen voor objecten

Spread-eigenschappen lijken ook op rest-eigenschappen met drie punten ... maar het verschil is dat u spread gebruikt om nieuwe objecten te maken (herstructureren).

Tip: de spread operator wordt gebruikt in de rechterkant van het gelijk-teken. De rest wordt gebruikt in de linkerkant van het gelijk-teken.

RegExp Lookbehind beweringen

dit is een verbetering van de RegEx die ons in staat stelt om ervoor te zorgen dat een bepaalde tekenreeks onmiddellijk *vóór* een andere tekenreeks bestaat.

u kunt nu een groep (?<=…) (vraagteken, kleiner dan, gelijk aan) gebruiken om achter te kijken voor een positieve bewering.

positieve bewering: stel dat we ervoor willen zorgen dat het # teken voor het woord winning bestaat (dat wil zeggen: #winning) en dat de regex alleen de tekenreeks “winning”teruggeeft. Dit is hoe je het zou schrijven.

negatieve bewering: laten we zeggen dat we getallen willen extraheren uit lijnen die € tekens hebben en niet $ tekens voor die getallen.

RegExp Unicode Property Escapes

was het niet eenvoudig om RegEx te schrijven die overeenkwam met verschillende unicode karakters. Dingen als \w , \W , \d etc alleen overeenkomen met Engelse tekens en cijfers. Maar hoe zit het met getallen in andere talen zoals Hindi, Grieks, enzovoort?

dat is waar Unicode-eigenschap ontsnapt in beeld komt. Het blijkt dat Unicode metadata-eigenschappen toevoegt voor elk symbool (teken) en het gebruikt om verschillende symbolen te groeperen of te karakteriseren.

bijvoorbeeld, Unicode-database groepeert alle Hindi-tekens(ह हि्््द) onder een eigenschap met de naam Script met waarde Devanagari en een andere eigenschap met de naam Script_Extensions met dezelfde waarde Devanagari. Dus we kunnen zoeken naar Script=Devanagari en krijgen alle Hindi karakters.

Devanagari kan worden gebruikt voor verschillende Indiase talen zoals Marathi, Hindi, Sanskriet, enzovoort.

vanaf ECMAScript 2018 kunnen we \p gebruiken om tekens te ontsnappen samen met {Script=Devanagari} om overeen te komen met al die Indiase tekens. Dat wil zeggen, we kunnen gebruiken: \p{Script=Devanagari} in de RegEx om alle Devanagari karakters overeen te komen.

//The following matches multiple hindi character/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true //PS:there are 3 hindi characters h

op dezelfde manier groepeert Unicode-database alle Griekse tekens onder de eigenschap Script_Extensions (en Script ) met de waarde Greek . Dus we kunnen zoeken naar alle Griekse tekens met Script_Extensions=Greek of Script=Greek .

dat wil zeggen, we kunnen gebruiken: \p{Script=Greek} in de RegEx om alle Griekse karakters overeen te komen.

//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

verder slaat de Unicode-database verschillende soorten emoji ’s op onder de Booleaanse eigenschappen Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, en Emoji_Modifier_Base met eigenschapswaarden als “true”. Dus we kunnen zoeken naar alle emoji ‘ s door simpelweg Emoji te selecteren om waar te zijn.

dat wil zeggen dat we \p{Emoji}, \Emoji_Modifier enzovoort kunnen gebruiken om verschillende soorten emoji ‘ s te matchen.

het volgende voorbeeld maakt het allemaal duidelijk.

tot slot kunnen we hoofdletter “P”(\P ) escape character gebruiken in plaats van kleine p (\p), om de overeenkomsten te negeren.

1. ECMAScript 2018 Proposal

Promise.prototype.eindelijk()

finally() is een nieuwe instantie methode die werd toegevoegd aan de belofte. Het belangrijkste idee is om het uitvoeren van een callback toe te staan na resolve of reject om dingen op te schonen. De finally callback wordt aangeroepen zonder enige waarde en wordt altijd uitgevoerd, wat er ook gebeurt.

laten we verschillende gevallen bekijken.

asynchrone iteratie

Dit is een * uiterst * nuttige functie. In principe stelt het ons in staat om lussen van async-code te maken met gemak!

deze functie voegt een nieuwe” for-await-of ” lus toe waarmee we async-functies kunnen aanroepen die beloften (of Arrays met een hoop Beloften) in een lus retourneren. Het coole is dat de lus wacht op elke belofte om op te lossen alvorens te doen aan de volgende lus.

dat is het zo ‘ n beetje!

als dit nuttig was, klik dan op de klap ? button beneden een paar keer om uw steun te tonen! ⬇⬇⬇ ??

mijn andere berichten

1. bekijk deze nuttige ECMAScript 2015 (ES6) tips en trucs
2. 5 JavaScript “Bad” Parts die zijn opgelost in ES6
3. Is “Class” in ES6 het nieuwe “Bad” Part?