深入理解現代 JavaScript (JavaScript: The New Toys)

目    錄

 

 

 

 

 

 

第1章  ES2015~ES2020及後續版本的

新特性   1

1.1  名稱、定義和術語   2

1.1.1  Ecma？ECMAScript？TC39?   2

1.1.2  ES6？ES7？ES2015？ES2020？   2

1.1.3  JavaScript“引擎”、瀏覽器及其他   3

1.2  什麽是“新特性”   3

1.3  新特性的推動流程   5

1.3.1  誰負責   5

1.3.2  流程   5

1.3.3  參與   6

1.3.4  跟上新特性的步伐   7

1.4  舊環境中使用新特性   8

1.5  本章小結   12

第2章  塊級作用域聲明：let和const   13

2.1  let和const的介紹   13

2.2  真正的塊級作用域   14

2.3  重復聲明將拋出錯誤   15

2.4  提升和暫時性死區   15

2.5  一種新的全局變量   17

2.6  const：JavaScript的常量   19

2.6.1  const基礎   19

2.6.2  常量引用的對象仍然是可變的   20

2.7  循環中的塊級作用域   21

2.7.1  “循環中的閉包”問題   21

2.7.2  綁定：變量、常量以及其他

標識符的工作方式   23

2.7.3  while和do-while循環   27

2.7.4  性能影響   28

2.7.5  循環塊中的const   29

2.7.6  for-in循環中的const   29

2.8  舊習換新   30

2.8.1  用const或let替代var   30

2.8.2  縮小變量的作用域   30

2.8.3  用塊級作用域替代匿名函數   30

第3章  函數的新特性   33

3.1  箭頭函數和this、super等詞法   34

3.1.1  箭頭函數語法   34

3.1.2  箭頭函數和this詞法   37

3.1.3  箭頭函數不能被用作構造函數   38

3.2  默認參數值   38

3.2.1  默認值是表達式   39

3.2.2  默認值在自己的作用域中被計算   40

3.2.3  默認值不會增加函數的arity   42

3.3  “rest”參數   42

3.4  參數列表和函數調用中的

尾後逗號   44

3.5  函數的name屬性   45

3.6  在語句塊中聲明函數   46

3.6.1  在語句塊中聲明函數：標準語義   48

3.6.2  在語句塊中聲明函數：

傳統Web語義   49

3.7  舊習換新   51

3.7.1  使用箭頭函數替代各種訪問this

值的變通方式   51

3.7.2  在不使用this或arguments時，

回調函數使用箭頭函數   52

3.7.3  考慮在更多地方使用箭頭函數   52

3.7.4  當調用者需要控制this的值時，

不要使用箭頭函數   53

3.7.5  使用參數默認值，而不是

代碼實現   53

3.7.6  使用“rest”參數替代arguments

關鍵字   53

3.7.7  如有必要，考慮使用尾後逗號   53

第4章  類   55

4.1  類的概念   55

4.2  介紹新的類語法   56

4.2.1  添加構造函數   57

4.2.2  添加實例屬性   59

4.2.3  添加原型方法   59

4.2.4  添加靜態方法   61

4.3  添加訪問器屬性   61

4.4  對比新語法和舊語法   64

4.5  創建子類   66

4.6  關鍵字super   69

4.6.1  編寫子類構造函數   69

4.6.2  繼承和訪問超類原型的屬性和

方法   70

4.6.3  繼承靜態方法   73

4.6.4  靜態方法中的super   75

4.6.5  返回新實例的方法   75

4.6.6  內置對象的子類   79

4.6.7  super的使用   81

4.7  移除Object.prototype   83

4.8  new.target   84

4.9  類聲明與類表達式   87

4.9.1  類聲明   87

4.9.2  類表達式   88

4.10  更多內容   89

4.11  舊習換新   89

第5章  對象的新特性   91

5.1  可計算屬性名   91

5.2  屬性的簡寫語法   92

5.3  獲取和設置對象原型   93

5.3.1  Object.setPrototypeOf   93

5.3.2  瀏覽器環境中的__proto__屬性   94

5.3.3  瀏覽器環境中的__proto__字面量

屬性名   94

5.4  對象方法的簡寫語法，以及類

之外的super   95

5.5  Symbol   97

5.5.1  定義Symbol的原因   97

5.5.2  創建和使用Symbol   99

5.5.3  Symbol並不用於私有屬性   99

