STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.

Dr.SabinBuragaprofs.info.uaic.ro/~busaco
programare Web: JS modern (ES6 et al.)
www.flickr.com/photos/nathansmith/4704268314/
Full-Stack Web Development
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

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

Care este prezentul și viitorul
limbajului JavaScript?

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
…

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

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

class Robot {
this.power = 0;
}
move () {
}
this.power--;
}
addPower () {
}
this.power++;
}
}
un robot poate fi mutat,
parcurgând o distanță
prestabilită și consumând
o unitate energică
suplimentar, poate fi
alimentat cu energie
în ES6 se pot declara
parametri cu valori implicite

class Robot {
this.power = 0;
}
move () {
}
this.power--;
}
addPower () {
}
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);
}

class R2D2 extends Robot {
constructor (distance) {
super (distance * 2);
}
move () {
super.move ();
this.power++; // R2D2 nu consumă energie ;)
}
}
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++)
a se vedea arhiva
exemplelor

// 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?

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

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

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

Parametrii unei funcții pot fi multipli
(spread/rest parameters)
const DELIM = 'u2605u2A3C'; // 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

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

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

destructurare pentru date de tip Array

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

(aici, parametri ai funcțiilor)
// 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 ());
}

(aici, parametri ai funcțiilor)
// 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 ());
}
rularea programului cu instrumentul interactiv JS Bin

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ă

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

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

// 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;
}) );

// 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

let 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
let pătrate = numere.map (val => Math.pow (val, 2));

let 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
let suma = numere.reduce ((a, b) => a + b);

let 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]
let impare = numere.filter (val => val % 2 === 1);

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);
adaptare după github.com/30-seconds/30-seconds-of-code

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?

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

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

// 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;
adaptare după github.com/30-seconds/30-seconds-of-code

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

// 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);
}

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

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

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

Generatori
oprirea temporară și apoi continuarea execuției
unui generator se realizează via yield
developer.mozilla.org/Web/JavaScript/Reference/Operators/yield

// declararea unui generator de identificatori numerici
function* idMaker () {
var index = 0;
while (index < 3)
yield index++;
}
const gen = idMaker ();
// obținerea unui identificator via generatorul declarat
console.log (gen.next ().value); // 0
console.log (gen.next ().value); // undefined
// iterarea valorilor de identificatori generați
for (let id of idMaker ()) {
console.log (id);
}
vezi exemplul
din arhivă

// declararea unui generator de identificatori numerici
function* idMaker () {
var index = 0;
while (index < 3)
yield index++;
}
const gen = idMaker ();
// obținerea unui identificator via generatorul declarat
console.log (gen.next ().value); // undefined
// iterarea valorilor de identificatori generați
for (let id of idMaker ()) {
console.log (id);
}
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

// 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

// 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]
rezultatul programului
executat de Node.js

pentru aspecte avansate, a se studia:
exploringjs.com/es6/ch_generators.html
www.promisejs.org/generators/

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

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

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ă

Promises
fulfilled – operația s-a terminat cu succes,
oferind un rezultat

Promises
rejected – operația a eșuat,
oferindu-se un motiv (eroarea survenită)

Promises
settled – operația a avut loc (cu succes sau cu eroare)

// 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

// 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"
});

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

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
.then (onFullfilment)
.then ()
.catch ()
pending pending
settled
acțiuni asincrone
(async actions)
.then (onRejection)
.catch (onRejection)
tratarea erorilor
(error handling)
…Promise Promise

Noi tipuri de date ES6
Set
Map
WeakSet
WeakMap
Symbol
Proxy

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

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

Noi tipuri de date ES6: Map
desemnează o colecție
vizând manipularea tablourilor asociative
ordinea cheilor contează (e păstrată),
spre deosebire de Object
de studiat Maya Shavin, ES6: Map vs Object, What and When? (2018)
medium.com/front-end-weekly/es6-map-vs-object-what-and-when-b80621932373

// instanțiem un obiect Map pentru a stoca atribute
// despre profilul unui utilizator în forma cheie-valoare
let profil = new Map();
// stabilim chei (aici, pasiune și mediu)
profil.set ('pasiune', { tip: 'muzica', gen: 'rock', stil: 'progresiv',
grupFavorit: [ 'Pink Floyd', 'Yes' ] }); // un obiect
profil.set ('mediu', 'urban');
if (profil.has ('mediu')) { // verificăm existența unei chei
profil.set ('mediu', 'cosmic');
}
// redăm la consolă valorile cheilor
console.log (profil.get ('pasiune'));
console.log (profil.get ('pasiune').grupFavorit[0]);
// iterarea cheilor & valorilor aferente
profil.forEach((val, cheie) => console.log(`cheie: ${cheie}, valoare: ${val}`));

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)

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
www.sitepoint.com/using-the-new-es6-collections-map-set-weakmap-weakset/

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

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

