ECMA EC MASCRIP IPT 2018 18 Y M MS ALL Pablo Magaz Pa - PowerPoint PPT Presentation

ECMA EC MASCRIP IPT 2018 18 Y MÁ MÁS ALLÁ Pablo Magaz Pa https://pa ht pabl bloma omagaz.com om gi github.com/pma pmagaz tw twitte tter.com/pablo_m _magaz

Ar Array fl flatten… const nes nested edArray = [1, 2, [3, 4]]; co ]]; nes nested edArray . fl flat () (); // [ // [1, 2, 3 , 2, 3, 4 , 4]

Dyn Dynamic impo imports ts… im import ort(` (`./ ./my my-mo modu dules/ s/${ { dy dynami micModu duleName me }. }.js js`) `);

Pi Pipes… cons nst fu functionOne = = x => => x; ; cons nst fu functionTwo = = y y => => y; ; le let re result lt = = ‘Hel Hello Co Commit it’ |> |> fu functionOne |> |> fu functionTwo

¨El El TC3 C39 9 es s el l comité ité encar argad ado de de se sele leccion ionar ar qu qué es especi ecifi fica caci ciones nes se e in incorporan orporan al al st stan andard dard¨

STAGE 4: : STAGE 1: : STAGE 3: : STAGE 0: : STAGE 2: : Se Seleccionad ado Propuesta f Pr formal Can Candidat ato Pr Presentación Borrador Bo pa para el el standa dard

EC ECMAScrip cript 20 2018

Asy Async It Itera rators ors

Iter Iterable… able… cons nst it iterab rable le = ‘ = ‘Hel Hello Co Commit it’; ’; cons nst it iterab rable le2 = [ = [‘Hel Hello', ', ‘Co Commit it’]; ’]; fo for (le let x x of of it iterab rable le) { ) { cons nsole. e.log log(x); ); } // // H // e e // l l…

Iter Iterato ator pa pattern… cons nst si simpl mpleIterator = = da data => { => { le let cursor = = 0 0; re return rn { next: ( nex () = ) => ( ( cu cursor < < da data.length ? d data[cu cursor++] ++] : : fa false ) }} }} cons nst cons nsumer er = = si simpl mpleIterator([ ([‘Hel Hello', ', ‘Co Commit it’]); ); cons nsole. e.log(cons nsumer er.nex next() ()); // ‘ ‘Hel Hello’ cons nsole. e.log(cons nsumer er.nex next() ()); // ‘ ‘Co Commit it' ' cons nsole. e.log(cons nsumer er.nex next() ()); // f false

Iter Iterato ator… cons nst it iterab rable le = [ = [‘Hel Hello’, ‘ ‘Co Commit it’]; ’]; cons nst it iterat rator or = = it iterab rable le[Sy Symbol.it iterat rator or]( ](); cons nsole. e.log(it iterat rator or.nex next() ()); // { { va value: ‘ ‘Hel Hello', ', don one: fals lse } cons nsole. e.log(it iterat rator or.nex next() ()); // { { va value: : Co Commit it', ', don one: fals lse } cons nsole. e.log(it iterat rator or.nex next() ()); // { { va value: : und ndefine ned, d done ne: t true } }

Gen Gener erato ator… fu function* * ge generator() () { yi yield ‘Hel Hello’; ’; yi yield ‘Co Commit it’; ’; } cons nst it iterat rator or = = ge generator() (); cons nsole. e.log(it iterat rator or.nex next() ()) // { { va value: ‘ ‘Hel Hello ', ', don one: fals lse } cons nsole. e.log(it iterat rator or.nex next() ()) // { { va value: ‘ ‘Co Commit it', ', don one: fals lse } cons nsole. e.log(it iterat rator or.nex next() ()) // { { va value: : und ndefine ned, d done ne: t true } }

As Async / / Awa Await... ... async nc fu function my myAsy AsyncFunction() () { cons nst re req = = aw await ait fe fetch(´my myUrl´); ); cons nst da data = = aw await ait re req.te text() (); re return rn JS JSON.pa parse se(d (data.); }

Async/aw As awai ait It Iterators + Ge Generat rators rs + It Iterable les +

¨Lo Los it iteradore radores asín asíncronos s nos s pe permite miten it iterar rar sobre sobre est stru ructuras ras de de dat datos os asín asíncron ronos os¨

cons nst pr promi mise se1 = = new new Pr Promise(re resolv olve => => re resolv olve(‘ (‘Hel Hello’)); )); cons nst pr promi mise se2 = = new new Pr Promise(re resolv olve => => re resolv olve(‘ (‘Co Commit it’)); )); async nc fu function* * async ncIter erator () () { yi yield aw await ait pr promi mise se1 yi yield aw await ait pr promi mise se2 } } async nc fu function ge getAsyn yncD cData () () { fo for aw await ait (le let x of of async ncIter erator() ()) { cons nsole. e.log log(x); ); // Hel Hello , Co Commit it } }

fo for aw await ait of of

cons nst pr promi mise se1 = = new new Pr Promise(re resolv olve => => re resolv olve(‘ (‘Hel Hello’)); )); cons nst pr promi mise se2 = = new new Pr Promise(re resolv olve => => re resolv olve(‘ (‘Co Commit it’)); )); async nc fu function* * async ncIter erator () () { yi yield aw await ait pr promi mise se1 yi yield aw await ait pr promi mise se2 } } async nc fu function ge getAsyn yncD cData () () { fo for aw await ait (cons nst x of of async ncIter erator() ()) { cons nsole. e.log log(x); ); // Hel Hello , Co Commit it } }

cons nst pr promi mise se1 = = new new Pr Promise(re resolv olve => => re resolv olve(‘ (‘Hel Hello’)); )); cons nst pr promi mise se2 = = new new Pr Promise(re resolv olve => => re resolv olve(‘ (‘Co Commit it’)); )); async nc fu function* * async ncIter erator () () { yi yield aw await ait pr promi mise se1 yi yield aw await ait pr promi mise se2 } } cons nst async ncIter erator = = async ncIter erator() () async ncIter erator.nex next() () .th then(va value => => async ncIter erator.nex next() ()) // { { va value: ‘ ‘Hel Hello ', ', don one: fals lse } .th then(va value => => async ncIter erator.nex next() ()) // { { va value: ‘ ‘Co Commit it', ', don one: fals lse }