5.5.4  全局Symbol   100

5.5.5  內置的Symbol值   103

5.6  對象的新增方法   104

5.6.1  Object.assign   104

5.6.2  Object.is   105

5.6.3  Object.values   105

5.6.4  Object.entries   106

5.6.5  Object.fromEntries   106

5.6.6  Object.getOwnPropertySymbols   106

5.6.7  Object.getOwnPropertyDescriptors   106

5.7  Symbol.toPrimitive   107

5.8  屬性順序   109

5.9  屬性擴展語法   110

5.10  舊習換新   111

5.10.1  創建對象時對動態變量使用可

計算屬性名   111

5.10.2  從同名變量初始化對象時，

使用簡寫語法   111

5.10.3  使用Object.assign替代自定義的

擴展方法或者顯式復制所有

屬性   112

5.10.4  基於已有對象創建新對象時，

使用屬性擴展語法   112

5.10.5  使用Symbol避免屬性名沖突   112

5.10.6  使用Object.getPrototypeOf/

setPrototypeOf替代__proto__   112

5.10.7  使用對象方法的簡寫語法來

定義對象中的方法   112

第6章  可迭代對象、迭代器、for-of循環、

可迭代對象的展開語法和

生成器   115

6.1  迭代器、可迭代對象、for-of循環，

以及可迭代對象的展開語法   115

6.1.1  迭代器和可迭代對象   115

6.1.2  for-of循環：隱式地使用迭代器   116

6.1.3  顯式地使用迭代器   117

6.1.4  提前停止迭代   118

6.1.5  迭代器的原型對象   119

6.1.6  使對象可迭代   121

6.1.7  使迭代器可迭代   124

6.1.8  可迭代對象的展開語法   126

6.1.9  迭代器、for-of循環和DOM   127

6.2  生成器函數   129

6.2.1  僅生成值的基本生成器函數   129

6.2.2  使用生成器函數創建迭代器   130

6.2.3  生成器函數作為方法   131

6.2.4  直接使用生成器   132

6.2.5  用生成器消費值   132

6.2.6  在生成器函數中使用return   136

6.2.7  yield運算符的優先級   136

6.2.8  return和throw方法：終止

生成器   137

6.2.9  生成生成器或者可迭代對象：

yield*   139

6.3  舊習換新   143

6.3.1  使用消費可迭代對象的結構   143

6.3.2  使用DOM集合的可迭代特性   144

6.3.3  使用可迭代對象和迭代器接口   144

6.3.4  在過去用Function.prototype.apply

的大部分場景中使用可迭代對象

的展開語法   144

6.3.5  使用生成器   144

第7章  解構   145

7.1  概覽   145

7.2  基礎的對象解構   145

7.3  基礎的數組(和可迭代對象)的

解構   148

7.4  解構默認值   150

7.5  解構匹配模式中的“rest”語法   151

7.6  使用不同的名稱   152

7.7  可計算屬性名   153

7.8  嵌套解構   153

7.9  參數解構   154

7.10  循環中的解構   157

7.11  舊習換新   157

7.11.1  僅從對象獲取某些屬性時

使用解構   158

7.11.2  對可選項對象使用解構   158

第8章  Promise   159

8.1  為什麽要使用Promise   159

8.2  Promise基礎   160

8.2.1  概覽   160

8.2.2  示例   161

8.2.3  Promise和thenable對象   163

8.3  使用已存在的Promise   163

8.3.1  then方法   163

8.3.2  鏈式Promise   164

8.3.3  對比Promise鏈與回調函數   168

8.3.4  catch方法   168

8.3.5  finally方法   170

8.3.6  在then、catch和finally處理程序

中拋出異常   173

8.3.7  帶有兩個參數的then方法   175

8.4  為已敲定狀態的Promise添加

處理程序   176

8.5  創建Promise   177

8.5.1  Promise構造函數   178

8.5.2  Promise.resolve   180

8.5.3  Promise.reject   181

8.6  其他Promise工具方法   182

8.6.1  Promise.all   182

8.6.2  Promise.race   183

8.6.3  Promise.allSettled   184

8.6.4  Promise.any   184

8.7  Promise的模式   185

8.7.1  處理錯誤或返回Promise   185

8.7.2  串行Promise   185

8.7.3  並行Promise   187

8.8  Promise的反模式   188

