內容提要
在ES2015標準中的表現，以及利用ES2015中新特性在套用開發中的實踐。以清晰的思路說明ES2015的詳細特性和意義，並以實際案例展示利用ES2015中的特性如何提高套用的前端和後端的開發速度和工程化模式
目錄
第1 章ECMAScript 版本發展歷程1
1.1 ECMAScript 的歷史更替2
1.1.1 ECMA-262 / ECMA-262 Edition 2 2
1.1.2 ECMA-262 Edition 3 3
1.1.3 ECMA-262 Edition 5 4
1.1.4 ECMA-262 Edition 4 4
1.2 小結5
第2 章ES2015 能為實際開發帶來什麼6
2.1 ES2015 概述6
2.2 語法糖7
2.3 工程優勢8
2.3.1 模組化8
2.3.2 模組化與組件化結合11
2.3.3 記憶體安全13
2.4 小結14
第3 章ES2015 新語法詳解15
3.1 let、const 和塊級作用域16
3.1.1 塊級作用域16
3.1.2 let 定義變數20
3.1.3 const 定義常量22
3.1.3.1 使用語法23
3.1.3.2 const 與塊級作用域25
3.1.4 變數的生命周期27
3.1.5 更佳體驗29
3.1.5.1 let VS const 29
3.1.5.2 let、const 與循環語句30
3.2 箭頭函式（Arrow Function）31
3.2.1 使用語法31
3.2.1.1 單一參數的單行箭頭函式31
3.2.1.2 多參數的單行箭頭函式31
3.2.1.3 多行箭頭函式32
3.2.1.4 無參數箭頭函式32
3.2.2 this 穿透33
3.2.2.1 程式邏輯注意事項34
3.2.2.2 編寫語法注意事項36
3.3 模板字元串（Template String）37
3.3.1 字元串元素注入37
3.3.2 多行字元串37
3.3.3 模板字元串使用語法38
3.3.3.1 支持字元串元素注入38
3.3.3.2 支持換行39
3.3.4 注意事項41
3.4 對象字面量擴展語法（Enhanced Object Literals）41
3.4.1 函式類屬性的省略語法41
3.4.2 支持__proto__ 注入42
3.4.3 可動態計算的屬性名43
3.4.4 將屬性名定義省略44
3.5 表達式結構（Destructuring）45
3.5.1 使用語法47
3.5.1.1 使用對象作為返回載體（帶有標籤的多返回值）47
3.5.1.2 使用數組作為返回載體47
3.5.2 使用場景48
3.5.2.1 Promise 與模式匹配48
3.5.2.2 Swap（變數值交換）49
3.5.3 高級用法49
3.5.3.1 解構別名50
3.5.3.2 無法匹配的預設值50
3.5.3.3 深層匹配50
3.5.3.4 配合其他新特性52
3.6 函式參數表達、傳參53
3.6.1 默認參數值54
3.6.1.1 使用語法54
3.6.1.2 使用場景54
3.6.2 剩餘參數55
3.6.2.1 使用語法56
3.6.2.2 使用場景57
3.6.2.3 注意事項57
3.6.3 解構傳參58
3.7 新的數據結構59
3.7.1 Set 有序集合59
3.7.1.1 使用語法60
3.7.1.2 增減元素61
3.7.1.3 檢查元素61
3.7.1.4 歷遍元素61
3.7.2 WeakSet 62
3.7.3 Map 映射類型64
3.7.3.1 使用語法64
3.7.3.2 增減鍵值對65
3.7.3.3 獲取鍵值對66
3.7.3.4 檢查映射對象中的鍵值對66
3.7.3.5 歷遍映射對象中的鍵值對66
3.7.3.6 映射對象與Object 的區別67
3.7.4 WeakMap 67
3.8 類語法（Classes）68
3.8.1 使用語法69
3.8.2 注意事項78
3.8.3 遺憾與期望79
3.9 生成器（Generator）80
3.9.1 由來80
3.9.2 基本概念81
3.9.2.1 生成器函式（Generator Function）81
3.9.2.2 生成器（Generator）82
3.9.3 使用方法83
3.9.3.1 構建生成器函式83
3.9.3.2 啟動生成器83
3.9.3.3 運行生成器內容84
3.9.4 深入理解85
3.9.4.1 運行模式85
3.9.4.2 生成器函式以及生成器對象的檢測85
3.9.4.3 生成器嵌套88
3.9.4.4 生成器與協程90
3.10 Promise 93
3.10.1 基本語法94
3.10.1.1 創建Promise 對象94
3.10.1.2 進行異步操作94
3.10.1.3 處理Promise 的狀態95
3.10.2 高級使用方法97
3.10.2.1 Promise.all(iterable) 97
3.10.2.2 Promise.race(iterable) 97
3.11 代碼模組化98
3.11.1 引入模組99
3.11.1.1 引入默認模組99
3.11.1.2 引入模組部分接口100
3.11.1.3 引入全部局部接口到指定命名空間101
3.11.1.4 混入引入默認接口和命名接口101
3.11.1.5 不引入接口，僅運行模組代碼102
3.11.2 定義模組102
3.11.3 暴露模組103
3.11.3.1 暴露單一接口103
3.11.3.2 暴露模組默認接口104
3.11.3.3 混合使用暴露接口語句104
3.11.3.4 從其他模組暴露接口105
3.11.3.5 暴露一個模組的所有接口105
3.11.3.6 暴露一個模組的部分接口106
3.11.3.7 暴露一個模組的默認接口106
3.12 Symbol 106
3.12.1 基本語法107
3.12.1.1 生成唯一的Symbol 值107
3.12.1.2 註冊全局可重用Symbol 108
3.12.1.3 獲取全局Symbol 的key 109
3.12.2 常用Symbol 值109
3.12.3 Symbol.iterator 110
3.12.3.1 for-of 循環語句與可疊代對象111
3.12.3.2 使用Symbol.iterator 定義一個可疊代對象111
3.12.4 Symbol.hasInstance 113
3.12.5 Symbol.match 113
3.12.6 Symbol.unscopables 114
3.12.7 Symbol.toPrimitive 115
3.12.8 Symbol.toStringTag 116
3.13 Proxy 117
3.13.1 元編程117
3.13.2 使用語法118
3.13.3 handler.has 119
3.13.4 handler.get 120
3.13.5 handler.set 121
3.13.6 handler.apply 122
3.13.7 handler.construct 122
3.13.8 創建可解除Proxy 對象123
3.13.9 使用場景123
3.13.9.1 看似“不可能”的自動填充123
3.13.9.2 唯讀視圖124
3.13.9.3 入侵式測試框架125
3.14 小結127
第4 章ES2015 的前端開發實戰129
4.1 Filmy 的功能規劃129
4.1.1 數據分級130
4.1.2 數據結構130
4.1.2.1 核心數據130
4.1.2.2 分類數據131
4.1.2.3 相冊數據131
4.1.3 數據搜尋132
4.1.3.1 搜尋分類132
4.1.3.2 搜尋相冊132
4.1.4 界面原型規劃133
4.1.4.1 著陸頁面133
4.1.4.2 分類目錄頁面133
4.1.4.3 分類內容頁面134
4.1.4.4 相冊頁面134
4.2 功能組件分割135
4.2.1 根組件分割135
4.2.2 著陸頁面136
4.2.3 目錄頁面136
4.2.4 分類頁面137
4.2.5 相冊頁面137
4.3 技術選型139
4.3.1 整體架構139
4.3.2 數據層139
4.3.3 邏輯層及UI 層140
4.3.3.1 AngularJS 141
4.3.3.2 React.js 141
4.3.3.3 Vue.js 142
4.3.4 程式架構143
4.3.4.1 路由組件143
4.3.4.2 數據組件144
4.3.4.3 視圖組件145
4.4 數據層開發146
4.4.1 安裝依賴147
4.4.2 配置七牛JavaScript SDK 147
4.4.3 核心配置數據150
4.4.3.1 獲取核心配置數據150
4.4.3.2 更新配置數據151
4.4.4 分類數據154
4.4.4.1 數據結構155
4.4.4.2 數據索引157
4.4.4.3 更新分類數據159
4.4.5 相冊數據159
4.4.5.1 數據載入160
4.4.5.2 數據更新161
4.4.5.3 數據檢索161
4.5 入口檔案與路由組件開發165
4.5.1 路由基礎組件166
4.5.2 入口檔案166
4.5.2.1 簡單的字元串處理167
4.5.2.2 多國語言處理168
4.6 著陸頁面開發170
4.6.1 路由組件開發171
4.6.2 著陸頁視圖174
4.6.2.1 引入數據174
4.6.2.2 綁定視圖174
4.6.3 分類目錄視圖177
4.6.3.1 分類元素視圖組件177
4.6.3.2 渲染分類目錄178
4.6.4 路由組件、視圖組件與數據組件的聯繫180
4.6.4.1 在邏輯控制器中進行數據操作180
4.6.4.2 在視圖中進行數據操作181
4.6.4.3 組織方式的區別與項目套用182
4.7 分類頁面開發182
4.7.1 路由組件開發183
4.7.2 分類元素視圖組件185
4.7.3 相冊列表視圖組件186
4.7.4 相冊頁面開發188
4.7.4.1 相冊頁面的路由組件188
4.7.4.2 相冊信息視圖組件189
4.7.4.3 圖片列表視圖組件189
4.8 管理工具開發190
4.9 初始化Filmy 實例191
4.9.1 基本元素192
4.9.2 基本邏輯194
4.9.2.1 獲取七牛雲的上傳憑證195
4.9.2.2 檢查並處理管理員對背景圖片的填寫方式196
4.9.2.3 將核心數據部署到七牛雲上197
4.10 管理工具的總體組織197
4.10.1 管理頁面的總體架構198
4.10.2 側邊欄198
4.10.3 路由配置200
4.11 相冊發布頁面202
4.11.1 基本邏輯202
4.11.1.1 綁定數據202
4.11.1.2 綁定元素以接收檔案上傳203
4.11.2 上傳數據204
4.11.2.1 圖片上傳邏輯204
4.11.2.2 數據提交205
4.12 打包發布206
4.12.1 準備工作206
4.12.2 配置webpack 207
4.12.2.1 安裝依賴207
4.12.2.2 編寫配置檔案207
4.12.3 發布到雲端209
4.13 小結210
第5 章ES2015 的Node.js 開發實戰211
5.1 Duel Living 的功能規劃211
5.1.1 基本產品組織211
5.1.2 數據結構213
5.1.2.1 賽事（Duel）213
5.1.2.2 訊息（Message）214
5.1.2.3 參賽方（Player）和主持人（Host）216
5.1.3 數據結構的關係216
5.2 數據層開發217
5.2.1 檔案結構217
5.2.2 安裝依賴217
5.2.3 主持人數據和參賽方數據218
5.2.4 賽事數據223
5.2.5 訊息數據225
5.3 服務端基本架構開發227
5.3.1 安裝依賴227
5.3.2 程式入口229
5.3.3 路由表229
5.4 API 開發230
5.4.1 API 安全230
5.4.2 賽事API 231
5.4.2.1 獲取當前可用的所有賽事信息232
5.4.2.2 獲取指定賽事數據232
5.4.2.3 創建新的賽事233
5.4.3 訊息API 236
5.4.3.1 獲取指定賽事中的若干訊息236
5.4.3.2 發布訊息到指定賽事237
5.5 直播網路237
5.5.1 網路架構238
5.5.1.1 集中架構238
5.5.1.2 分散式架構239
5.5.1.3 P2P 網路239
5.5.2 技術實現240
5.5.3 WebSocket 服務端241
5.5.3.1 建立WebSocket 服務端實例242
5.5.3.2 建立WebSocket 通訊連線242
5.5.3.3 廣播訊息244
5.5.4 P2P 協調服務端245
5.5.4.1 建立P2P 協調連線245
5.5.4.2 存儲客戶端地理信息246
5.5.4.3 匹配最相近的客戶端248
5.6 直播間客戶端249
5.6.1 準備工作249
5.6.2 建立直播通信250
5.6.2.1 建立PeerJS 客戶端實例251
5.6.2.2 建立WebSocket 通信連線251
5.6.2.3 建立P2P 通信連線253
5.6.3 處理訊息253
5.7 部署套用255
5.7.1 編譯代碼255
5.7.2 運行程式256
5.7.3 發布部署257
5.8 小結258
第6 章ES2016 標準259
6.1 Array.prototype.includes 259
6.2 冪運算符260
6.3 小結261
第7 章展望更遠的未來262
7.1 async/await 262
7.2 Decorators 264
7.2.1 簡單實例264
7.2.2 黑科技265
7.3 函式綁定266
7.4 小結267
附錄A 其他ES2015 新特性268