Ob Object Sp Spread & Rest Rest pr prope pertie ies le let { { a, , b, , ...c ...c } = = { { a: ‘ ‘Hel Hello', ', b: ‘ ‘Co Commit it', ', x: : tr true, , y: : fa false }; }; cons nsole. e.log log(a); ); // // Hel Hello cons nsole. e.log log(b); ); // // Co Commit it cons nsole. e.log log(c); ); // { { x x: t true, y y: f false } }

Pr Prom omise Fi Finally fe fetch(' ('ht https://pa pabl bloma magaz.com/a /api/po post sts’) ’) .th then(re res => { => { pr processR ssRespo sponse se(re res); ); }) }) .ca catch ch(er err => { => { ha hand ndleE eErrors(er err); ); }) }) .fi finally(() (() => { hi hideL eLoading ng() (); }); );

Gr Grupo pos de de ca capt ptura… cons nst my myDa Date = = /( /([0 [0-9] 9]{2})-([ ([0-9] 9]{2})-([ ([0-9] 9]{4})/; ; cons nst ma match = = my myDa Date.ex exec ec(‘ (‘23 23-11 11-20 2018’); ); cons nst da day = ma = match[0]; ]; // 0 01 cons nst mo month = ma = match[1]; ]; // 0 03 cons nst ye year = ma = match[2]; ]; // 2 2018

Reg Regex exp Na Named Cap Captu ture e Gr Groups ps cons nst my myDa Date = = /( /(?<da day>[0 [0-9] 9]{2})-(? (?<mo month>[0 [0-9] 9]{2})-(? (?<ye year>[0 [0-9] 9]{4})/; ; cons nst ma match = = my myDa Date.ex exec ec(‘ (‘23 23-11 11-20 2018’); ); cons nst da day = = ma match.groups. ps.da day; ; // 0 01 cons nst mo month = = ma match.groups. ps.mo month; ; // 0 03 cons nst ye year = = ma match.groups. ps.ye year; ; // 2 2018

Lo Lookaro round und As Assertion ons… (? (?= € ) ) // // Lo Lookahead asser ertion 10 100 € (? (?<= € ) ) // Lo Lookbe behind asser ertion € 10 100

Lo Lookbehi hind nd As Assertion ons cons nst eu euroPrice = = /( /(?<= <=\u2 u20AC)( )(?<pr price>\d+( d+(?:\.\d+)? d+)?)$ )$/u // // \u2 u20AC € U Unicode de cons nsole. e.log(eu euroPrice.e .exe xec(' (' € 10 100') ').gr groups.pr price); ); // 1 100 cons nsole. e.log(eu euroPrice.e .exe xec(‘ (‘10 100 € ') ')); // // nu null

St Stag age 3 (m (más allá)

Pr Prop opos osal: : Dyn Dynamic Impo Imports ts im import ort(` (`./ ./my my-mo modu dules/ s/${ { dy dynami micModu duleName me }. }.js js`) `) .th then(mo modu dule => { => { mo modu dule.do doWi WickedS dStuff() (); }) }) .ca catch ch(er err => => cons nsole. e.log(er err)); ));

Fa Fake pr priv ivate pr prope pertie ies & & me methods ds… cl class My MyClass { _my myFakePrivateProp = 1 = 1; th this._my myFakePrivateMethod() (){ re return rn fa false; } }

Pr Prop opos osal: : Pr Priva vate fi fields & & me methods ds cl class My MyClass { a = = 1; ; // // Pu Public pr prope perty #b #b = = 2; ; // // Pr Private pr prope perty #in incre rement() (){ // // Pr Private me method th this.#b #b++; ++; } } cons nst my myObj bject = = new new My MyClass() (); my myObj bject.#b #b; ; // E ERROR! my myObj bject.#in incre rement() (); // E ERROR!