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 Codem emotion’ |> |> 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é espe specif ific icac acion iones s se se 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

Pl Plugins / / Pr Presets St Stage ge-0 St Stage ge-1 St Stage ge-2 St Stage ge-3

EC ECMAScrip cript 20 2018

Asy Async It Itera rators ors

Iter Iterable… able… cons nst it iterab rable le = ‘ = ‘Hel Hello Codem emotion’; ’; cons nst it iterab rable le2 = [ = [‘Hel Hello’, ‘ ‘Codem emotion’]; ’]; 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 => { => { let cursor = le = 0 0; return re rn { nex next: ( () = ) => ( ( cu cursor < < da data.length ? d data[cu cursor++] ++] : : fa false ) }} }} cons nst cons nsumer er = = si simpl mpleIterator([ ([‘Hel Hello', ', ‘Codem emotion’]); ); cons nsole. e.log(cons nsumer er.nex next() ()); // ‘ ‘Hel Hello’ cons nsole. e.log(cons nsumer er.nex next() ()); // ‘ ‘Codem emotion' ' cons nsole. e.log(cons nsumer er.nex next() ()); // f false

Iter Iterato ator… cons nst it iterab rable le = [ = [‘Hel Hello’, ‘ ‘Codem emotion’]; ’]; 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: : Codem emotion', ', 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 ‘Codem emotion’; ’; } 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: ‘ ‘Codem emotion', ', 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(‘ (‘Codem emotion’)); )); 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 , Codem emotion } }

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(‘ (‘Codem emotion’)); )); 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 , Codem emotion } }

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(‘ (‘Codem emotion’)); )); 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: ‘ ‘Codem emotion', ', don one: fals lse }

Ob Object Sp Spread & Rest Rest pr prope pertie ies le let { { a, , b, , ...c ...c } = = { { a: ‘ ‘Hel Hello', ', b: ‘ ‘Codem emotion', ', x: : tr true, , y: : fa false }; }; cons nsole. e.log log(a); ); // // Hel Hello cons nsole. e.log log(b); ); // // Codem emotion 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 captu s de captura… a… 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!