Här är exempel på allt nytt i ECMAScript 2016, 2017 och 2018

genom rajaraodv

det är svårt att hålla reda på vad som är nytt i JavaScript (ECMAScript). Och det är ännu svårare att hitta användbara kodexempel.

så i den här artikeln kommer jag att täcka alla 18 funktioner som listas i TC39S färdiga förslag som lagts till i ES2016, ES2017 och ES2018 (final draft) och visa dem med användbara exempel.

Detta är ett ganska långt inlägg men bör vara en lättläst. Tänk på detta som ” Netflix binge reading.”I slutet av detta lovar jag att du kommer att ha massor av kunskap om alla dessa funktioner.

OK, låt oss gå över dessa en efter en.

Array.prototypstadiet.inkluderar

includes är en enkel instansmetod på arrayen och hjälper till att enkelt hitta om ett objekt finns i arrayen (inklusive NaN till skillnad från indexOf).

ECMAScript 2016 eller ES7-Array.prototypstadiet.inkluderar()

Trivia: JavaScript-spec-folket ville namnge det contains, men det var tydligen redan använt av Mootools så de använde includes.

exponentiering infix operator

matematiska operationer som addition och subtraktion har infix-operatörer som + respektive -. I likhet med dem används ** infix-operatören vanligtvis för exponentoperation. I ECMAScript 2016 introducerades ** istället för Math.pow .

ECMAScript 2016 eller ES7 — ** Exponent infix operator

objekt.värden()

Object.values() är en ny funktion som liknar Object.keys() men returnerar alla värden för objektets egna egenskaper exklusive eventuella värden i den prototypiska kedjan.

ECMAScript 2017 (ES8) – objekt.värden()

objekt.inlägg()

Object.entries() är relaterad till Object.keys, men istället för att returnera bara nycklar, returnerar den både nycklar och värden i arrayen. Detta gör det väldigt enkelt att göra saker som att använda objekt i loopar eller konvertera objekt till kartor.

exempel 1:

ECMAScript 2017 (ES8) — använda objekt.poster () i slingor

exempel 2:

ECMAScript 2017 (ES8) — använda objekt.poster () för att konvertera objekt till karta

String padding

två instansmetoder lades till String — String.prototype.padStart och String.prototype.padEnd — som tillåter att lägga till/prepending antingen en tom sträng eller någon annan sträng till början eller slutet av den ursprungliga strängen.

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

detta är praktiskt när vi vill anpassa saker i scenarier som pretty print display eller terminal print.

3.1 padStart exempel:

i exemplet nedan har vi en lista med antal olika längder. Vi vill förbereda ”0” så att alla objekt har samma längd på 10 siffror för visningsändamål. Vi kan använda padStart(10, '0') för att enkelt uppnå detta.

ECMAScript 2017-padStart exempel

3.2 padend exempel:

padEnd verkligen kommer väl till pass när vi skriver ut flera objekt av varierande längd och vill Högerjustera dem ordentligt.

exemplet nedan är ett bra realistiskt exempel på hur padEnd , padStart och Object.entries alla samlas för att producera en vacker utgång.

ECMAScript 2017-padEnd, padStart och objekt.Exempel på poster

3.3 ⚠️ padStart och padEnd på Emojis och andra dubbelbyte-tecken

Emojis och andra dubbelbyte-tecken representeras med flera byte av unicode. Så padStart och padEnd kanske inte fungerar som förväntat!Till exempel: låt oss säga att vi försöker padda strängenheart för att nå 10 – tecken med hjälp av Emoji. Resultatet kommer att se ut nedan:

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

detta beror på att 2 Kodpunkter är långa ('\u2764\uFE0F' )! Ordet heart i sig är 5 tecken, så vi har bara totalt 5 tecken kvar till pad. Så vad som händer är att JS pads två hjärtan med '\u2764\uFE0F' och som producerar bisexuell. För den sista använder den helt enkelt den första byten av hjärtat \u2764 som producerar bisexuell

så vi slutar med: ❤️❤️❤heart

PS: du kan använda den här länken för att kolla in unicode char-omvandlingar.

objekt.getownpropertydescriptors

den här metoden returnerar alla detaljer (inklusive getter getoch setter set metoder) för alla egenskaper hos ett visst objekt. Huvudmotivet för att lägga till detta är att tillåta Grunt kopiering / kloning av ett objekt till ett annat objekt som också kopierar getter-och setter-funktioner i motsats till Object.assign .

objekt.tilldela grunda kopior alla detaljer utom getter och setter funktioner i det ursprungliga källobjektet.

