Full-Stack Web Developmentbusaco/teach/courses/staw/... · 2019. 10. 22. · programare Web: JS modern (ES6 et al.) / 14 / Full-Stack Web Development Dr. Sabin Corneliu Buraga

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

programare Web: JS modern (ES6 et al.) ww

w.f

lickr.

co

m/p

hoto

s/n

ath

an

sm

ith/4

704

26

831

4/

Full-Stack Web Development

Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Alan J. Perlis

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Care este prezentul și viitorullimbajului JavaScript?

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

…

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

lista facilităților + exemplificări:es6-features.org

ponyfoo.com/articles/es6

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Definirea de clase(perspectiva paradigmei obiectuale)

“simple sugar over the prototype-based OO pattern”

ponyfoo.com/articles/es6-classes-in-depth

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

}}

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co







}}

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 declaraparametri cu valori implicite

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co







}}

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

}

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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 extendsacces – cu super – la membrii din clasa de bază

metode de tip get și setmetode statice specificate cu prefixul static (similar C++)

a se vedea arhiva exemplelor

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

// instanțiem robotul din clasa R2D2let r2d2 = new R2D2 (15);try {

r2d2.addPower (); // inițial, R2D2 trebuie alimentat cu energier2d2.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?

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Noi maniere de a declara variabile

const – valori constante vizibile la nivel de bloc

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

function TestareLet () {

let x = 33;

if (true) {

// variabilă diferită!

let x = 74;

console.log (x); // 74

}


}

function TestareVar () {

var x = 33;

if (true) {

// aceeași variabilă

var x = 74;


}


}

developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

verificarea suportului oferit de navigatoarele Web: instrumentul Can I Use

caniuse.com

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

destructurare pentru date de tip Array

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

destructurare în cazul obiectelor (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 ());

}

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