8.8.1  不必要的new Promise(/*…*/)   188

8.8.2  未處理的錯誤(或不正確的

處理方式)   188

8.8.3  在轉換回調函數API時隱藏了

錯誤   188

8.8.4  隱式地將已拒絕狀態轉換為已

成功狀態   189

8.8.5  試圖在鏈式調用外使用結果   190

8.8.6  使用無用的處理程序   190

8.8.7  錯誤地處理鏈式調用分支   191

8.9  Promise的子類   192

8.10  舊習換新   193

第9章  異步函數、迭代器和生成器   195

9.1  async函數   195

9.1.1  async函數創建Promise對象   197

9.1.2  await接收Promise   198

9.1.3  異步是使用await的常規思維

方式   199

9.1.4  拒絕即異常，異常即拒絕；成功值

就是結果，返回值就是決議   200

9.1.5  async函數中的並行操作   202

9.1.6  不必使用return await   203

9.1.7  陷阱：在意想不到的地方使用

async函數   204

9.2  異步迭代器、可迭代對象和

生成器   205

9.2.1  異步迭代器   205

9.2.2  異步生成器   208

9.2.3  for-await-of   209

9.3  舊習換新   210

第10章  模板字面量、標簽函數和新的

字符串特性   211

10.1  模板字面量   211

10.1.1  基本功能(不帶標簽的模板

字面量)   212

10.1.2  模板標簽函數(帶標簽的模板

字面量)   213

10.1.3  String.raw   218

10.1.4  模板字面量的復用   219

10.1.5  模板字面量和自動分號插入   219

10.2  改進的Unicode支持   219

10.2.1  Unicode以及JavaScript字符串的

含義   219

10.2.2  碼點轉義序列   221

10.2.3  String.fromCodePoint   221

10.2.4  String.prototype.codePointAt   221

10.2.5  String.prototype.normalize   222

10.3  迭代   223

10.4  新的字符串方法   224

10.4.1  String.prototype.repeat   224

10.4.2  String.prototype.startsWith和

endsWith   224

10.4.3  String.prototype.includes   225

10.4.4  String.prototype.padStart和

padEnd   225

10.4.5  String.prototype.trimStart和

trimEnd   226

10.5  match、split、search和replace

方法的更新   226

10.6  舊習換新   228

10.6.1  使用模板字面量替代字符串

連接(在適當的情況下)   228

10.6.2  對DSL使用標簽函數和模板

字面量，而不是自動占位符

機制   228

10.6.3  使用字符串迭代   228

第11章  新數組特性、類型化數組   229

11.1  新的數組方法   229

11.1.1  Array.of   229

11.1.2  Array.from   230

11.1.3  Array.prototype.keys   232

11.1.4  Array.prototype.values   233

11.1.5  Array.prototype.entries   233

11.1.6  Array.prototype.copyWithin   234

11.1.7  Array.prototype.find   236

11.1.8  Array.prototype.findIndex   237

11.1.9  Array.prototype.fill   238

11.1.10  Array.prototype.includes   239

11.1.11  Array.prototype.flat   239

11.1.12  Array.prototype.flatMap   240

11.2  迭代、展開、解構   241

11.3  穩定的數組排序   241

11.4  類型化數組   241

11.4.1  概述   242

11.4.2  基本用法   243

11.4.3  ArrayBuffer：類型化數組使用的

存儲方式   246

11.4.4  Endianness(字節序)   247

11.4.5  DataView：直接訪問緩沖區   248

11.4.6  在數組間共享ArrayBuffer   250

11.4.7  類型化數組的子類   251

11.4.8  類型化數組方法   251

11.5  舊習換新   253

11.5.1  使用find和findIndex方法替代

循環來搜索數組(在適當的

情況下)   253

11.5.2  使用Array.fill替代循環

填充數組   254

11.5.3  使用readAsArrayBuffer

替代readAsBinaryString   254

第12章  Map和Set   255

12.1  Map   255

12.1.1  Map的基本操作   256

12.1.2  鍵的相等性   257

12.1.3  從可迭代對象中創建Map   258

12.1.4  迭代Map的內容   259

12.1.5  創建Map的子類   261

12.1.6  性能   261

12.2  Set   262

12.2.1  Set的基本操作   262

12.2.2  從可迭代對象中創建Set   263

12.2.3  迭代Set的內容   263

12.2.4  創建Set的子類   265