exemplet nedan visar skillnaden mellan Object.assign och Object.getOwnPropertyDescriptors tillsammans med Object.defineProperties för att kopiera ett originalobjekt Car till ett nytt objekt ElectricCar. Du ser att genom att använda Object.getOwnPropertyDescriptors ,discount getter och setter funktioner kopieras också till målobjektet.

före…

före användning av objekt.tilldela

efter…

ECMAScript 2017 (ES8) – objekt.getOwnPropertyDescriptors

Lägg till efterföljande kommatecken i funktionsparametrarna

detta är en mindre uppdatering som gör att vi kan ha efterföljande kommatecken efter den sista funktionsparametern. Varför? För att hjälpa till med verktyg som git blame för att säkerställa att endast nya utvecklare får skulden.

nedanstående exempel visar problemet och lösningen.

ECMAScript 2017 (ES 8) — avslutande kommatecken i funktionsparametern

Obs: Du kan också ringa funktioner med efterföljande kommatecken!

Async / väntar

detta är överlägset den viktigaste och mest användbara funktionen om du frågar mig. Async-funktioner gör att vi inte kan hantera callback hell och göra hela koden enkel.

nyckelordet async talar om för JavaScript-kompilatorn att behandla funktionen annorlunda. Kompilatorn pausar när den når nyckelordet await inom den funktionen. Det förutsätter att uttrycket efter await returnerar ett löfte och väntar tills löftet är löst eller avvisat innan det går vidare.

i exemplet nedan anropar funktionen getAmount två asynkrona funktioner getUser och getBankBalance . Vi kan göra detta i löfte, men att använda async await är mer elegant och enkelt.

ECMAScript 2017 (ES 8) – Async väntar grundläggande exempel

6.1 Async-funktioner ger sig ett löfte.

om du väntar på resultatet från en async-funktion måste du använda Promise ’ s then syntax för att fånga resultatet.

i följande exempel vill vi logga resultatet med console.log men inte inom doubleAndAdd. Så vi vill vänta och använda then syntax för att skicka resultatet till console.log .

ECMAScript 2017 (ES 8) – Async väntar sig returnerar löfte

6.2 Ringer async / väntar parallellt

i föregående exempel ringer vi väntar två gånger, men varje gång vi väntar på en sekund (totalt 2 sekunder). Istället kan vi parallellisera det eftersom a och b inte är beroende av varandra med Promise.all.

ECMAScript 2017 (ES 8) – Använda löfte.allt för att parallellisera async / väntar

6.3 felhantering async / väntar funktioner

det finns olika sätt att hantera fel när du använder async väntar.

alternativ 1 — Använd försök fångst inom funktionen

ECMAScript 2017— Använd försök fångst inom async/väntar funktion

alternativ 2-fånga varje väntar uttryck

eftersom varje await uttryck returnerar ett löfte, kan du fånga fel på varje rad som visas nedan.

ECMAScript 2017-Använd försök fånga varje väntar uttryck

alternativ 3-fånga hela async-väntar funktion

ECMAScript 2017-fånga hela async/väntar funktion i slutet

ECMAScript är för närvarande i final draft och kommer att vara ute i juni eller juli 2018. Alla funktioner som omfattas nedan är i steg-4 och kommer att ingå i ECMAScript 2018.

1. Delat minne och atomics

detta är en enorm, ganska avancerad funktion och är en kärnförbättring till JS-motorer.

huvudideen är att ta med någon form av multi-threading-funktion till JavaScript så att JS-utvecklare kan skriva högpresterande, samtidiga program i framtiden genom att tillåta att hantera minne själva istället för att låta JS engine hantera minne.

detta görs av en ny typ av ett globalt objekt som heter SharedArrayBuffer som i huvudsak lagrar data i ett delat minnesutrymme. Så dessa data kan delas mellan de viktigaste JS-tråden och webbarbetartrådarna.

tills nu, om vi vill dela data mellan huvud JS tråd och webbarbetare, vi var tvungna att kopiera data och skicka den till den andra tråden med postMessage . Inte längre!

du använder helt enkelt SharedArrayBuffer och data är omedelbart tillgängliga med både huvudtråden och flera webbarbetartrådar.

men att dela minne mellan trådar kan orsaka tävlingsförhållanden. För att undvika rasförhållanden introduceras det globala objektet ”Atomics”. Atomics tillhandahåller olika metoder för att låsa det delade minnet när en tråd använder sina data. Det ger också metoder för att uppdatera sådana data i det delade minnet på ett säkert sätt.

