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
SMART_READER_LITE
LIVE PREVIEW

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

Oct 19, 2022 530 likes •982 views

ECMA EC MASCRIP IPT 2018 18 Y M MS 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]];

slide-1
SLIDE 1

Pa Pablo Magaz

ht https://pa pabl bloma

  • magaz.com
  • m

EC ECMA MASCRIP IPT 2018 18 Y MÁ MÁS ALLÁ

tw twitte tter.com/pablo_m _magaz gi github.com/pma pmagaz

slide-2
SLIDE 2
slide-3
SLIDE 3

Ar Array fl flatten…

co const nes

nested edArray = [1, 2, [3, 4]];

]];

nes nested edArray.fl flat()

(); // [ // [1, 2, 3 , 2, 3, 4 , 4]

slide-4
SLIDE 4

Dyn Dynamic impo imports ts…

im import

  • rt(`

(`./ ./my my-mo modu dules/ s/${ { dy dynami micModu duleName me }. }.js js`) `);

slide-5
SLIDE 5

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

slide-6
SLIDE 6

¨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

  • rporan al

al st stan andard dard¨

slide-7
SLIDE 7

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

slide-8
SLIDE 8

St Stage ge-0 St Stage ge-1 St Stage ge-2 St Stage ge-3

Pl Plugins / / Pr Presets

slide-9
SLIDE 9
slide-10
SLIDE 10

EC ECMAScrip cript 20 2018

slide-11
SLIDE 11

Asy Async It Itera rators

  • rs
slide-12
SLIDE 12

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

  • f it

iterab rable le) { ) { cons nsole. e.log log(x); ); } // // H // e e // l l…

slide-13
SLIDE 13

cons nst si simpl mpleIterator = = da data => { => { le let cursor = = 0 0; re return 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 pa pattern…

slide-14
SLIDE 14

Iter Iterato ator…

cons nst it iterab rable le = [ = [‘Hel Hello’, ‘ ‘Codem emotion’]; ’]; cons nst it iterat rator

  • r =

= it iterab rable le[Sy Symbol.it iterat rator

  • r](

](); cons nsole. e.log(it iterat rator

  • r.nex

next() ()); // { { va value: ‘ ‘Hel Hello', ', don

  • ne: fals

lse } cons nsole. e.log(it iterat rator

  • r.nex

next() ()); // { { va value: : Codem emotion', ', don

  • ne: fals

lse } cons nsole. e.log(it iterat rator

  • r.nex

next() ()); // { { va value: : und ndefine ned, d done ne: t true } }

slide-15
SLIDE 15

Gen Gener erato ator…

fu function* * ge generator() () { yi yield ‘Hel Hello’; ’; yi yield ‘Codem emotion’; ’; } cons nst it iterat rator

  • r =

= ge generator() (); cons nsole. e.log(it iterat rator

  • r.nex

next() ()) // { { va value: ‘ ‘Hel Hello', ', don

  • ne: fals

lse } cons nsole. e.log(it iterat rator

  • r.nex

next() ()) // { { va value: ‘ ‘Codem emotion', ', don

  • ne: fals

lse } cons nsole. e.log(it iterat rator

  • r.nex

next() ()) // { { va value: : und ndefine ned, d done ne: t true } }

slide-16
SLIDE 16

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

slide-17
SLIDE 17

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

slide-18
SLIDE 18

¨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

  • s asín

asíncron ronos

  • s¨
slide-19
SLIDE 19

cons nst pr promi mise se1 = = new new Pr Promise(re resolv

  • lve =>

=> re resolv

  • lve(‘

(‘Hel Hello’)); )); cons nst pr promi mise se2 = = new new Pr Promise(re resolv

  • lve =>

=> re resolv

  • lve(‘

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

  • f async

ncIter erator() ()) { cons nsole. e.log log(x); ); // Hel Hello, Codem emotion } }

slide-20
SLIDE 20

fo for aw await ait of

  • f
slide-21
SLIDE 21

cons nst pr promi mise se1 = = new new Pr Promise(re resolv

  • lve =>

=> re resolv

  • lve(‘

(‘Hel Hello’)); )); cons nst pr promi mise se2 = = new new Pr Promise(re resolv

  • lve =>

=> re resolv

  • lve(‘

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

  • f async

ncIter erator() ()) { cons nsole. e.log log(x); ); // Hel Hello, Codem emotion } }

slide-22
SLIDE 22

cons nst pr promi mise se1 = = new new Pr Promise(re resolv

  • lve =>

=> re resolv

  • lve(‘

(‘Hel Hello’)); )); cons nst pr promi mise se2 = = new new Pr Promise(re resolv

  • lve =>

=> re resolv

  • lve(‘

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

  • ne: fals

lse } .th then(va value => => async ncIter erator.nex next() ()) // { { va value: ‘ ‘Codem emotion', ', don

  • ne: fals

lse }