12.2.5  性能   265

12.3  WeakMap   265

12.3.1  WeakMap是不可迭代的   266

12.3.2  用例與示例   266

12.3.3  值反向引用鍵   269

12.4  WeakSet   274

12.5  舊習換新   276

12.5.1  在通用的映射中使用Map

替代對象   276

12.5.2  以Set替代對象作為集合   277

12.5.3  使用WeakMap存儲私有數據，

而不是公共屬性   277

第13章  模塊   279

13.1  模塊簡介   279

13.2  模塊的基本概念   280

13.2.1  模塊說明符   281

13.2.2  基本命名導出   282

13.2.3  默認導出   283

13.2.4  在瀏覽器中使用模塊   284

13.2.5  在Node.js中使用模塊   287

13.3  重命名導出   289

13.4  重新導出另一個模塊的導出   290

13.5  重命名導入   291

13.6  導入模塊的命名空間對象   292

13.7  導出另一個模塊的命名

空間對象   292

13.8  僅為副作用導入模塊   293

13.9  導入和導出條目列表   293

13.9.1  導入條目列表   293

13.9.2  導出條目列表   294

13.10  導入是實時且只讀的   295

13.11  模塊實例具有領域特性   297

13.12  模塊的加載方式   298

13.12.1  獲取和解析   299

13.12.2  實例化   302

13.12.3  執行   302

13.12.4  暫時性死區(TDZ)回顧   303

13.12.5  循環依賴和TDZ   303

13.13  導入/導出語法回顧   304

13.13.1  不同的導出語法   304

13.13.2  不同的導入語法   305

13.14  動態導入   306

13.14.1  動態導入模塊   306

13.14.2  動態模塊示例   308

13.14.3  非模塊腳本中的動態導入   311

13.15  搖樹   312

13.16  打包   314

13.17  導入元數據   314

13.18  worker模塊   315

13.18.1  將Web worker加載為模塊   315

13.18.2  將Node.js worker加載為

模塊   316

13.18.3  每個worker 都在自己的

領域中   316

13.19  舊習換新   316

13.19.1  使用模塊替代偽命名空間   317

13.19.2  使用模塊替代作用域函數   317

13.19.3  使用模塊避免巨石代碼

文件的創建   317

13.19.4  將CJS、AMD和其他模塊

格式轉換為ESM   318

13.19.5  使用維護良好的打包器，

而不是自研   318

第14章  反射和代理   319

14.1  反射   319

14.1.1  Reflect.apply   320

14.1.2  Reflect.construct   321

14.1.3  Reflect.ownKeys   322

14.1.4  Reflect.get和Reflect.set   322

14.1.5  其他Reflect函數   324

14.2  代理   324

14.2.1  示例：日誌代理   326

14.2.2  代理劫持函數   334

14.2.3  示例：隱藏屬性   342

14.2.4  可撤銷代理   345

14.3  舊習換新   346

14.3.1  使用代理，而不是禁止消費側

代碼修改API對象   346

14.3.2  使用代理將實現代碼與檢測

代碼分開   346

第15章  正則表達式更新   347

15.1  flags屬性   347

15.2  新標志   348

15.2.1  粘連標志(y)   348

15.2.2  Unicode標志(u)   349

15.2.3  dot all標志(s)   349

15.3  命名捕獲組   349

15.3.1  基本功能   350

15.3.2  反向引用   353

15.3.3  替換符號   354

15.4  反向預查   354

15.4.1  反向肯定預查   354

15.4.2  反向否定預查   355

15.4.3  反向預查中的貪婪匹配是

從右到左的   356

15.4.4  捕獲組的編號和引用   356

15.5  Unicode特性   357

15.5.1  碼點轉義   357

15.5.2  Unicode屬性轉義   358

15.6  舊習換新   361

15.6.1  在解析時使用粘連標志(y)，

而不是創建子字符串並使用

插入符(^)   361

15.6.2  使用dot all標志(s)，而不是使用

一些變通方法匹配所有的字符

(包括換行符)   361

15.6.3  使用命名捕獲組替代匿名

捕獲組   362

15.6.4  使用反向預查替代各種

變通方法   362

15.6.5  在正則表達式中使用碼點轉義

替代代理對   363

15.6.6  使用Unicode模式替代

變通方法   363

第16章  共享內存   365

16.1  引言   365

16.2  務必謹慎   365