rekommendationen är att använda den här funktionen via något bibliotek, men just nu finns inga bibliotek byggda ovanpå den här funktionen.

om du är intresserad rekommenderar jag att du läser:

  1. från arbetare till delat minne — lucasfcosta
  2. en tecknad intro till SharedArrayBuffers-Lin Clark
  3. delat minne och atomics – Dr. Axel Rauschmayer

2. Taggad Mall bokstavlig begränsning borttagen

först måste vi klargöra vad en ”taggad Mall bokstavlig” är så att vi kan förstå den här funktionen bättre.

i ES2015 + finns det en funktion som kallas en taggad mallbokstav som gör det möjligt för utvecklare att anpassa hur strängar interpoleras. Till exempel interpoleras strängar på standard sätt som nedan…

i tagged literal kan du skriva en funktion för att ta emot de hårdkodade delarna av strängen literal, till exempel och ersättningsvariablerna , till exempel, som parametrar i en anpassad funktion (till exempel greet) och returnera vad du vill från den anpassade funktionen.

nedanstående exempel visar att vår anpassade ” Tag ”- funktion greet lägger till tid på dagen som ” god morgon!””God eftermiddag” och så vidare beroende på tid på dagen till strängen bokstavlig och returnerar en anpassad sträng.

Taggfunktionsexempel som visar Anpassad stränginterpolering

nu när vi diskuterade vad ”taggade” funktioner är, vill många använda den här funktionen i olika domäner, som i Terminal för kommandon och HTTP-förfrågningar för att komponera Uri, och så vidare.

Brasilien problemet med tagged string literal

så om du har en taggad funktion som internt använder någon annan domäns regler (som terminals regler), kan det behöva använda \ubla123abla som inte ser ut som \u0049 eller \u{@f804}, då skulle du få ett syntaxfel.

i ES2018 är reglerna avslappnade för att tillåta sådana till synes ogiltiga flykttecken så länge den taggade funktionen returnerar värdena i ett objekt med en ”kokt” egenskap (där ogiltiga tecken är ”odefinierade”) och sedan en ”rå” egenskap (med vad du vill).

”dotall” flagga för Reguljärt uttryck

för närvarande i RegEx, även om punkten(”.”) ska matcha ett enda tecken, det matchar inte nya radtecken som \n \r \f etc.

till exempel:

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

denna förbättring gör det möjligt för punktoperatören att matcha ett enda tecken. För att säkerställa att detta inte bryter något, måste vi använda \s flagga när vi skapar RegEx för att detta ska fungera.

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

här är det övergripande API från förslaget doc:

ECMAScript 2018-Regex dotAll-funktionen gör det möjligt att matcha även \n via ”.”via / s flagga

RegExp namngivna grupp fångar ?

denna förbättring ger en användbar RegExp funktion från andra språk som Python, Java och så vidare kallas ”namngivna grupper.”Den här funktionen gör det möjligt för utvecklare att skriva RegExp att ge namn (identifierare) i formatet(?<name>...) för olika delar av gruppen i RegExp. De kan sedan använda det namnet för att ta tag i vilken grupp de behöver med lätthet.

4.1 grundläggande namngivna gruppexempel

ECMAScript 2018-Regex namngivna grupper exempel

4.2 Använda namngivna grupper inuti regex själv

vi kan använda formatet \k<group name> för att referera till gruppen i regex själv. Följande exempel visar hur det fungerar.

ECMAScript 2018-Regex namngivna grupper tillbaka refererar via \k< gruppnamn>

4.3 använda namngivna grupper i sträng.prototypstadiet.ersätt

den namngivna gruppfunktionen är nu bakad i strängens replace instansmetod. Så vi kan enkelt byta ord i strängen.

ändra till exempel ”förnamn, efternamn” till ”efternamn, förnamn”.

ECMAScript 2018-med hjälp av RegEx namngivna grupper funktion i ersätt funktion

Rest egenskaper för objekt

Rest operator ... (tre punkter) tillåter oss att extrahera Objektegenskaper som inte redan extraherats.

5.1 du kan använda rest för att hjälpa till att extrahera endast egenskaper du vill ha

ECMAScript 2018-Object destructuring via rest

5.2 ännu bättre, du kan ta bort oönskade objekt! ??

ECMAScript 2018-object destructuring via rest

Spread properties för objekt

Spread properties ser också ut som rest properties med tre punkter ... men skillnaden är att du använder spread för att skapa (omstrukturera) nya objekt.

tips: spridningsoperatören används på höger sida av likhetstecknet. Resten används i vänster sida av likhetstecknet.

