JavaScript的新技術(shù)特性介紹

1、JavaScript的新技術(shù)特性介紹技術(shù)創(chuàng)新，變革未來2/192Slide199823/192SlideIE 434/192Slide個寫了20+年JS的男4Slide前ES3時代 19951999ES3時代 20002010Harmony時代 20082016后ES6時代 20162020TS/JS態(tài)新時代 20205/19256/192Slide36075team67/192Slide360級前端架構(gòu)師360技術(shù)委員會Web前端TC委員78/192Slide2019年7起TC39代表89/192SlideECMA9SlideECMA-334 C# Language SpecicationE

2、CMA-335 Common Language Infrastructure (CLI)ECMA-367 Eiel programming Language ECMA-376 Oce Open XML (ISO/IEC 29500)ECMA-388 Open XML Paper SpecicationECMA-408 Dart language specicationECMA-410 NFC-SEC Entity Authentication and Key Agreement using Asymmetric CryptographyECMA-411 NFC-SEC Entity Authe

3、ntication and Key Agreement using Symmetric Cryptography10/1921011/192SlideChina IWNCOMM電捷通2014-62018-6?11SlideECMA-262 ECMAScript Language Specication ECMA-357 ECMAScript for XML (E4X) (廢棄)ECMA-402 ECMAScript Internationalization API ECMA-404 JSON12/1921213/192SlideJavaScriptECMAScript1314/192Slide

4、JavaScriptECMAScript1415/192SlideTC3915SlideGoogle AppleMozilla Microsoft Facebook16/19216SlideIBMIntelPaypal Stripe17/19217Slide360AirbnbBloomberg GoDaddy Salesforce18/19218SlideEvernote IgaliaMeteor npmOpenJS Foundation19/1921920/192Slide建渠道2021/192Slide聊聊JS的個新特性2122/192Slide已完成的提案2223/192Slide每年6

5、-8個提案2324/192SlideES2020前5個24SlideStotype.matchAll import()BigInt Promise.allSettled globalThis25/1922526/192SlideStage 326SlideNullish Coalescing Optional ChainingStotype.replaceAll ?27/19228/192SlideNullish Coalescing Operators2829/192Slide?2930/192Slidea ? b3031/192Slidea != undefined& a

6、 != null? a : b3132/192Slidea != null ? a : b32Slidea ? a : b a | b33/1923334/192Slidetruthy/falsy34Slidestring: | vboolean: false | vnubmer: 0 | v number: NaN | v Array: | vObject: (35/192valueOf() return0 ) | v3536/192Slidenullish36Slidea != null ? a : b37/19237Slidea.b.c() ? va.b.c.d ? v38/19238S

7、lidea.b.c() != null ? a.b.c() : va.b.c.d != null ? a.b.c.d : v39/1923940/192SlideSide eects40SlideOAOO DRY41/19241Slideeval Once And Only Once Dont Repeat Yourself42/1924243/192Slidea != null ? a : ba != undefined & a != null ? a : b4344/192Slidedocument.all4445/192SlideTypeScript4546/192Slidea ? ba

8、 必須是 nullish46SlideT|undefinedT|nullT | null | undefined47/19247Slidea ? b | c a | b ? c a ca c?b&b ?48/1924849/192SlideSyntaxError4950/192Slide必須加括號5051/192Slide未決問題優(yōu)先級51Slide等于 ?: GNU C、Groovy（?:）于 | C#、PHP、Dart、Coee等 于 | Perl（/）于 =：Swift、Kotlin52/1925253/192Slidev ? complex_expression5354/192Slid

9、ecomplex_expression ? v54Slidea = b ? c (a = b) ? ca = (b ? c)55/19255Slidea * b ? c (a * b) ? ca * (b ? c)56/1925657/192SlideOperator precedence5758/192SlideTypeScript5859/192Slidea ? ba 必須是 nullish5960/192Slide(a OP b) ? c定都是錯誤代碼6061/192Slidea OP b ? c定都是錯誤代碼6162/192Slidea OP(b ? c)6263/192Slidea

10、? b OP c理解上存在歧義63Slide(a *OP* b) ? (c *OP* da OP b ? c OP d怎樣動x？)a OP (b ? c OP d)a OP (b ? c) OP d64/1926465/192Slide于較運(yùn)算符：Swift、Kotlin6566/192Slide于*（所有元運(yùn)算符）6667/192Slidea OP b ? c6768/192Slidea OP b ? c OP d6869/192Slidea ? b OP c6970/192Slide較保守的團(tuán)隊(duì)可以定制lint規(guī)則7071/192Slide相對簡單的lint規(guī)則只禁 a ? b OP ca

11、 ? b 或 者 a ? (b OP c)71Slide現(xiàn)在可能需要lint規(guī)則a OP b ? ca ? b OP ca OP b ? c OPd72/19272Slide優(yōu)先級7373/19274/192Slide#157475/192SlideOptional Chaining7576/192Slidea?.b7677/192Slidea != undened & a != null ? a.b : undened7778/192Slidea != null ? a.b : undened7879/192SlideNullish-aware Operators7980/192Slidea