(în loc de) pauză

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

RegExp – noi operatori + opțiuni
exploringjs.com/es6/ch_regexp.html

String – suport mai bun pentru Unicode
inclusiv vizând internaționalizarea
exploringjs.com/es6/ch_unicode.html
es6-features.org/#UnicodeStringRegExpLiteral

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

// 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

// 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

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

// --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

// --json.js--
function preiaJSON (url, procDate) {
let xhr = new XMLHttpRequest ();
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)));
}
// --main.js-- (utilizarea modulului)
import { oferăConținut } from "json.js";
oferăConținut ("http://undeva.info",
date => { procesează (date); });
aici, importul este identificat prin nume (named import)

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

Browser-ele Web moderne oferă suport complet
pentru încărcarea (a)sincronă a modulelor JS:
<script type="module" src="modul.mjs" async></script>
<script nomodule src="fallback.js"></script>

Browser-ele Web moderne oferă suport complet
pentru încărcarea (a)sincronă a modulelor JS:
<script type="module" src="modul.mjs" async></script>
<script nomodule src="fallback.js"></script>
facilitate descrisă în HTML Living Standard
(15 octombrie 2019)
html.spec.whatwg.org/multipage/scripting.html
tutorial: v8.dev/features/modules

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

Pentru Node.js 12, există doar suport experimental
de parcurs
nodejs.org/api/esm.html

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

specificație standardizată – ediția 7 (2016)
www.ecma-international.org/ecma-262/7.0/

noutate:
operatorul ** (exponent)
let valoareLaCub = val => val ** 3; // Math.pow (val, 3);

// 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)

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

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

specificație standardizată – ediția 8 (iunie 2017)

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

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)

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)

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 ()

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

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

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

specificație standardizată – ediția 9 (2018)

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

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

// 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}`);

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 };

noutate:
iteraț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

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

noutate:
metoda finally() pentru un obiect Promise
promise
.then (rezultat => {···})
.catch (eroare => {···})
.finally (() => {···});

specificație standardizată – ediția 10 (iunie 2019)

noutate:
metodele flat() și flatMap() pentru obiecte de tip Array
exploringjs.com/es2018-es2019/ch_array-prototype-flat-flatmap.html

noutate:
metoda flat() „aplatizează” (flattens) un tablou ce posedă
elemente imbricate, creând o copie a tabloului unde toate
elementele apar pe un singur nivel
flatMap() realizează în prealabil și o asociere (mapping)
tablou.flatMap(funcție)  tablou.map(funcție).flat(1)

// un tablou de tablouri cu nume de membri de echipe
let echipe = [ [ 'Tux', 'Pox' ], // echipa #1
[ 'Puq', [ 'Hax', 'Roa' ] ], // echipa #2
[ 'Tux', 'Roa', 'Muz' ], // echipa #3
'Foh' ]; // și un solitar
console.log (echipe);
console.log (echipe.flat ()); // aplatizăm tabloul
console.log (echipe.flat (2)); // aplatizăm în profunzime
// realizăm și o asociere cu flatMap()
console.log (echipe.flatMap (membru => ('/teams/' + membru) ));

noutate:
metoda Object.fromEntries() pentru a transforma
o listă de perechi cheie—valoare într-un obiect
operație inversă metodei Object.entries()
exploringjs.com/es2018-es2019/ch_object-fromentries.html

noutate:
construcția catch nu necesită parametru obligatoriu
(se ignoră complet eroarea)
try {…} catch {…}

noutate:
tipul String oferă noile metode
trimStart()
trimEnd()

ECMAScript 2020
specificație în lucru (12 octombrie 2019)
tc39.github.io/ecma262/

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 (2019)
exploringjs.com
Wolfram Kriesing, JavaScript Katas (2019)
jskatas.org
Compararea facilităților ECMAScript implementate de
instrumente, navigatoare Web și servere (2019)
kangax.github.io/compat-table/es2016plus/

episodul viitor:
aplicații JavaScript cu Node.js

STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (15)

Similaire à STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.

Similaire à STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al. (20)

Plus de Sabin Buraga

Plus de Sabin Buraga (20)

STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.