Iată Exemple de tot ce este nou în ECMAScript 2016, 2017 și 2018

votează rajaraodv

este greu pentru a urmări ceea ce este nou în JavaScript (ECMAScript). Și este și mai greu să găsești Exemple de cod utile.

Deci, în acest articol, voi acoperi toate caracteristicile 18 care sunt enumerate în propunerile finalizate ale TC39 care au fost adăugate în ES2016, ES2017 și ES2018 (proiect final) și le voi arăta cu exemple utile.

aceasta este o postare destul de lungă, dar ar trebui să fie ușor de citit. Gândiți-vă la acest lucru ca la „Netflix binge reading.”Până la sfârșitul acestui lucru, vă promit că veți avea o mulțime de cunoștințe despre toate aceste caracteristici.

ok, să trecem peste acestea unul câte unul.

Array.prototip.include

includes este o metodă simplă instanță pe matrice și ajută pentru a găsi cu ușurință dacă un element este în matrice (inclusiv NaNspre deosebire de indexOf).

Trivia: JavaScript spec oamenii au vrut să-l numească contains , dar acest lucru a fost aparent deja folosit de Mootools, astfel încât au folosit includes .

exponentiere infix operator

operații matematice , cum ar fi adunare și scădere au operatori infix, cum ar fi + și -, respectiv. Similar cu acestea, operatorul infix ** este utilizat în mod obișnuit pentru funcționarea exponentă. În ECMAScript 2016, ** a fost introdus în loc de Math.pow.

obiect.valori()

Object.values() este o funcție nouă care este similară cu Object.keys(), dar returnează toate valorile proprietăților proprii ale obiectului, excluzând orice valoare(valori) din lanțul prototipic.

obiect.intrări()

Object.entries() este legat de Object.keys, dar în loc să returneze doar chei, returnează atât cheile, cât și valorile în modul matrice. Acest lucru face foarte simplu să faci lucruri precum utilizarea obiectelor în bucle sau transformarea obiectelor în Hărți.

exemplu 1:

exemplu 2:

string padding

două metode de instanță au fost adăugate la String — String.prototype.padStart și String.prototype.padEnd — care permit adăugarea/prepending fie un șir gol sau un alt șir la începutul sau la sfârșitul șirului original.

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

acest lucru este util atunci când dorim să aliniem lucrurile în scenarii precum afișarea destul de tipărită sau imprimarea terminalului.

3.1 exemplu padStart:

în exemplul de mai jos, avem o listă de numere de lungimi diferite. Vrem să prepend „0”, astfel încât toate elementele au aceeași lungime de 10 cifre în scopuri de afișare. Putem folosi padStart(10, '0') pentru a realiza cu ușurință acest lucru.

3.2 exemplu padEnd:

padEnd într-adevăr vine la îndemână atunci când tipărim mai multe articole de diferite lungimi și dorim să le aliniem corect.

exemplul de mai jos este un bun exemplu realist al modului în care padEnd, padStart și Object.entries se reunesc pentru a produce o ieșire frumoasă.

3.3 ⚠️ padStart și padEnd pe Emojis și alte caractere dublu-octet

Emojis și alte caractere dublu-octet sunt reprezentate folosind mai mulți octeți de unicode. Deci, padStart și padEnd s-ar putea să nu funcționeze așa cum era de așteptat!

de exemplu: să presupunem că încercăm să tamponăm șirul heart pentru a ajunge la 10 caractere cu emoji-ul de la XV. Rezultatul va arăta mai jos:

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

acest lucru se datorează faptului că lungimea de 2 puncte de cod ('\u2764\uFE0F') este egală cu numărul de puncte de cod! Cuvântul heart în sine este de 5 caractere, deci avem doar un total de 5 caractere rămase la pad. Deci, ceea ce se întâmplă este că JS tampoane două inimi folosind '\u2764\uFE0F' și care produce la fel de mult ca și. Pentru ultima folosește pur și simplu primul octet al inimii \u2764 care produce

, așa că ajungem cu: ❤️❤️❤heart

PS: puteți utiliza acest link pentru a verifica conversiile Unicode char.

obiect.getOwnPropertyDescriptors

această metodă returnează toate detaliile (inclusiv metodele getter get și setter set) pentru toate proprietățile unui obiect dat. Principala motivație pentru a adăuga acest lucru este de a permite copierea / clonarea superficială a unui obiect într-un alt obiect care copiază și funcțiile getter și setter, spre deosebire de Object.assign .