slide-23
SLIDE 23

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

slide-24
SLIDE 24

Pr Prom

  • mise 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() (); }); );

slide-25
SLIDE 25
slide-26
SLIDE 26

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

slide-27
SLIDE 27

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

slide-28
SLIDE 28

Lo Lookaro round und As Assertion

  • ns…

(? (?=€) ) // // Lo Lookahead asser ertion 10 100€ (? (?<=€) ) // Lo Lookbe behind asser ertion €10 100

slide-29
SLIDE 29

Lo Lookbehi hind nd As Assertion

  • ns

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

slide-30
SLIDE 30
slide-31
SLIDE 31

St Stag age 3

(m (más allá)

slide-32
SLIDE 32

Pr Prop

  • pos
  • sal:

: Dyn Dynamic Impo Imports ts

im import

  • rt(`

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

slide-33
SLIDE 33

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

slide-34
SLIDE 34

Pr Prop

  • pos
  • sal:

: 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!

slide-35
SLIDE 35

Pr Prop

  • pos
  • sal:

: Ar Array Fl Flat & Fl FlatMap

co const nes

nested edArray = [1, 2, [3, 4]];

]];

nes nested edArray.fl

flat() (); // [ // [1, 2, 3 , 2, 3, 4 , 4]

cons nst my myAr Arr =[ =[‘Ba Back t to’,’’, ’,’’,’th the fu future’]; ’]; my myAr Arr.fl flatMap(x => => x. x.spl split(‘ (‘ ‘)); // [ [“Back”,”to”,””,”th the”, ”,”fu future”] ”];

slide-36
SLIDE 36

St Stag age 2

(m (muc ucho ho más allá)

slide-37
SLIDE 37

Pr Prop

  • pos
  • sal: T

: Top p lev level el Awa Await

cons nst my myHandl dler = = aw await ait async ncHa Hand ndler er() (); … le let my myModu dule; tr try { my myModu dule = = aw await ait im import

  • rt(`

(`./m ./modul ules/$ /${ dy dynami micModu duleName me }. }.js js`) `); } c catch { h { fo foo() (); }

slide-38
SLIDE 38

St Stag age 1

(m (muc uchí hísimo más allá)

slide-39
SLIDE 39

Pr Prop

  • pos
  • sal: O

: Obser bservable ble

cons nst my myObse bservabl ble = n = new Ob Observa vable(ob

  • bserv

rver => { => {

  • b
  • bserv

rver. r.nex next(‘ (‘Hel Hello’); );

  • b
  • bserv

rver. r.nex next(‘ (‘Codem emotion!’); );

  • b
  • bserv

rver. r.complet ete() (); }); ); Hel Hello Co Comple leted! Codem emotion!

slide-40
SLIDE 40

my myObse bservabl ble.su subsc bscribe be({ ({ nex next(va value) { ) { cons nsole. e.log log(va value) } ) }, // // Hel Hello, , Codem emotion! er error(er err) { ) { cons nsole. e.log log(er err) } ) }, // // complet ete() () { cons nsole. e.log log(` (`Done ne!`) `) } // D Done ne! }); );

Pr Prop

  • pos
  • sal: O

: Obser bservable ble

slide-41
SLIDE 41

Pr Prop

  • pos
  • sal: P

: Pipelin ipeline e Op Operator

  • r

|> |>

slide-42
SLIDE 42

Pr Prop

  • pos
  • sal: P

: Pipelin ipeline e Op Operator

  • r

cons nst do doubl ble = = n => => n * * 2; ; cons nst in incre rement = = n n => => n + + 1; ; le let re result lt = = 5 |> |> do doubl ble |> |> in incre rement |> |> do doubl ble // 2 22

slide-43
SLIDE 43

Gr Gracias. s. ¿Pr ¿Preg egun untas?

Sl Slides: : pa pablo bloma magaz.com/# /#ta talks

tw twitte tter.com/pablo_m _magaz gi github. b.com

  • m/pma

pmaga gaz