16.3  瀏覽器的支持   366

16.4  共享內存的基礎知識   368

16.4.1  臨界區、鎖和條件變量   368

16.4.2  創建共享內存   369

16.5  共享的是內存，而不是對象   373

16.6  競爭條件、存儲亂序、舊值、

撕裂等   374

16.7  Atomics對象   375

16.7.1  Atomics對象的底層特性   378

16.7.2  使用Atomics對象掛起和恢復

線程   379

16.8  共享內存示例   380

16.9  務必謹慎(再次)   399

16.10  舊習換新   404

16.10.1  使用共享內存塊，而不是重復

交換大數據塊   404

16.10.2  使用Atomics.wait和

Atomics.notify，而不是拆解

worker任務以支持事件循環

(在適當的地方)   404

第17章  其他特性   405

17.1  BigInt   406

17.1.1  創建BigInt   406

17.1.2  顯式轉換和隱式轉換   407

17.1.3  性能   408

17.1.4  BigInt64Array和

BigUint64Array   408

17.1.5  工具函數   409

17.2  新的整數字面量   409

17.2.1  二進制整數字面量   409

17.2.2  八進制整數字面量，採用

ES2015新形式   410

17.3  新的Math方法   410

17.3.1  通用數學函數   410

17.3.2  提供底層操作的數學函數   411

17.4  取冪運算符(**)   412

17.5  Date.prototype.toString調整   413

17.6  Function.prototype.toString調整   413

17.7  Number擴展   414

17.7.1  “安全”整數   414

17.7.2  Number.isInteger   415

17.7.3  Number.isFinite和

Number.isNaN   415

17.7.4  Number.parseInt和

Number.parseFloat   416

17.7.5  Number.EPSILON   416

17.8  Symbol.isConcatSpreadable   416

17.9  其他語法微調   417

17.9.1  空值合並   417

17.9.2  可選鏈   418

17.9.3  省略catch綁定的異常   420

17.9.4  JSON中的Unicode行終止符   420

17.9.5  JSON.stringify輸出符合語法

規則的JSON   420

17.10  標準庫/全局對象的各類擴展   421

17.10.1  Symbol.hasInstance   421

17.10.2  Symbol.unscopables   421

17.10.3  globalThis   422

17.10.4  Symbol的description屬性   422

17.10.5  String.prototype.matchAll   423

17.11  規範附錄B：瀏覽器相關特性   423

17.11.1  類似HTML的註釋   424

17.11.2  正則表達式微調   424

17.11.3  額外的內置屬性   425

17.11.4  各種鬆散或晦澀的語法片段   427

17.11.5  當document.all不存在……

或存在   428

17.12  尾調用優化   429

17.13  舊習換新   431

17.13.1  使用二進制字面量   431

17.13.2  使用新的Math函數，而不是

各類數學變通方法   432

17.13.3  使用空值合並提供默認值   432

17.13.4  使用可選鏈替代&&檢查   432

17.13.5  省略“catch(e)”中的

異常綁定   432

17.13.6  使用取冪運算符(**)，

而不是Math.pow   433

第18章  即將推出的類特性   435

18.1  公有和私有的類字段、方法和

訪問器   435

18.1.1  公有字段(屬性)定義   436

18.1.2  私有字段   440

18.1.3  私有實例方法和訪問器   446

18.1.4  公有靜態字段、私有靜態字段和

私有靜態方法   450

18.2  舊習換新   452

18.2.1  使用屬性定義，而不是在構造

函數中創建屬性(在適當的

情況下)   452

18.2.2  使用私有類字段，而不是前綴

(在適當的情況下)   453

18.2.3  使用私有方法(而不是類外的

函數)進行私有操作   453

第19章  展望未來   457

19.1  頂層await   458

19.1.1  概述和用例   458

19.1.2  示例   459

19.1.3  錯誤處理   463

19.2  WeakRef和清理回調   464

19.2.1  WeakRef   464

19.2.2  清理回調   466

19.3  正則表達式匹配索引   471

19.4  String.prototype.replaceAll   472

19.5  Atomics的asyncWait方法   472

19.6  其他語法微調   473

19.6.1  數字分隔符   473

19.6.2  支持hashbang   474

19.7  廢棄舊的正則表達式特性   474

19.8  感謝閱讀   475

附錄  出色的特性及對應的章

(向J.K. Rowling致歉)   477