obiect.atribuiți copii superficiale toate detaliile, cu excepția funcțiilor getter și setter ale obiectului sursă original.

exemplul de mai jos arată diferența dintre Object.assign și Object.getOwnPropertyDescriptors împreună cu Object.defineProperties pentru a copia un obiect original Car într-un obiect nou ElectricCar. Veți vedea că prin utilizarea Object.getOwnPropertyDescriptors, discount funcțiile getter și setter sunt, de asemenea, copiate în obiectul țintă.

înainte…

după…

adăugați virgule finale în parametrii funcției

aceasta este o actualizare minoră care ne permite să avem virgule finale după ultimul parametru de funcție. De ce? Pentru a vă ajuta cu instrumente precum git blame pentru a vă asigura că numai dezvoltatorii noi sunt învinovățiți.

exemplul de mai jos arată problema și soluția.

Notă: puteți apela și funcții cu virgule la sfârșit!

asincron/așteaptă

aceasta, de departe, este cea mai importantă și mai utilă caracteristică dacă mă întrebați. Funcțiile asincron ne permit să nu ne ocupăm de iadul de apel invers și să facem întregul cod să pară simplu.

cuvântul cheie async spune compilatorului JavaScript să trateze funcția diferit. Compilatorul se oprește ori de câte ori ajunge la await cuvânt cheie în cadrul acestei funcții. Se presupune că expresia după await returnează o promisiune și așteaptă până când promisiunea este rezolvată sau respinsă înainte de a merge mai departe.

în exemplul de mai jos, funcția getAmount apelează două funcții asincrone getUser și getBankBalance. Putem face acest lucru în promisiune, dar utilizarea async await este mai elegantă și mai simplă.

6.1 funcțiile asincron se întoarce o promisiune.

dacă așteptați rezultatul dintr-o funcție asincronă, trebuie să utilizați sintaxa then a promisiunii pentru a captura rezultatul acesteia.

în exemplul următor, dorim să înregistrăm rezultatul folosind console.log dar nu în doubleAndAdd. Așadar, vrem să așteptăm și să folosim sintaxa then pentru a trece rezultatul la console.log .

6.2 apelarea asincron/așteaptă în paralel

în exemplul anterior sunăm așteaptă de două ori, dar de fiecare dată așteptăm o secundă (total 2 secunde). În schimb, îl putem paraleliza, deoarece a și bnu depind unul de celălalt folosind Promise.all.

6.3 eroare de manipulare asincron / așteaptă funcții

există diferite moduri de a gestiona erorile atunci când se utilizează asincron așteaptă.

opțiunea 1 — utilizați try catch în cadrul funcției

Opțiunea 2— prindeți fiecare expresie waiting

deoarece fiecare expresie await returnează o promisiune, puteți prinde erori pe fiecare linie așa cum se arată mai jos.

Opțiunea 3 — prinde întreaga asincronă-așteaptă funcția

ECMAScript este în prezent în proiect final și va fi lansat în iunie sau iulie 2018. Toate caracteristicile acoperite mai jos sunt în etapa 4 și vor face parte din ECMAScript 2018.

1. Memorie partajată și atomics

aceasta este o caracteristică uriașă, destul de avansată și este un accesoriu de bază pentru motoarele JS.

ideea principală este de a aduce un fel de caracteristică multi-threading JavaScript, astfel încât dezvoltatorii JS să poată scrie programe concurente de înaltă performanță în viitor, permițând gestionarea memoriei singure în loc să lase motorul JS să gestioneze memoria.

acest lucru este realizat de un nou tip de obiect global numit SharedArrayBuffer care stochează în esență date într-un spațiu de memorie partajat. Deci, aceste date pot fi partajate între firul principal JS și firele web-worker.

până acum, dacă vrem să partajăm date între firul principal JS și lucrătorii web, a trebuit să copiem datele și să le trimitem la celălalt fir folosind postMessage. Nu mai!

pur și simplu utilizați SharedArrayBuffer și datele sunt accesibile instantaneu atât prin firul principal, cât și prin mai multe fire web-worker.

dar partajarea memoriei între fire poate provoca condiții de cursă. Pentru a evita condițiile de rasă, este introdus obiectul global „Atomics”. Atomics oferă diferite metode pentru a bloca memoria partajată atunci când un fir utilizează datele sale. De asemenea, oferă metode de actualizare a acestor date în acea memorie partajată în siguranță.

