Dr. Sabin Buraga profs.info.uaic.ro/~busaco Dezvoltarea aplicațiilor Web la nivel de client programare W

Transcriere

1 Dr. Sabin Buraga profs.info.uaic.ro/~busaco Dezvoltarea aplicațiilor Web la nivel de client programare Web limbajul JavaScript aspecte moderne: ES6 et al.

2 A programming language is low level when its programs require attention to the irrelevant. Alan J. Perlis

3 Care este prezentul și viitorul limbajului JavaScript?

4 ECMAScript 2015 (ES6) definirea de clase perspectiva paradigmei obiectuale parametri cu valori implicite și parametri multipli machete pentru șiruri de caractere (template literals) declararea succintă a funcțiilor anonime (arrow functions) iteratori și generatori notificări privind rezultatul oferit de o funcție (promises) noi tipuri de date e.g., Set, Map, Symbol, Proxy modularizarea codului: module + importuri

5 lista facilităților + exemplificări: es6-features.org ponyfoo.com/articles/es6

6 Definirea de clase (perspectiva paradigmei obiectuale) simple sugar over the prototype-based OO pattern ponyfoo.com/articles/es6-classes-in-depth

7 const DIST = 7, MAXPOWER = 33; class Robot { constructor (distance = 0) { this.power = 0; this.distance = distance; move () { if (this.power < 1) { throw new RangeError ('N-am energie'); this.power--; this.distance += DIST; addpower () { if (this.power >= MAXPOWER) { throw new RangeError ('Bateria e plină'); this.power++;

8 const DIST = 7, MAXPOWER = 33; class Robot { constructor (distance = 0) { this.power = 0; this.distance = distance; move () { if (this.power < 1) { throw new RangeError ('N-am energie'); this.power--; this.distance += DIST; addpower () { if (this.power >= MAXPOWER) { throw new RangeError ('Bateria e plină'); this.power++; în ES6 se pot declara parametri cu valori implicite un robot poate fi mutat, parcurgând o distanță prestabilită și consumând o unitate energică suplimentar, poate fi alimentat cu energie

9 const DIST = 7, MAXPOWER = 33; class Robot { constructor (distance = 0) { this.power = 0; this.distance = distance; move () { if (this.power < 1) { throw new RangeError ('N-am energie'); this.power--; this.distance += DIST; addpower () { if (this.power >= MAXPOWER) { throw new RangeError ('Bateria e plină'); this.power++; // instanțiem un robot // distanța ia valoarea implicită let robot = new Robot (); console.log (robot.distance); try { robot.addpower (); robot.move (); robot.move (); catch (e) { console.error (e.message); finally { console.log ('M-am deplasat cu ' + robot.distance + ' metri, iar energia actuală este ' + robot.power);

10 const DIST = 7, MAXPOWER = 33; class Robot { constructor (distance = 0) { this.power = 0; this.distance = distance; move () { if (this.power < 1) { throw new RangeError ('N-am energie'); this.power--; this.distance += DIST; addpower () { if (this.power >= MAXPOWER) { throw new RangeError ('Bateria e plină'); this.power++; // instanțiem un robot // distanța ia valoarea implicită let robot = new Robot (); console.log (robot.distance); try { robot.addpower (); robot.move (); robot.move (); catch (e) { console.error (e.message); finally { console.log ('M-am deplasat cu ' + robot.distance + ' metri, iar energia actuală este ' + robot.power);

11 class R2D2 extends Robot { constructor (distance) { super (distance * 2); move () { super.move (); this.power++; // R2D2 nu consumă energie ;) a se vedea arhiva exemplelor mai sunt permise: extinderi de clasă via extends acces cu super la membrii din clasa de bază metode de tip get și set metode statice specificate cu prefixul static (similar C++)

12 // instanțiem robotul din clasa R2D2 let r2d2 = new R2D2 (15); try { r2d2.addpower (); // inițial, R2D2 trebuie alimentat cu energie r2d2.move (); catch (e) { console.error (e.message); finally { console.log ('Sunt R2D2, m-am deplasat cu ' + r2d2.distance + ' metri, iar energia curentă este ' + r2d2.power); de ce această valoare?

13 Noi maniere de a declara variabile const valori constante vizibile la nivel de bloc

14 Noi maniere de a declara variabile let alternativă la var, cu vizibilitate la nivel de bloc (mărginirea domeniului de vizibilitate scope) ponyfoo.com/articles/es6-let-const-and-temporal-dead-zone-in-depth

15 function TestareVar () { var x = 33; if (true) { // aceeași variabilă var x = 74; console.log (x); // 74 console.log (x); // 74 function TestareLet () { let x = 33; if (true) { // variabilă diferită! let x = 74; console.log (x); // 74 console.log (x); // 33 developer.mozilla.org/en/docs/web/javascript/reference/statements/let

16 verificarea suportului oferit de navigatoarele Web: instrumentul Can I Use caniuse.com

17 Parametrii unei funcții pot fi multipli (spread/rest parameters) const DELIM = '\u2605\u2a3c'; // caractere Unicode function concatenează (...cuvinte) { return cuvinte.join (DELIM); console.log (concatenează ('ES6', 'e', 'super!')); // "ES6 e super!" ponyfoo.com/articles/es6-spread-and-butter-in-depth

18

19 Destructurare în ES6 (destructuring) binds properties to as many variables as you need and it works with both arrays and objects ponyfoo.com/articles/es6-destructuring-in-depth

20 destructurare pentru date de tip Array // selectarea elementelor dorite dintr-o listă (tablou) let [ primul,, ultimul ] = [ 'Ioana', 'Cezar', Date.now() ]; console.log (primul); // "Ioana" console.log (ultimul); // data curentă în secunde

21 destructurare în cazul obiectelor // oferă ca obiect coordonatele geografice pentru Iași function furnizeazăcoordonate () { return { lat: , long: 27.6 ; var { lat, long = furnizeazăcoordonate (); console.log (lat);

22 destructurare în cazul obiectelor (aici, parametri ai funcțiilor) rularea programului cu instrumentul interactiv JS Bin // furnizează un număr natural generat aleatoriu dintr-un anumit interval function genaleator ({ min = 1, max = 300 = { ) { return Math.floor (Math.random () * (max - min)) + min; for (let it of [1, 2, 3, 4]) { // 4 numere generate aleatoriu console.log (genaleator ());

23 Machete privind substituția de valorile de bază (template literals) machetă = orice șir de caractere delimitat de simbolul ` (inclusiv specificat pe mai multe linii de text multiline) o machetă poate include expresii JavaScript specificate cu ${ ce vor fi înlocuite cu valoarea evaluată

24 var articol = { // obiect JS oferind date despre un articol titlu: 'Machete ES6', subiect: 'facilități privind substituția de valori', slogan: 'Generare HTML cu JS', termeni: [ 'ES6', 'JavaScript', 'HTML5' ] ; var { titlu, subiect, slogan, termeni = articol; // destructurare var html = `<article> <header><h1>${titlu</h1></header> <section> <h2>articol despre ${subiect</h2> <p>${slogan</p> </section> <footer class='subsol'> <ul>${termeni.map (termen => `<li>${termen</li>`).join ('\n\t\t\t')</ul> </footer> </article>`; console.log (html); fiecărui element din tabloul termeni îi corespunde o machetă a cărei valoare va fi un marcaj HTML

25 alte detalii sunt furnizate de ponyfoo.com/articles/es6-template-strings-in-depth es6-features.org/#stringinterpolation

26 Arrow functions declarare succintă a unei funcții anonime parametri => valoareoferită nu posedă propriile valori pentru this, arguments, super ponyfoo.com/articles/es6-arrow-functions-in-depth developer.mozilla.org/web/javascript/reference/functions/arrow_functions

27 // funcție anonimă cu un singur argument de intrare // se întoarce valoarea unei expresii JS console.log ( [2, 3, 5].map (număr => număr * 7) ); // [14, 21, 35] // în JavaScript clasic (ES5): console.log ( [2, 3, 5].map (function (număr) { return număr * 7; ) );

28 // definirea unei funcții recursive în ES6 aici, factorialul let factorial = (număr) => { return număr === 0? 1 : număr * factorial (număr - 1); ; console.log ( factorial (5) ); // 120

29 var numere = [1, 7, 50, 74, 9, 85, 51, 12, 7, 15]; // asocieri între valori și funcții // aici, calculul pătratului fiecărei valori a elementelor din tablou var pătrate = numere.map (val => Math.pow (val, 2));

30 var numere = [1, 7, 50, 74, 9, 85, 51, 12, 7, 15]; // reducerea unui tip de date structurat la o valoare scalară // aici, suma tuturor valorilor: 311 var suma = numere.reduce ((a, b) => a + b);

31 var numere = [1, 7, 50, 74, 9, 85, 51, 12, 7, 15]; // filtrarea valorilor, obținând un sub-tablou // aici, doar numerele impare: [1, 7, 9, 85, 51, 7, 15] var impare = numere.filter (val => val % 2 === 1);

32 adaptare după github.com/30-seconds/30-seconds-of-code var numere = [1, 7, 50, 74, 9, 85, 51, 12, 7, 15]; const MAX = 99; /* întoarce true dacă predicatul func are ca rezultat true pentru orice element al colecției de date cuantificatorul universal oricare (all ) */ const toate = (tablou, func = Boolean) => tablou.every (func); // ce rezultă executând liniile de cod următoare? toate (numere, număr => număr >= 18 && număr < 65); toate (numere, număr => Math.sqrt (număr) <= MAX);

33

34 var numere = [1, 7, 50, 74, 9, 85, 51, 12, 7, 15]; /* întoarce true dacă predicatul func are ca rezultat true pentru măcar un element al colecției de date cuantificatorul existențial */ const există = (tablou, func = Boolean) => tablou.some (func); Cum se specifică în ES6 expresia care verifică dacă există măcar o vârstă de adult printre valorile tabloului numere?

35

36 // convertirea unui număr într-un tablou de cifre const digitizare = număr => [...`${număr`].map (i => parseint(i)); console.log ( digitizare (Math.LOG10E) );

37 // convertirea unui număr într-un tablou de cifre const digitizare = număr => [...`${număr`].map (i => parseint(i)); console.log ( digitizare (Math.LOG10E) );???

38 adaptare după github.com/30-seconds/30-seconds-of-code // trunchierea unui șir de caractere const MIN = 3; const truncșir = (șir, număr) => // dacă lungimea șirului e mai mare decât // numărul de caractere dorit șir.length > număr? // înlocuim caracterele în surplus cu șirul '...' șir.slice (0, număr > MIN? număr - MIN : număr) + '...' : șir;

39

40

41 Iteratori iterarea valorilor se poate realiza asupra oricărui obiect generarea de secvențe de valori (finite ori infinite) ce pot fi procesate via construcția for of ponyfoo.com/articles/es6-iterators-in-depth

42 // Recurgerea la iteratori pentru a genera secvențe infinite de valori const VAL = 7, MAX = 69; let secvmult = { // generează o secvență de nr. multiplicate cu o valoare [Symbol.iterator]() { let curent = 0; // contor disponibil doar în interiorul iteratorului return { next () { // se expune metoda next () pentru a obține următoarea valoare curent++; // metoda next () va întoarce obligatoriu 2 valori return { done: false, // 'true' semnalează că secvența se termină value: curent * VAL // desemnează elementul curent al secvenței ; ; for (let numar of secvmult) { if (numar > MAX) break; // secvența fiind infinită, trebuie să folosim 'break' console.log (numar);

43 rezultat al execuției programului JavaScript de experimentat rularea cu JS Bin

44 Iteratori remarcă: un singur element al secvenței poate fi accesat la un moment dat (lasy in nature)

45 Generatori generator = tip special de iterator ce returnează g obiecte de tip generator care ulterior pot fi iterate cu Array.from (g), [ g] sau for valoare of g ponyfoo.com/articles/es6-generators-in-depth es6-features.org/#generatorfunctioniteratorprotocol

46 Generatori oprirea temporară și apoi continuarea execuției unui generator se realizează via yield developer.mozilla.org/web/javascript/reference/operators/yield

47 // declararea unui generator de identificatori numerici function* idmaker () { var index = 0; while (index < 3) yield index++; const gen = idmaker (); function* declară un generator apelul idmaker () nu execută corpul funcției, ci creează un obiect generator menit a controla execuția instrucțiunilor din corp // obținerea unui identificator via generatorul declarat console.log (gen.next ().value); // 0 console.log (gen.next ().value); // 1 console.log (gen.next ().value); // 2 console.log (gen.next ().value); // undefined // iterarea valorilor de identificatori generați for (let id of idmaker ()) { console.log (id); vezi exemplul din arhivă

48 // generarea secvenței numerelor lui Fibonacci let fib = function* (numere) { let prec = 0, curent = 1; while (numere-- > 0) { [ prec, curent ] = [ curent, prec + curent ]; // destructurare yield curent; // primele 10 numere console.log ([...fib (10) ]); // [1, 2, 3, 5, 8, 13, 21, 34, 55, 89] // al doilea din secvență, apoi restul de la al patrulea încolo let [, n2,,...restul ] = fib (10); console.log (n2, restul); // 2 și [5, 8, 13, 21, 34, 55, 89] adaptare după es6-features.org/#generatormatching

49 pentru aspecte avansate, a se studia: exploringjs.com/es6/ch_generators.html

50 Promises promisiune (promise) rezultat ce ar putea fi oferit în urma execuției unei operații asincrone

51 Promises promisiune (promise) rezultat ce ar putea fi oferit în urma execuției unei operații asincrone represents an operation that has not completed yet, but is expected in the future developer.mozilla.org/web/javascript/reference/global_objects/promise exploringjs.com/es6/ch_promises.html

52 Promises fiecare obiect de tip Promise se poate afla în una dintre stările: pending stare inițială, operația nu s-a terminat sau a fost anulată

53 Promises fiecare obiect de tip Promise se poate afla în una dintre stările: fulfilled operația s-a terminat cu succes, oferind un rezultat

54 Promises fiecare obiect de tip Promise se poate afla în una dintre stările: rejected operația a eșuat, oferindu-se un motiv (eroarea survenită)

55 Promises fiecare obiect de tip Promise se poate afla în una dintre stările: settled operația a avut loc (cu succes sau cu eroare)

56 // implementarea unui obiect Promise var promise = new Promise (function (resolve, reject) { // realizarea unor operații (eventual, în mod asincron) // apoi, în funcție de ceea ce s-a întâmplat if (/* totul e în regulă */) { resolve ("A mers!"); // poate fi prelucrat rezultatul cu then () else { reject (Error ("S-a stricat")); // eroarea poate fi tratată via catch () ); specificația pentru implementarea standardizată: promisesaplus.com biblioteci JS: promisesaplus.com/implementations

57 // implementarea unui obiect Promise var promise = new Promise (function (resolve, reject) { // realizarea unor operații (eventual, în mod asincron) // apoi, în funcție de ceea ce s-a întâmplat if (/* totul e în regulă */) { resolve ("A mers!"); // poate fi prelucrat rezultatul cu then () else { reject (Error ("S-a stricat")); // eroarea poate fi tratată via catch () ); // utilizarea ulterioară promise.then (function(result) { console.log (result); // "A mers!", function(err) { console.log (err); // Error: "S-a stricat" );

58 settled acțiuni asincrone (async actions) pending.then (onfullfilment) pending Promise.then (onrejection).catch (onrejection) Promise.then ().catch () tratarea erorilor (error handling) metodele then () și catch () pot fi înlănțuite

59 settled acțiuni asincrone (async actions) pending.then (onfullfilment) pending Promise.then (onrejection).catch (onrejection) Promise.then ().catch () tratarea erorilor (error handling) metodele then () și catch () pot fi înlănțuite un tutorial, oferind exemple practice: developers.google.com/web/fundamentals/primers/promises a se studia și github.com/wbinnssmith/awesome-promises

60

61 Noi tipuri de date ES6 Set Map WeakSet WeakMap Symbol Proxy

62 Noi tipuri de date ES6: Set structură de date iterabilă implementând conceptul de mulțime (un element apare o singură dată) proprietate: size nu se utilizează length metode: add() delete() clear() entries() has() foreach() keys() values() developer.mozilla.org/web/javascript/reference/global_objects/set

63 Noi tipuri de date ES6: Map structură de date iterabilă de tip asociere cheie valoare (cheile și valorile pot avea orice tip, inclusiv funcții) proprietate: size metode: set() get() delete() clear() entries() has() foreach() keys() values() developer.mozilla.org/web/javascript/reference/global_objects/map

64 Noi tipuri de date ES6: WeakSet similar cu Set, dar reprezintă o mulțime de obiecte și nu de valori arbitrare având diverse tipuri de date în contrast cu Set, obiectele de tip WeakSet nu pot fi enumerate, iar referințele la obiecte sunt weak dacă nu există referințe la una dintre cheile sale, obiectul este eliberat din memorie (garbage collection)

65 Noi tipuri de date ES6: WeakMap similar cu WeakSet, dar fiecare cheie trebuie să fie obiect ponyfoo.com/articles/es6-weakmaps-sets-and-weaksets-in-depth

66 Noi tipuri de date ES6: Symbol un simbol este un tip de date imutabil ce poate fi folosit ca identificator unic pentru proprietățile obiectelor a symbol never clashes with any other property key (symbol or string) exploringjs.com/es6/ch_symbols.html

67 const ST_VESEL = Symbol(' '); const ST_TRIST = Symbol(' '); const ST_NEUTRU = Symbol(' '); function oferăstarecomplementară (stare) { switch (stare) { case ST_VESEL: return ST_TRIST; case ST_TRIST: return ST_VESEL; default: throw new Error ('Stare de spirit necunoscută'); try { console.log (oferăstarecomplementară (ST_TRIST)); // conversia la șir de caractere trebuie realizată explicit console.log (oferăstarecomplementară (ST_VESEL).toString ()); // apelăm funcția având ca argument un simbol nedorit console.log (oferăstarecomplementară (ST_NEUTRU)); catch (e) { console.log (e.message);

68 Noi tipuri de date ES6: Proxy se permite interceptarea și modificarea operațiilor realizate de obiecte e.g., proprietăți de tip getter redefinirea semanticii unor construcții ale limbajului de programare (intercession) aspect al meta-programării exploringjs.com/es6/ch_proxies.html

69 suportul vizând noile tipuri de date ES6 oferit de navigatoarele Web actuale (FF Firefox, CH Chrome, OP Opera, SF Safari) kangax.github.io/compat-table/es6/

70 (în loc de) pauză

71 Extinderea unor tipuri existente Number exprimarea de valori octale și binare const N404octal = 0o624; const N404binar = 0b ; console.log (N404octal == N404binar); // true

72 Extinderea unor tipuri existente RegExp noi operatori + opțiuni exploringjs.com/es6/ch_regexp.html

73 Extinderea unor tipuri existente String suport mai bun pentru Unicode inclusiv vizând internaționalizarea exploringjs.com/es6/ch_unicode.html es6-features.org/#unicodestringregexpliteral

74 Tablouri respectând un anumit tip de date typed arrays utile pentru a manipula în principal date binare: întregi (cu/fără semn) cu stocare pe 8, 16, 32 de biți Int8Array Uint8Array Int16Array Int32Array etc. numere reale reprezentate pe 32 sau 64 de biți Float32Array Float64Array exploringjs.com/es6/ch_typed-arrays.html

75 // definim o structură de date pe 24 de octeți, similară celei din limbajul C: // struct Animal { unsigned long id; char nume[16]; float mărime class Animal { constructor (mem = new ArrayBuffer (24)) { // alocăm memoria necesară this.mem = mem; ; // gestionarea memoriei corespunzătoare datelor de stocat (un buffer) set mem (date) { // stocarea datelor în zona de memorie alocată this._mem = date; // intern, vor fi folosite proprietăți private this._id = new Uint32Array (this._mem, 0, 1); this._nume = new Uint8Array (this._mem, 4, 16); this._mărime = new Float32Array (this._mem, 20, 1); get mem () { // obținerea datelor stocate return this._mem; adaptare după es6-features.org/#typedarrays

76 // metode setter/getter pentru fiecare membru în parte set id (v) { this._id[0] = v; get id () { return this._id[0]; set nume (v) { this._nume = v; get nume () { return this._nume; set mărime (v) { this._mărime[0] = v; get mărime () { return this._mărime[0]; let tux = new Animal (); tux.id = 69; tux.nume = "Tux"; tux.mărime = 15.74; console.log (`Obiectul ${tux.nume are identificatorul ${tux.id și mărimea ${tux.marime.`); adaptare după es6-features.org/#typedarrays

77

78 Module scop: modularizarea + reutilizarea codului-sursă spre deosebire de JavaScript clasic, unde modularizarea se baza pe biblioteci externe (CommonJS sau RequireJS care adoptă AMD Asynchronous Module Definition), în ES6 există suport nativ exploringjs.com/es6/ch_modules.html

79 // --json.js-- function preiajson (url, procdate) { // preia de la un URL date JSON let xhr = new XMLHttpRequest (); // procesate cu funcția procdate xhr.onload = function () { procdate (this.responsetext) ; xhr.open ("GET", url, true); xhr.send (); export function oferăconținut (url, procdate) { preiajson (url, date => procdate (JSON.parse (date))); specificarea unui modul stocat într-un fișier conform politicii one module per file & one file per module ce oferă (exportă) funcționalități

80 // --json.js-- function preiajson (url, procdate) { let xhr = new XMLHttpRequest (); xhr.onload = function () { procdate (this.responsetext) ; xhr.open ("GET", url, true); xhr.send (); // --main.js-- (utilizarea modulului) import { oferăconținut from "json.js"; oferăconținut (" date => { procesează (date); ); export function oferăconținut (url, procdate) { preiajson (url, date => procdate (JSON.parse (date))); aici, importul este identificat prin nume (named import)

81 Remarci: importul modulelor se poate realiza oriunde în program (imports are hoisted) structura modulelor e statică nu se pot realiza importuri/exporturi condiționale se oferă suport pentru dependențe ciclice

82 suport pentru încărcarea modulelor JS cu <script type="module"> </script> tutorial: developers.google.com/web/fundamentals/primers/modules

83 Instrumente ES6 în principal, convertire ES6 ES5 Babel babeljs.io Traceur github.com/google/traceur-compiler altele la github.com/addyosmani/es6-tools

84 ECMAScript 2016 (ES7) specificație standardizată ediția 7 (2016)

85 ECMAScript 2016 (ES7) noutate: operatorul ** (exponent) let valoarelacub = val => val ** 3; // Math.pow (val, 3);

86 // prelucrări statistice var numere = [1, 7, 50, 74, 9, 85, 51, 12, 7, 15]; // funcție ce calculează deviația standard const devstd = (valori, pop = false) => { const media = valori.reduce ((tablou, val) => tablou + val, 0) / valori.length; return Math.sqrt ( valori.reduce ((acurat, val) => acurat.concat ((val - media) ** 2), []).reduce ((acurat, val) => acurat + val, 0) / (valori.length - (pop? 0 : 1)) ); ; // afișarea deviației standard console.log (devstd (numere) ); // eșantion (sample) console.log (devstd (numere, true) ); // populație (population)

87 pentru amănunte, a se studia 30 Second of Code github.com/30-seconds/30-seconds-of-code

88 ECMAScript 2016 (ES7) noutate: verificarea faptului că un element aparține unui tablou metoda Array.includes ()

89 ECMAScript 2017 (ES8) specificație standardizată ediția 8 (iunie 2017)

90 ECMAScript 2017 (ES8) noutate: funcții asincrone (async functions) definirea unei funcții asincrone conduce la obținerea unui obiect de tip AsyncFunction developer.mozilla.org/web/javascript/reference/statements/async_function

91 Funcții asincrone (async functions) la apelare, o funcție asincronă oferă un obiect de tip Promise acesta e creat la execuția funcției asincrone

92 Funcții asincrone (async functions) la apelare, o funcție asincronă oferă un obiect de tip Promise acesta e creat la execuția funcției asincrone este executat corpul funcției execuția poate fi terminată permanent via return (succes) ori throw (caz de eroare)

93 Funcții asincrone (async functions) la apelare, o funcție asincronă oferă un obiect de tip Promise acesta e creat la execuția funcției asincrone este executat corpul funcției execuția poate fi terminată permanent via return (succes) ori throw (caz de eroare) sau poate fi temporar oprită via await (uzual, execuția va fi reluată ulterior)

94 Funcții asincrone (async functions) programul poate fi notificat atunci când este disponibil rezultatul unei funcții obiectul Promise e în starea settled adică operația a avut loc (cu succes sau cu eroare): se recurge la metodele then () și, eventual, catch ()

95 Funcții asincrone (async functions) programul poate fi notificat atunci când este disponibil rezultatul unei funcții obiectul Promise e în starea settled adică operația a avut loc (cu succes sau cu eroare): se recurge la metodele then () și, eventual, catch () această notificare are loc în mod asincron exploringjs.com/es2016-es2017/ch_async-functions.html

96 const MAXITER = 7; async function funcasinc1 () { for (let i = 1; i <= MAXITER; i++) { console.log (`Asincron 1: ${i`); ; return "Java"; async function funcasinc2 () { for (let i = 1; i <= MAXITER; i++) { console.log (`Asincron 2: ${i`); ; return "Script"; async function funcasincp () { // se așteaptă execuția ambelor funcții asincrone const [rez1, rez2] = await Promise.all ([ funcasinc1 (), funcasinc2 (), ]); return rez1 + rez2; // deoarece o funcție asincronă întoarce un obiect Promise, // putem folosi metoda then (); // pentru a trata erorile se va recurge la catch () funcasincp().then (r => console.log (`Rezultat: ${r`)); console.log ("Program principal");

97 const MAXITER = 7; async function funcasinc1 () { for (let i = 1; i <= MAXITER; i++) { console.log (`Asincron 1: ${i`); ; return "Java"; async function funcasinc2 () { for (let i = 1; i <= MAXITER; i++) { console.log (`Asincron 2: ${i`); ; return "Script"; async function funcasincp () { // se așteaptă execuția ambelor funcții asincrone const [rez1, rez2] = await Promise.all ([ funcasinc1 (), funcasinc2 (), ]); return rez1 + rez2; // deoarece o funcție asincronă întoarce un obiect Promise, // putem folosi metoda then (); // pentru a trata erorile se va recurge la catch () funcasincp().then (r => console.log (`Rezultat: ${r`)); console.log ("Program principal");

98 de aprofundat articolul N. Grozev, Await and Async Explained with Diagrams & Examples (2017): nikgrozev.com/2017/10/01/async-await/

99 ECMAScript 2017 (ES8) noutate: memorie partajată (shared memory) via obiectul SharedArrayBuffer + operații atomice oferite de obiectul global Atomics pentru detalii și exemplificări, a se parcurge exploringjs.com/es2016-es2017/ch_shared-array-buffer.html

100 compararea facilităților oferite în prezent de versiunile ECMAScript 2016 și ECMAScript 2017 kangax.github.io/compat-table/es2016plus/

101 ECMAScript 2018 (ES9) specificație standardizată ediția 9 (2018)

102 ECMAScript 2018 (ES9) noutate: extinderea suportului pentru expresii regulate detalii în Axel Rauschmayer, Exploring ES2018 and ES2019 exploringjs.com/es2018-es2019/

103 ECMAScript 2018 (ES9) noutate: operatorul poate fi folosit și pentru proprietăți ale obiectelor (object spread/rest properties) exploringjs.com/es2018-es2019/ch_rest-spread-properties.html

104 // preluarea proprietăților enumerabile dintr-un obiect let { nume, mărime,...altele = { nume: 'Tux', mărime: 2, oferta: true, disponibil: false ; console.log (altele); console.log (`Jucăria se numește ${nume; oferta: ${altele.oferta`);

105 ECMAScript 2018 (ES9) noutate: operatorul poate fi folosit și pentru proprietăți ale obiectelor (object spread/rest properties) utilizări: clonarea și fuziunea obiectelor const clona = {...obiect ; const fuziune = {...obiect1,...obiect2 ;

106 ECMAScript 2018 (ES9) noutate: interații asincrone (interfețele AsyncIterable și AsyncIterator), generatori asincroni + construcția for-await-of explicații și exemplificări: exploringjs.com/es2018-es2019/ch_asynchronous-iteration.html

107 ECMAScript 2018 (ES9) noutate: metoda finally() pentru un obiect Promise se poate defini o funcție de tip callback al cărei cod va fi întotdeauna executat la terminarea unei promisiuni exploringjs.com/es2018-es2019/ch_promise-prototype-finally.html

108 ECMAScript 2018 (ES9) noutate: metoda finally() pentru un obiect Promise promise.then (rezultat => { ).catch (eroare => { ).finally (() => { );

109 facilități ECMAScript 2018 în navigatoarele Web kangax.github.io/compat-table/es2016plus/

110 Alte resurse disponibile liber: Nicholas C. Zakas, Understanding ECMAScript 6 (2015) leanpub.com/understandinges6/read Ryan Christiani, Let s Learn ES6 (2018) bubblin.io/book/let-s-learn-es6-by-ryan-christiani/ Axel Rauschmayer, Exploring JS: JavaScript books for programmers (2018) exploringjs.com Wolfram Kriesing, ES6 Katas (2016) es6katas.org

111 ECMAScript 2019 (ES10) specificație în lucru (1 noiembrie 2018) tc39.github.io/ecma262/

112 episodul viitor: JavaScript în cadrul browser-ului Web