JavaScript的新特性 贺师俊

Razor

2019/10/20 发布于 技术 分类

文字内容
2. 2019/10/19 Slide GitHub @hax 知乎 @贺师俊 微博 @johnhax Twitter @haxy https://johnhax.net/2019/js-new-features/slide?qcon#1 https://johnhax.net/2019/js-new-features/slide?qcon#0 2/192
6. 2019/10/19 Slide 前ES3时代 1995~1999 ES3时代 2000~2010 Harmony时代 2008~2016 后ES6时代 2016~2020 TS/JS⽣态新时代 2020~ https://johnhax.net/2019/js-new-features/slide?qcon#5 https://johnhax.net/2019/js-new-features/slide?qcon#0 6/192
8. 2019/10/19 Slide 360⾼级前端架构师 360技术委员会Web前端TC委员 https://johnhax.net/2019/js-new-features/slide?qcon#7 https://johnhax.net/2019/js-new-features/slide?qcon#0 8/192
11. 2019/10/19 Slide ECMA-334 – C# Language Specification ECMA-335 – Common Language Infrastructure (CLI) ECMA-367 – Eiffel programming Language ECMA-376 – Office Open XML (ISO/IEC 29500) ECMA-388 – Open XML Paper Specification ECMA-408 – Dart language specification ECMA-410 – NFC-SEC Entity Authentication and Key Agreement using Asymmetric Cryptography ECMA-411 – NFC-SEC Entity Authentication and Key Agreement using Symmetric Cryptography https://johnhax.net/2019/js-new-features/slide?qcon#10 https://johnhax.net/2019/js-new-features/slide?qcon#0 11/192
13. 2019/10/19 Slide ECMA-262 – ECMAScript Language Specification ECMA-357 – ECMAScript for XML (E4X) (废弃) ECMA-402 – ECMAScript Internationalization API ECMA-404 – JSON https://johnhax.net/2019/js-new-features/slide?qcon#12 https://johnhax.net/2019/js-new-features/slide?qcon#0 13/192
26. 2019/10/19 Slide String.prototype.matchAll import() BigInt Promise.allSettled globalThis https://johnhax.net/2019/js-new-features/slide?qcon#25 https://johnhax.net/2019/js-new-features/slide?qcon#0 26/192
28. 2019/10/19 Slide Nullish Coalescing Optional Chaining String.prototype.replaceAll ? https://johnhax.net/2019/js-new-features/slide?qcon#27 https://johnhax.net/2019/js-new-features/slide?qcon#0 28/192
40. 2019/10/19 Slide a.b.c() != null ? a.b.c() : v a.b.c.d != null ? a.b.c.d : v https://johnhax.net/2019/js-new-features/slide?qcon#39 https://johnhax.net/2019/js-new-features/slide?qcon#0 40/192
44. 2019/10/19 Slide a != null ? a : b a !== undefined && a !== null ? a : b https://johnhax.net/2019/js-new-features/slide?qcon#43 https://johnhax.net/2019/js-new-features/slide?qcon#0 44/192
53. 2019/10/19 Slide 等于 ?: —— GNU C、Groovy(?:) ⼩于 —— C#、PHP、Dart、Coffee 等于 —— Perl(//) ⾼于 ==:Swift、Kotlin https://johnhax.net/2019/js-new-features/slide?qcon#52 https://johnhax.net/2019/js-new-features/slide?qcon#0 53/192
65. 2019/10/19 Slide a [OP] b ?? c [OP] d 怎样⾃动fix? (a *[OP]* b) ?? (c *[OP]* d) a [OP] (b ?? c [OP] d) a [OP] (b ?? c) [OP] d https://johnhax.net/2019/js-new-features/slide?qcon#64 https://johnhax.net/2019/js-new-features/slide?qcon#0 65/192
72. 2019/10/19 Slide 相对简单的lint规则 只禁⽌ a ?? b [OP] c a ?? b 或者 a ?? (b [OP] c) https://johnhax.net/2019/js-new-features/slide?qcon#71 https://johnhax.net/2019/js-new-features/slide?qcon#0 72/192
73. 2019/10/19 Slide ⽽现在可能需要lint规则 a [OP] b ?? c a ?? b [OP] c a [OP] b ?? c [OP] d https://johnhax.net/2019/js-new-features/slide?qcon#72 https://johnhax.net/2019/js-new-features/slide?qcon#0 73/192
78. 2019/10/19 Slide a !== undefined && a !== null ? a.b : undefined https://johnhax.net/2019/js-new-features/slide?qcon#77 https://johnhax.net/2019/js-new-features/slide?qcon#0 78/192
94. 2019/10/19 Slide a?.b.c(++x).d a == null ? undefined : a.b.c(++x).d https://johnhax.net/2019/js-new-features/slide?qcon#93 https://johnhax.net/2019/js-new-features/slide?qcon#0 94/192
97. 2019/10/19 Slide a == null ? undefined : a.b.c (a == null ? undefined : a.b).c https://johnhax.net/2019/js-new-features/slide?qcon#96 https://johnhax.net/2019/js-new-features/slide?qcon#0 97/192
99. 2019/10/19 Slide TypeScript静态类型检查 可以严格地确定每个部分 应该⽤a.b还是a?.b https://johnhax.net/2019/js-new-features/slide?qcon#98 https://johnhax.net/2019/js-new-features/slide?qcon#0 99/192
104. 2019/10/19 Slide const H = ' '.codePointAt(0).toString(16) const K = ' '.codePointAt(2).toString(16) console.log(H, K) https://johnhax.net/2019/js-new-features/slide?qcon#103 https://johnhax.net/2019/js-new-features/slide?qcon#0 104/192
105. 2019/10/19 Slide const H = ' '.codePointAt(0)!.toString(16) const K = ' '.codePointAt(2)!.toString(16) console.log(H, K) https://johnhax.net/2019/js-new-features/slide?qcon#104 https://johnhax.net/2019/js-new-features/slide?qcon#0 105/192
106. 2019/10/19 Slide const H = ' '.codePointAt(0)?.toString(16) const K = ' '.codePointAt(2)?.toString(16) console.log(H, K) https://johnhax.net/2019/js-new-features/slide?qcon#105 https://johnhax.net/2019/js-new-features/slide?qcon#0 106/192
107. 2019/10/19 Slide const lang = localStorage.getItem('lang') ?? 'en-US' const labels = i18n.load(lang) const user = JSON.parse(localStorage.getItem('user')) document.querySelector('bdi#user-name')!.textContent = user?.name ?? labels?.['non-login-user-name'] ?? 'anonymous' https://johnhax.net/2019/js-new-features/slide?qcon#106 https://johnhax.net/2019/js-new-features/slide?qcon#0 107/192
125. 2019/10/19 Slide a??.b a??[key] a??(...args) a ??? b a?&b a?&[key] a?&(...args) a ?? b a?>b a?>[key] a?>(...args) a ?? b a?.b a?\[key] a?\(...args) a ?? b a\.b a?.b a\[key] a\(...args) a a?.[key] a?.(...args) \\ b a ?? b https://johnhax.net/2019/js-new-features/slide?qcon#124 https://johnhax.net/2019/js-new-features/slide?qcon#0 125/192
130. 2019/10/19 Slide new?.target import?.('foo') new a?.() new a?.b() super?.() super?.foo a?.string a?.bstring a?.b = c https://johnhax.net/2019/js-new-features/slide?qcon#129 https://johnhax.net/2019/js-new-features/slide?qcon#0 130/192
132. 2019/10/19 Slide // syntax error document.querySelector('#test')?.innerHTML += '...' https://johnhax.net/2019/js-new-features/slide?qcon#131 https://johnhax.net/2019/js-new-features/slide?qcon#0 132/192
133. 2019/10/19 Slide // ok document.querySelector('#test')?.insertAdjacentHTML('beforeend', '...') https://johnhax.net/2019/js-new-features/slide?qcon#132 https://johnhax.net/2019/js-new-features/slide?qcon#0 133/192
137. 2019/10/19 Slide 'abaa'.replace('a', 'A') 'abaa'.replace(/a/, 'A') 'abaa'.replace(/a/g, 'A') // // // 'abaa'.replaceAll('a', 'A') Abaa Abaa AbAA // AbAA 'abaa'.replaceAll(/a/, 'A') // Ab?? 'abaa'.replaceAll(/a/g, 'A') // AbAA https://johnhax.net/2019/js-new-features/slide?qcon#136 https://johnhax.net/2019/js-new-features/slide?qcon#0 137/192
138. 2019/10/19 Slide 'AbAA' 'Abaa' (auto g) (consistency?) throw TypeError do not allow RegExp at all (change API name to substitue) https://johnhax.net/2019/js-new-features/slide?qcon#137 https://johnhax.net/2019/js-new-features/slide?qcon#0 138/192
140. 2019/10/19 Slide 'abaa'.match('a') // ['a', index:'>index: 0, input:'>input: 'abaa'] 'abaa'.match(/a/) // ['a', index:'>index: 0, input:'>input: 'abaa'] 'abaa'.match(/a/g) // ['a', 'a', 'a'] https://johnhax.net/2019/js-new-features/slide?qcon#139 https://johnhax.net/2019/js-new-features/slide?qcon#0 140/192
141. 2019/10/19 Slide 'abaa'.matchAll('a') // (['a', index:'>index:'>index:'>index:'>index:'>index:'>index:'>index: 0, input: 'abaa']) 'abaa'.matchAll(/a/) // ? 'abaa'.matchAll(/a/g) // (['a', index:'>index:'>index:'>index:'>index:'>index:'>index:'>index: 0], ['a', index:'>index:'>index:'>index:'>index:'>index:'>index:'>index: 2], ['a', index:'>index:'>index:'>index:'>index:'>index:'>index:'>index: 3]) https://johnhax.net/2019/js-new-features/slide?qcon#140 https://johnhax.net/2019/js-new-features/slide?qcon#0 141/192
143. 2019/10/19 Slide 'abaa'.replaceAll(/a/, 'A') // TypeError! // TypeError! 'abaa'.matchAll(/a/) https://johnhax.net/2019/js-new-features/slide?qcon#142 https://johnhax.net/2019/js-new-features/slide?qcon#0 143/192
148. 2019/10/19 Slide if (typeof global === 'object') { // code for node.js } else { // code for browser } https://johnhax.net/2019/js-new-features/slide?qcon#147 https://johnhax.net/2019/js-new-features/slide?qcon#0 148/192
158. 2019/10/19 Slide class Test { name = 'hax' greeeting = `Hello ${name}` } console.log(new Test().greeting) https://johnhax.net/2019/js-new-features/slide?qcon#157 https://johnhax.net/2019/js-new-features/slide?qcon#0 158/192
159. 2019/10/19 Slide class Test { #privateField #privateMethod() {} async #privateAsyncMethod() {} get #privateGetter() {} *#privateGenerator() {} async *#privateAsyncGenterator() {} } https://johnhax.net/2019/js-new-features/slide?qcon#158 https://johnhax.net/2019/js-new-features/slide?qcon#0 159/192
160. 2019/10/19 Slide class Test { #privateField #privateMethod() {} async #privateAsyncMethod() {} get #privateGetter() {} *#privateGenerator() {} async *#privateStaticAsyncGenterator() {} static #privateStaticField static static static #privateStaticMethod() {} async #privateStaticAsyncMethod() {} get #privateStaticGetter() {} static *#privateStaticGenerator() {} static async *#privateStaticAsyncGenterator() {} } https://johnhax.net/2019/js-new-features/slide?qcon#159 https://johnhax.net/2019/js-new-features/slide?qcon#0 160/192