recomandarea este de a utiliza această caracteristică prin intermediul unor biblioteci, dar acum nu există biblioteci construite pe partea de sus a acestei caracteristici.

dacă sunteți interesat, vă recomand să citiți:

1. de la muncitori la memorie partajată-lucasfcosta
2. un intro de desene animate pentru SharedArrayBuffers-Lin Clark
3. memorie partajată și atomică – Dr. Axel Rauschmayer

2. Tagged șablon restricție literală eliminat

în primul rând, avem nevoie pentru a clarifica ceea ce un „șablon etichetat literal” este astfel încât să putem înțelege mai bine această caracteristică.

în ES2015+, există o caracteristică numită șablon etichetat literal care permite dezvoltatorilor să personalizeze modul în care șirurile sunt interpolate. De exemplu, în modul standard șirurile sunt interpolate ca mai jos…

în literalul etichetat, puteți scrie o funcție pentru a primi părțile hardcodate ale literalului șirului, de exemplu și variabilele de înlocuire , de exemplu,, ca parametri într-o funcție particularizată (de exemplu greet) și returnați orice doriți de la acea funcție particularizată.

exemplul de mai jos arată că funcția noastră personalizată „etichetă” greet adaugă ora zilei ca „Bună dimineața!””Bună ziua”, și așa mai departe, în funcție de ora din zi la șir literal și returnează un șir personalizat.

acum, că am discutat despre ceea ce sunt funcțiile „etichetate”, mulți oameni doresc să utilizeze această caracteristică în diferite domenii, cum ar fi în Terminal pentru comenzi și cereri HTTP pentru compunerea uri, și așa mai departe.

Olt problema cu șir tagged literal

deci, dacă aveți o funcție tagged care utilizează pe plan intern regulile unui alt domeniu (cum ar fi Regulile terminalului), care ar putea avea nevoie pentru a utiliza \ubla123abla care nu arata ca \u0049 sau \u{@f804}, atunci v-ar primi o eroare de sintaxă.

în ES2018, regulile sunt relaxate pentru a permite astfel de caractere de evadare aparent nevalide, atâta timp cât funcția etichetată returnează valorile într-un obiect cu o proprietate „gătită” (unde caracterele nevalide sunt „nedefinite”) și apoi o proprietate „brută” (cu orice doriți).

steagul”dotall” pentru expresia regulată

în prezent în RegEx, deși punctul(„.”) se presupune că se potrivește cu un singur caracter, nu se potrivește cu caractere noi de linie precum \n \r \f etc.

de exemplu:

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

acest accesoriu face posibil ca operatorul dot pentru a se potrivi orice caracter unic. Pentru a ne asigura că acest lucru nu rupe nimic, trebuie să folosim \s pavilion atunci când vom crea RegEx pentru ca aceasta să funcționeze.

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

iată API-ul general din propunerea doc:

RegExp numit capturi de grup ?

această îmbunătățire aduce o caracteristică RegExp utilă din alte limbi, cum ar fi Python, Java și așa mai departe numite „grupuri numite.”Această caracteristică permite dezvoltatorilor care scriu RegExp să furnizeze nume (identificatori) în formatul(?<name>...) pentru diferite părți ale grupului din RegExp. Ei pot folosi apoi acest nume pentru a apuca orice grup au nevoie cu ușurință.

4.1 de bază grup numit exemplu

4.2 folosind grupuri numite în regex în sine

putem folosi formatul \k<group name> pentru a face referire înapoi la grupul din regex în sine. Următorul exemplu arată cum funcționează.

4.3 utilizarea grupurilor numite în șir.prototip.înlocuiți

caracteristica grupului numit este acum coaptă în metoda de instanță replace a șirului. Deci, putem schimba cu ușurință cuvinte în șir.

de exemplu, schimbați „firstName, lastName” în „lastName, firstName”.

proprietăți Rest pentru obiecte

Operator Rest ... (trei puncte) ne permite să extragem proprietăți obiect care nu sunt deja extrase.

5.1 puteți utiliza rest pentru a extrage numai proprietățile dorite

5.2 chiar mai bine, puteți elimina elementele nedorite! ??

proprietăți Spread pentru obiecte

proprietățile Spread arată, de asemenea, la fel ca proprietățile rest cu trei puncte ..., dar diferența este că utilizați spread pentru a crea (restructura) obiecte noi.