12、 != null ? a.b : undened8081/192Slidea & a.b8182/192Slidetruthy/falsynullish8283/192Slidea & a.b & a.b.c8384/192SlideSide eects84SlideOAOO DRY85/1928586/192Slidedocument.all8687/192SlideTypeScript8788/192Slidea?.ba 必須是 nullish88Slidea?.b.ca?.b?.c89/1928990/192SlideShort-circuiting9091/192Slidea?.+x9

13、192/192Slidea = null ? undened : a+x9293/192Slidea?.b.c(+x).da = null ? undened : a.b.c(+x).d9394/192SlideLong short-circuiting94Slidea?.b.c (a?.b).c95/19295Slidea = null ? undefined : a.b.c (a = null ? undefined : a.b).c96/19296Slidea?.b.c.d a?.b?.c?.d97/1929798/192SlideTypeScript靜態(tài)類型檢查 可以嚴(yán)格地確定每個部分

14、 應(yīng)該a.b還是a?.b9899/192Slidea?.b.c?.d99Slidea?.ba!.b100/192100101/192SlideNon-null assertion101102/192Slidea!102SlideconstH=constK=console口.codePointAt(0).toString(16)口.codePointAt(2).toString(16).log(H, K)103/192103SlideconstH=constKconsole口.codePointAt(0)!.toString(16)口.codePointAt(2)!.toString(16).l

15、og(H, K)104/192104SlideconstH=constKconsole口.codePointAt(0)?.toString(16)口.codePointAt(2)?.toString(16).log(H, K)105/192105Slideconst lang = localStorage.getItem(lang) ? en-US const labels = i18n.load(lang)const user = JSON.parse(localStorage.getItem(user) document.querySelector(bdi#user-name)!.text

16、Content =user?.name ? labels?.non-login-user-name ? anonymous106/192106Slidea?.b a?.key107/192107108/192Slidea . b - a key a ?. b - a ? key 108Slidea?ba?b:c109/192109110/192Slidea?b?c:d110111/192Slide其他語？111112/192SlideC#：數(shù)組是 .112113/192SlideCoeeScript：沒有 ?: 三元113114/192SlideSwift：空格區(qū)分！114115/192Sli

17、detry a?.b?c115Slidea?.b a?.prop a?.(.args)116/192116117/192Slidea != null ? a(.args) : undened117Slidea?(.)a?.(.)118118/192119/192SlideC#：a?.invoke(.)119Slidea.b?.(.)a.b?.invoke(.)120/192120121/192SlideStage 2121Slidea?.ba?key a?(.args)122/192122Slidea?.ba?key a?(.args) a ? b123/192123Slidea?.b a?k

18、ey a?(.args) a ? ba?&b a?&key a?&(.args) a ? ba?b a?key a?(.args) a ? ba?.b a?key a?(.args) a ? ba.b akey a(.args) a b a?.b a?.key a?.(.args) a ? b124/192124125/192Slide主要use casea?.b 80%+a ? b125126/192Slidedelete a?.b126127/192Slidea = null? true: delete a.b127128/192Slide不持的128Slidenew?.target im

19、port?.(foo)new a?.()new a?.b()super?.()super?.foo a?.string a?.bstringa?.b = c129/192129130/192Slidea?.b = c130Slide/ syntax error document.querySelector(#test)?.innerHTML += .131/192131Slide/ okdocument.querySelector(#test)?.insertAdjacentHTML(beforeend, .)132/192132133/192Slide#18133134/192SlideQA

20、134135/192SlideStotype.replaceAll135Slideabaa.replace(a, A)/ Abaaabaa.replace(/a/, A)/ Abaa abaa.replace(/a/g, A) / AbAAabaa.replaceAll(a, A)/ AbAAabaa.replaceAll(/a/, A)/ Ab? abaa.replaceAll(/a/g, A) / AbAA136/192136SlideAbAA (auto g) Abaa (consistency?)throw TypeErrordo not allow RegExp at all (ch

21、ange API name to substitue)137/192137138/192SlideStotype.matchAll138Slideabaa.match(a)abaa.match(/a/)/ a, index: 0, input: abaa/ a, index: 0, input: abaaabaa.match(/a/g) / a, a, a139/192139Slideabaa.matchAll(a) / (a, index: 0, input: abaa)abaa.matchAll(/a/) / ?abaa.matchAll(/a/g) / (a, index: 0, a,

22、index: 2, a, index: 3)140/192140141/192SlideStage 4!141Slideabaa.replaceAll(/a/, A) / TypeError! abaa.matchAll(/a/)/ TypeError!142/192142143/192SlideglobalThis143Slidewindow selfglobal144/192144145/192SlideWhy globalThis145146/192Slideglobalhttps:/git/tc39/proposal-global146Slideif (typeof global = object) / code for node.js else / code for browser147/192147Slideself globalObjectglobe Global148/192148149/192SlideglobalThis149150/192Slide安慰下150151/192Slide只是