destructurare în cazul obiectelor (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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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ă

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

var articol = { // obiect JS oferind date despre un articoltitlu: '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; // destructurarevar html = `

${titlu}

Articol despre ${subiect}

${slogan}

${termeni.map (termen => `${termen}`).join ('\n\t\t\t')}

`;

console.log (html);

fiecărui element din tabloul termeni îi corespunde o machetă a cărei valoare va fi un marcaj HTML

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

alte detalii sunt furnizate deponyfoo.com/articles/es6-template-strings-in-depth

es6-features.org/#StringInterpolation

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Arrow functions

declarare succintă a unei funcții anonimeparametri => valoareOferită

nu posedă propriile valori pentru this, arguments, super

ponyfoo.com/articles/es6-arrow-functions-in-depthdeveloper.mozilla.org/Web/JavaScript/Reference/Functions/Arrow_functions

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

}) );

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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?

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

// convertirea unui număr într-un tablou de cifre

const digitizare = număr => [...`${număr}`].map (i => parseInt(i));

console.log ( digitizare (Math.LOG10E) );

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

// convertirea unui număr într-un tablou de cifre

const digitizare = număr => [...`${număr}`].map (i => parseInt(i));

console.log ( digitizare (Math.LOG10E) ); ???

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

// Recurgerea la iteratori pentru a genera secvențe infinite de valoriconst 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 iteratoruluireturn {

next () { // se expune metoda next () pentru a obține următoarea valoarecurent++;// metoda next () va întoarce obligatoriu 2 valorireturn {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);

}

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

rezultat al execuției programului JavaScript

de experimentat rularea cu JS Bin

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Iteratori

remarcă:un singur element al secvenței poate fi accesat

la un moment dat (lasy in nature)

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Generatori

generator = tip special de iterator ce returnează gobiecte 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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Generatori

oprirea temporară și apoi continuarea execuției unui generator se realizează via yield

developer.mozilla.org/Web/JavaScript/Reference/Operators/yield

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

// declararea unui generator de identificatori numericifunction* idMaker () {

var index = 0;while (index < 3)yield index++;

}

const gen = idMaker ();

// obținerea unui identificator via generatorul declaratconsole.log (gen.next ().value); // 0console.log (gen.next ().value); // 1console.log (gen.next ().value); // 2console.log (gen.next ().value); // undefined

// iterarea valorilor de identificatori generațifor (let id of idMaker ()) {

console.log (id);}

vezi exemplul din arhivă

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

// declararea unui generator de identificatori numericifunction* idMaker () {

var index = 0;while (index < 3)yield index++;

}

const gen = idMaker ();

// obținerea unui identificator via generatorul declaratconsole.log (gen.next ().value); // 0console.log (gen.next ().value); // 1console.log (gen.next ().value); // 2console.log (gen.next ().value); // undefined

// iterarea valorilor de identificatori generațifor (let id of idMaker ()) {

console.log (id);}

function* declară un generatorapelul idMaker () nu execută corpul

funcției, ci creează un obiect generator menit a controla execuția instrucțiunilor din corp

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

// generarea secvenței numerelor lui Fibonaccilet fib = function* (numere) {

let prec = 0, curent = 1;while (numere-- > 0) {

[ prec, curent ] = [ curent, prec + curent ]; // destructurareyield curent;

} }

// primele 10 numereconsole.log ([ ...fib (10) ]); // [1, 2, 3, 5, 8, 13, 21, 34, 55, 89]

// al doilea din secvență, apoi restul de la al patrulea încololet [ , n2, , ...restul ] = fib (10);console.log (n2, restul); // 2 și [5, 8, 13, 21, 34, 55, 89]

adaptare după es6-features.org/#GeneratorMatching

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

// generarea secvenței numerelor lui Fibonaccilet fib = function* (numere) {

let prec = 0, curent = 1;while (numere-- > 0) {

[ prec, curent ] = [ curent, prec + curent ]; // destructurareyield curent;

} }

// primele 10 numereconsole.log ([ ...fib (10) ]); // [1, 2, 3, 5, 8, 13, 21, 34, 55, 89]

// al doilea din secvență, apoi restul de la al patrulea încololet [ , n2, , ...restul ] = fib (10);console.log (n2, restul); // 2 și [5, 8, 13, 21, 34, 55, 89]

rezultatul programului executat de Node.js

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

www.promisejs.org/generators/

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Promises

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Promises

fiecare obiect de tip Promisese poate afla în una dintre stările:

pending – stare inițială, operația nu s-a terminat sau a fost anulată

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Promises


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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Promises


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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

Promises


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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

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

});

Dr.

Sab

in B

ura

ga

pro

fs.in

fo.uaic.ro

/~busa

co

metodele then () și catch () pot fi înlănțuite

.then (onFullfilment)

.then ()

.catch ()

pending pending

settledacțiuni asincrone

(async actions)

.then (onRejection)

.catch (onRejection)

tratarea erorilor(error handling)

…Promise Promise

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

settledacțiuni asincrone

(async actions)

.then (onRejection)

.catch (onRejection)

tratarea erorilor(error handling)

…Promise Promise

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Noi tipuri de date ES6

SetMap

WeakSetWeakMap

SymbolProxy

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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ă lengthmetode: add() delete() clear() entries()

has() forEach() keys() values()

developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Set

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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: sizemetode: set() get() delete() clear() entries()

has() forEach() keys() values()

developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Map

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

// 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 obiectprofil.set ('mediu', 'urban');

if (profil.has ('mediu')) { // verificăm existența unei cheiprofil.set ('mediu', 'cosmic');

}

// redăm la consolă valorile cheilorconsole.log (profil.get ('pasiune'));console.log (profil.get ('pasiune').grupFavorit[0]);

// iterarea cheilor & valorilor aferenteprofil.forEach((val, cheie) => console.log(`cheie: ${cheie}, valoare: ${val}`));

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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ă explicitconsole.log (oferăStareComplementară (ST_VESEL).toString ());// apelăm funcția având ca argument un simbol nedoritconsole.log (oferăStareComplementară (ST_NEUTRU));

} catch (e) {console.log (e.message);

}

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

(în loc de) pauză

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Extinderea unor tipuri existente

Number – exprimarea de valori octale și binare

const N404octal = 0o624;

const N404binar = 0b110010100;

console.log (N404octal == N404binar); // true

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


RegExp – noi operatori + opțiuni

exploringjs.com/es6/ch_regexp.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


String – suport mai bun pentru Unicodeinclusiv vizând internaționalizarea

exploringjs.com/es6/ch_unicode.html

es6-features.org/#UnicodeStringRegExpLiteral

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Tablouri respectând un anumit tip de date

typed arraysutile pentru a manipula în principal date binare:

întregi (cu/fără semn) cu stocare pe 8, 16, 32 de bițiInt8Array Uint8Array Int16Array Int32Array etc.

numere reale reprezentate pe 32 sau 64 de bițiFloat32Array Float64Array

exploringjs.com/es6/ch_typed-arrays.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

// metode setter/getter pentru fiecare membru în parteset 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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

coBrowser-ele Web moderne oferă suport complet pentru încărcarea (a)sincronă a modulelor JS:

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

coBrowser-ele Web moderne oferă suport complet pentru încărcarea (a)sincronă a modulelor JS:

facilitate descrisă în HTML Living Standard (15 octombrie 2019)

html.spec.whatwg.org/multipage/scripting.html

tutorial: v8.dev/features/modules

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

suport pentru încărcarea modulelor JS cu …

tutorial: developers.google.com/web/fundamentals/primers/modules

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Pentru Node.js 12, există doar suport experimental

de parcursnodejs.org/api/esm.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Instrumente ES6

în principal, convertire ES6ES5

Babel – babeljs.ioTraceur – github.com/google/traceur-compiler

altele la github.com/addyosmani/es6-tools

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


specificație standardizată – ediția 7 (2016)

www.ecma-international.org/ecma-262/7.0/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


noutate: operatorul ** (exponent)

let valoareLaCub = val => val ** 3; // Math.pow (val, 3);

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


noutate:verificarea faptului că un element aparține unui tablou

metoda Array.includes ()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co



este executat corpul funcției – execuția poate fi terminată permanent via return (succes) ori throw (caz de eroare)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co



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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

const MAXITER = 7;

async function funcAsinc1 () {

for (let i = 1; i

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


noutate: memorie partajată (shared memory)

via obiectul SharedArrayBuffer+ operații atomice

oferite de obiectul global Atomics

pentru detalii și exemplificări, a se parcurgeexploringjs.com/es2016-es2017/ch_shared-array-buffer.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


noutate: extinderea suportului pentru expresii regulate

detalii în Axel Rauschmayer, Exploring ES2018 and ES2019exploringjs.com/es2018-es2019/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


noutate: operatorul … poate fi folosit și pentru proprietăți

ale obiectelor (object spread/rest properties)

exploringjs.com/es2018-es2019/ch_rest-spread-properties.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


noutate: operatorul … poate fi folosit și pentru proprietăți ale

obiectelor (object spread/rest properties)

utilizări: „clonarea” și fuziunea obiectelorconst clona = { ...obiect };

const fuziune = { ...obiect1, ...obiect2 };

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


noutate: metoda finally() pentru un obiect Promise

promise

.then (rezultat => {···})

.catch (eroare => {···})

.finally (() => {···});

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


noutate: metodele flat() și flatMap() pentru obiecte de tip Array

exploringjs.com/es2018-es2019/ch_array-prototype-flat-flatmap.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


noutate: construcția catch nu necesită parametru obligatoriu

(se ignoră complet eroarea)

try {…} catch {…}

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


noutate: tipul String oferă noile metode

trimStart()

trimEnd()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

ECMAScript 2020

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

episodul viitor: aplicații JavaScript cu Node.js

Documents

Full-Stack Web Developmentbusaco/teach/courses/staw/... · 2019. 10. 22. · programare Web: JS modern (ES6 et al.) / 14 / Full-Stack Web Development Dr. Sabin Corneliu Buraga