sfat: operatorul de răspândire este utilizat în partea dreaptă a semnului egal. Restul sunt folosite în partea stângă a semnului egal.

afirmații RegExp Lookbehind

aceasta este o îmbunătățire a Regexului care ne permite să ne asigurăm că există un șir imediat *înainte* un alt șir.

acum Puteți utiliza un grup (?<=…) (semn de întrebare, mai mic decât, egal) pentru a căuta în urmă afirmații pozitive.

afirmatie pozitiva: sa spunem ca vrem sa ne asiguram ca semnul # exista inaintea cuvantului winning (adica: #winning) si dorim ca regexul sa returneze doar sirul „castigator”. Iată cum ai scrie-o.

afirmație negativă: să presupunem că vrem să extragem numere din linii care au semne de un sfert de milion și nu semne de dolari înainte de aceste numere.

proprietatea RegExp Unicode scapă

nu a fost ușor să scrieți RegEx pentru a se potrivi diferitelor caractere unicode. Lucruri ca \w , \W , \d etc Se potrivesc numai caractere și numere în limba engleză. Dar cum rămâne cu numerele din alte limbi, cum ar fi Hindi, greacă și așa mai departe?

acolo intră evadările proprietății Unicode. Se pare că Unicode adaugă proprietăți de metadate pentru fiecare simbol (caracter) și îl folosește pentru a grupa sau caracteriza diferite simboluri.

de exemplu, baza de date Unicode grupează toate caracterele Hindi(XV) sub o proprietate numită Script cu valoare Devanagari și o altă proprietate numită Script_Extensionscu aceeași valoare Devanagari. Deci, putem căuta Script=Devanagari și de a lua toate caracterele Hindi.

Devanagari poate fi folosit pentru diferite limbi indiene, cum ar fi Marathi, Hindi, Sanscrită, și așa mai departe.

începând din ECMAScript 2018, putem folosi \p pentru a scăpa de caractere împreună cu {Script=Devanagari} pentru a se potrivi cu toate acele caractere indiene. Adică putem folosi: \p{Script=Devanagari} în RegEx pentru a se potrivi cu toate caracterele Devanagari.

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

în mod similar, baza de date Unicode grupează toate caracterele grecești sub proprietatea Script_Extensions (și Script ) cu valoarea Greek . Deci, putem căuta toate caracterele grecești folosind Script_Extensions=Greek sau Script=Greek.

adică putem folosi: \p{Script=Greek} în RegEx pentru a potrivi toate caracterele grecești.

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

mai mult, baza de date Unicode stochează diferite tipuri de Emoji sub proprietățile booleeneEmoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, și Emoji_Modifier_Base cu valori de proprietate ca ‘true’. Deci, putem căuta toate emoji-urile selectând pur și simplu Emoji pentru a fi adevărat.

adică putem folosi: \p{Emoji}, \Emoji_Modifier și așa mai departe pentru a potrivi diferite tipuri de Emoji.

următorul exemplu va clarifica totul.

în cele din urmă, putem folosi de capital „P”(\P) caracter de evacuare în loc de mici p (\p), pentru a nega meciurile.

1. ECMAScript 2018 Propunere

Promisiune.prototip.în cele din urmă()

finally() este o nouă metodă de instanță care a fost adăugată la Promise. Ideea principală este de a permite rularea unui apel invers după resolve sau reject pentru a ajuta la curățarea lucrurilor. Apelul invers finally este apelat fără nicio valoare și este întotdeauna executat indiferent de ce.

Să analizăm diferite cazuri.

iterație asincronă

aceasta este o caracteristică *extrem de utilă. Practic ne permite să creăm bucle de cod asincron cu ușurință!

această caracteristică adaugă o nouă buclă „for-wait-of” care ne permite să apelăm funcții asincron care returnează promisiuni (sau tablouri cu o grămadă de promisiuni) într-o buclă. Interesant este că bucla așteaptă ca fiecare promisiune să se rezolve înainte de a face următoarea buclă.

asta e destul de mult!

dacă acest lucru a fost util, vă rugăm să faceți clic pe clap ? butonul de mai jos de câteva ori pentru a arăta sprijinul dumneavoastră! ⬇⬇⬇ ??

alte posturi mele

1. Check out aceste utile ECMAScript 2015 (ES6) sfaturi și trucuri
2. 5 JavaScript părți „rele”, care sunt fixate în ES6
3. este „clasa” în ES6 noua parte „rău”?