ECMAScript 2018-Objektstrukturering via spridning

RegExp Lookbehind påståenden

Detta är en förbättring av RegEx som gör att vi kan se till att någon sträng finns omedelbart *före* någon annan sträng.

du kan nu använda en grupp (?<=…) (frågetecken, mindre än, lika) för att se bakom för positiv påstående.

positiv påstående: låt oss säga att vi vill se till att # – tecknet finns före ordet winning (det vill säga: #winning) och vill att regex ska returnera bara strängen ”vinnande”. Så här skulle du skriva det.

ECMAScript 2018 — (?<=…) for positive assertion

negativt påstående: låt oss säga att vi vill extrahera siffror från rader som har tecken på Macau och inte $ före dessa siffror.

ECMAScript 2018 – (?<!…) för negativa påståenden

RegExp Unicode-egenskap flyr

det var inte lätt att skriva RegEx för att matcha olika unicode-tecken. Saker som \w , \W , \d etc matchar bara engelska tecken och siffror. Men hur är det med siffror på andra språk som Hindi, grekiska och så vidare?

det är där Unicode Property Escapes kommer in. Det visar sig att Unicode lägger till metadataegenskaper för varje symbol (tecken) och använder den för att gruppera eller karakterisera olika symboler.

Unicode-databasen grupperar till exempel Alla Hindi-tecken(Brasilien) under en egenskap som heter Script med värdet Devanagari och en annan egenskap som heter Script_Extensions med samma värde Devanagari. Så vi kan söka efter Script=Devanagari och få alla Hindi-tecken.

Devanagari kan användas för olika indiska språk som Marathi, Hindi, Sanskrit och så vidare.

från och med ECMAScript 2018 kan vi använda \p för att undkomma tecken tillsammans med {Script=Devanagari} för att matcha alla de indiska tecknen. Det vill säga vi kan använda: \p{Script=Devanagari} i RegEx för att matcha alla Devanagari-tecken.

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

på samma sätt grupperar Unicode-databasen alla grekiska tecken under egenskapen Script_Extensions (och Script ) med värdet Greek . Så vi kan söka efter alla grekiska tecken med Script_Extensions=Greek eller Script=Greek.

det vill säga vi kan använda: \p{Script=Greek} i RegEx för att matcha alla grekiska tecken.

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

vidare lagrar Unicode-databasen olika typer av Emojis under de booleska egenskaperna Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, och Emoji_Modifier_Base med egenskapsvärden som ’true’. Så vi kan söka efter alla Emojis genom att helt enkelt välja Emoji för att vara sant.

det vill säga vi kan använda: \p{Emoji}, \Emoji_Modifier och så vidare för att matcha olika typer av Emojis.

följande exempel kommer att göra allt klart.

ECMAScript 2018-visar hur \p kan användas för olika emojis

slutligen kan vi använda capital ”P”(\P ) escape character istället för small p (\p), för att negera matcherna.

  1. ECMAScript 2018 Förslag

Löfte.prototypstadiet.slutligen()

finally() är en ny instansmetod som lades till Promise. Huvudideen är att tillåta att man kör en återuppringning efter antingen resolve eller reject för att hjälpa till att städa upp saker. Callbacken finally anropas utan något värde och körs alltid oavsett vad.

Låt oss titta på olika fall.

ECMAScript 2018-slutligen () i lös fall
ECMAScript 2018-slutligen () i avvisa fall
ECMASCript 2018-slutligen () felaktigt kastat från Promise case
ECMAScript 2018-fel kastas inifrån **fånga** fall

asynkron Iteration

detta är en *extremt* användbar funktion. I grund och botten tillåter det oss att skapa slingor av async-kod med lätthet!

den här funktionen lägger till en ny ”For-await-of” – slinga som gör att vi kan ringa async-funktioner som returnerar löften (eller arrayer med en massa löften) i en slinga. Det häftiga är att slingan väntar på varje löfte att lösa innan du gör till nästa slinga.

ECMAScript 2018 — Async Iterator via för-väntar-av

det är ganska mycket det!

om detta var användbart, klicka på klappa ? knappen nedan några gånger för att visa ditt stöd! ⬇⬇⬇ ??

mina andra inlägg

  1. kolla in dessa användbara ECMAScript 2015 (ES6) tips och tricks
  2. 5 JavaScript ”dåliga” delar som är fasta i ES6
  3. är ”klass” i ES6 den nya ”dåliga” delen?

Lämna ett svar

Din e-postadress kommer inte publiceras.