《实战ES2015：深入现代JavaScript 应用开发》

编辑推荐

√ES2015彻底颠覆JavaScript格局，首部专著诚意满满，既倡导工程化思想，更不乏解决问题的务实。

√现代前端开发以产品为目标，追求代码可读性、灵活性和可维护性，学习ES新标意义正在于此。

√作者多年精研技术，得到业界广泛认可，《实战ES2015：深入现代JavaScript 应用开发》由贺师俊（hax）审校，程劭非（Winter）等撰文推荐。

√语言精练，细节扎实，背景与原理描述丰富，更面向ES5→ES6人群设置完整案例，极利于动手学习。

内容简介

ES2015一直吸引着众多JavaScript开发者去积极尝试，如今，使用ES2015标准进行工程开发也已深入人心。随着工程师们对ES2015的热情日益增长，许多新特性应运而出。《实战ES2015：深入现代JavaScript应用开发》为读者介绍了ES2015的详细特性和意义，以及JavaScript在ES2015标准中的表现，同时向读者展示了利用ES2015中的新特性完成的JavaScript应用开发实例，以实际案例说明利用ES2015的新特性如何提高JavaScript应用前端和后端的开发效率。

作者简介

小问，本名甘超阳，高级JavaScript工程师，国内Node.js*早的研究者之一，技术布道者、讲师，参与并维护多个优秀JavaScript开源项目。数学系理学士，对多方面的技术领域都有研究和自己的理解，熟悉各类JavaScript应用的开发和机器学习应用开发。同时也是一个业余摄影师，热爱人像摄影。

精彩书评

有幸作为早期预览者见证了这《实战ES2015：深入现代JavaScript 应用开发》逐渐成长，看到作者以非常严谨的态度在写这《实战ES2015：深入现代JavaScript 应用开发》。ES2015对JavaScript来说是个质变，它在工程上有很高的价值，能够尽快学习和应用ES2015，可以帮助技术团队解决很多问题，也许会成为一些团队开始重视工程的契机。

——程邵非(winter)阿里巴巴高级技术专家

现代编程语言的发展，一小部分原因是程序设计语言理论本身的发展，更大一部分原因是用户（开发者）希望使用更加方便和自然的方式组织抽象代码。因为这么做能显著改善代码可读性、灵活性和可维护性，从而最终改善产品的质量。这就是我们要随着现代编程语言特性的发展而持续学习的目的所在，也是《实战ES2015：深入现代JavaScript 应用开发》介绍ES2015是什么、如何用的意义所在。阅读《实战ES2015：深入现代JavaScript 应用开发》，对现代前端开发者写更好的代码有帮助。——360奇舞团团长月影

这《实战ES2015：深入现代JavaScript 应用开发》是小问这些年来对于JavaScript技术的总结，同时也是一个展望。相信读者朋友阅读以后会收获满满，对自己的技术成长有更清晰的理解。在此推荐《实战ES2015：深入现代JavaScript 应用开发》给各位JavaScript、Web、Nodejs或相关技术的开发者，以及对于相关技术感兴趣的朋友们。

——尼奥LeanCloud前端技术负责人

这《实战ES2015：深入现代JavaScript 应用开发》用简洁有力的表述方式，为大家掀开了ES2015神秘的面纱。通过对比其他语言以及介绍语言能力扩展的背景，深入浅出地介绍了ES2015的每一个细节知识点。从ES5熟练切换到ES6需要一定量的实践，而《实战ES2015：深入现代JavaScript 应用开发》的后两章为读者精选了两个完整的案例，建议你跟着动动手。我相信，这《实战ES2015：深入现代JavaScript 应用开发》会带着你徜徉在新知识的魅力海洋中。

——李靖淘宝网资深前端工程师

目录

第1章ECMAScript版本发展历程1
1．1ECMAScript的历史更替2
1．1．1ECMA-262/ECMA-262Edition22
1．1．2ECMA-262Edition33
1．1．3ECMA-262Edition54
1．1．4ECMA-262Edition44
1．2小结5
第2章ES2015能为实际开发带来什么6
2．1简单概括ES20156
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．1let、const和块级作用域16
3．1．1块级作用域16
3．1．2let定义变量20
3．1．3const定义常量22
3．1．3．1使用语法23
3．1．3．2const与块级作用域25
3．1．4变量的生命周期27
3．1．5更佳体验29
3．1．5．1letVSconst29
3．1．5．2let、const与循环语句30
3．2箭头函数（ArrowFunction）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．2this穿透33
3．2．2．1程序逻辑注意事项34
3．2．2．2编写语法注意事项36
3．3模板字符串（TemplateString）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对象字面量扩展语法（EnhancedObjectLiterals）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．1Promise与模式匹配48
3．5．2．2Swap（变量值交换）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．1Set有序集合59
3．7．1．1使用语法60
3．7．1．2增减元素61
3．7．1．3检查元素61
3．7．1．4历遍元素61
3．7．2WeakSet62
3．7．3Map映射类型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．4WeakMap67
3．8类语法（Classes）68
3．8．1使用语法69
3．8．1．1基本定义语法69
3．8．1．2继承语法70
3．8．1．3Getter/Setter72
3．8．1．4静态方法73
3．8．1．5高级技巧77
3．8．2注意事项78
3．8．3遗憾与期望79
3．9生成器（Generator）80
3．9．1由来80
3．9．2基本概念81
3．9．2．1生成器函数（GeneratorFunction）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．10Promise93
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．1Promise．all(iterable)97
3．10．2．2Promise．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．12Symbol106
3．12．1基本语法107
3．12．1．1生成唯一的Symbol值107
3．12．1．2注册全局可重用Symbol108
3．12．1．3获取全局Symbol的key109
3．12．2常用Symbol值109
3．12．3Symbol．iterator110
3．12．3．1for-of循环语句与可迭代对象111
3．12．3．2使用Symbol．iterator定义一个可迭代对象111
3．12．4Symbol．hasInstance113
3．12．5Symbol．match113
3．12．6Symbol．unscopables114
3．12．7Symbol．toPrimitive115
3．12．8Symbol．toStringTag116
3．13Proxy117
3．13．1元编程117
3．13．2使用语法118
3．13．3handler．has119
3．13．4handler．get120
3．13．5handler．set121
3．13．6handler．apply122
3．13．7handler．construct122
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．1Filmy的功能规划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．1AngularJS141
4．3．3．2React．js141
4．3．3．3Vue．js142
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配置七牛JavaScriptSDK147
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配置webpack207
4．12．2．1安装依赖207
4．12．2．2编写配置文件207
4．12．3发布到云端209
4．13小结210
第5章ES2015的Node．js开发实战211
5．1DuelLiving的功能规划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．4API开发230
5．4．1API安全230
5．4．2赛事API231
5．4．2．1获取当前可用的所有赛事信息232
5．4．2．2获取指定赛事数据232
5．4．2．3创建新的赛事233
5．4．3消息API236
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．3P2P网络239
5．5．2技术实现240
5．5．3WebSocket服务端241
5．5．3．1建立WebSocket服务端实例242
5．5．3．2建立WebSocket通讯连接242
5．5．3．3广播消息244
5．5．4P2P协调服务端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．1Array．prototype．includes259
6．2幂运算符260
6．3小结261
第7章展望更远的未来262
7．1async/await262
7．2Decorators264
7．2．1简单实例264
7．2．2黑科技265
7．3函数绑定266
7．4小结267
附录其他ES2015新特性268

前言/序言

历时至少7年制定的新ECMAScript标准——ECMAScript6（亦称ECMAScriptHarmony，简称ES6），终于在2015年6月正式发布。ES6也被称为ES2015，自从2009年上一个标准版本ES5发布以来，ES2015就一直以其新语法、新特性吸引着众多JavaScript开发者，驱使他们积极尝鲜。

ES6的第一个特性草案发布于2011年7月。

虽然各大浏览器厂商所开发的JavaScript引擎至今都还没有实现对ES2015中所有特性的完美支持，但这并不能阻挡工程师们对ES2015的热情。于是，Babel、Traceur等编译器便出现了。在ES2015标准正式发布之前，这些编译器便能将尚未得到支持的ES2015特性转换为ES5标准的代码，使其得到浏览器的支持。其中，Babel因具有模块化转换器（Transpiler）这一设计特点赢得了绝大多数JavaScript开发者的青睐，本文也将以Babel为基础工具，向大家展示ES2015的神奇魅力。

如今，使用ES2015标准进行工程开发已经深入人心，甚至连ES2016标准也已经在2016年正式发布。在这个如此恰当的时机，我觉得应该写一本通俗易懂的关于ES2015标准的书来引导广大JavaScript爱好者和工程师向新时代迈进。

《实战ES2015：深入现代JavaScript 应用开发》内容

《实战ES2015：深入现代JavaScript 应用开发》以JavaScript作为基本编程语言，并以最新的ES2015标准作为JavaScript代码编写标准，旨在向读者展示如何以最新的JavaScript代码标准编写出更具可读性、更方便、更具工程化优势的代码。

《实战ES2015：深入现代JavaScript 应用开发》首先介绍了JavaScript标准版本的发展历史，然后简要概括了ES2015的作用和意义。在此基础上，详细讲解了JavaScript在ES2015标准中新增内容（如箭头函数、模板字符串、新的数据结构、类语法、生成器等）的基本用法和注意要点。当大部分读者对ES2015有了进一步的了解后，《实战ES2015：深入现代JavaScript 应用开发》便会以实际的开发项目向大家展示如何利用ES2015标准，较好地实现JavaScript应用。

最后，《实战ES2015：深入现代JavaScript 应用开发》还会对最新发布的ES2016标准进行研究和探讨，展望未来JavaScript的发展方向。

《实战ES2015：深入现代JavaScript 应用开发》读者

《实战ES2015：深入现代JavaScript 应用开发》的目标读者有以下三类：

1．正在学习JavaScript开发，对JavaScript语言有基本的了解和熟悉度，且希望能更早地了解JavaScript的发展情况的人。

2．正从事JavaScript开发相关工作，熟悉JavaScript的基本开发要领，且有意掌握最新的JavaScript技术进行自我提升的Web工程师（此处不区分前端与后端）。

3．希望更深入地研究JavaScript这门开发语言的JavaScript工程师。

与此同时，《实战ES2015：深入现代JavaScript 应用开发》也适合正使用其他编程语言（如Python、Ruby、Java等）进行Web开发的工程师来学习现代前端开发的知识。

使用示例

要运行《实战ES2015：深入现代JavaScript 应用开发》中的示例，需要安装以下系统及软件。

?操作系统：MacOSX10.9或以上版本、Windows7或以上版本、Linux。

?浏览器：GoogleChrome、Safari、Firefox、InternetExplorer11、WindowsEgde。

?运行环境：Node.js4.0或以上版本。

《实战ES2015：深入现代JavaScript 应用开发》结构

第1章回顾ECMAScript版本发展历程

讲述了历代ECMAScript标准版本的发展历程以及对前一个版本的新增和修正。对于不了解ECMAScript或JavaScript的初学者来说，了解ECMAScript的发展历程有助于更好地理解它的现状，同时也对往后的学习有更好的帮助。

第2章ES2015能为JavaScript的开发带来什么

对于企业来说，一项技术最重要的是它能为企业带来的效益，ES2015中集成了不少从前需要开发者自行完成的特性或工具，能够加强ECMAScript所属语言的工程化属性。

第3章ES2015新语法详解

详细介绍ES2015中比较重要几种特性，并以较为常见的例子说明它们的作用方法，使读者能更好地理解。从诞生缘由、使用方法以及相关事例几个方面来介绍每一个新的特性，与其他介绍ES2015标准的文章或书籍不一样的是，《实战ES2015：深入现代JavaScript 应用开发》将以一线工程师在实际开发经验中总结出来的注意事项为例，将一些已知的、容易出现的错误点讲明白。

第4章ES2015的前端开发实战

以Filmy为背景，利用ES2015标准开发该项目的前端JavaScript应用部分，其中涉及JavaScript的模块化开发、第三方库的使用、前端JavaScript应用工程化等内容。开发该项目本着能够真正投入使用的原则，旨在让读者明白如何将ES2015这一新标准运用到开发当中来优化和提升开发体验，同时积累实际经验。

第5章ES2015的Node.js开发实战

以竞技比赛直播系统为开发内容，讲述ES2015在Node.js中的开发体验以及相对于ES5时代中Node.js开发的改进之处。另外，这个项目还会使用到一些新的Web技术，如使用WebSocket、WebRTC（P2P）等通信API来替代一些较为老旧的通信技术，以体现在众多新潮技术的帮助下，目前最为火热的直播类应用如何进行开发。

第6章ES2016标准

在ES2015标准之后，ECMA标准委员会在2016年发布了ES2016标准。这章介绍ES2016相对于ES2015有了哪些改进，以及为开发者带来了哪些更引人注目的特性。

第7章展望更远的未来

ECMAScript一直处在快速发展的过程中，除了ES2015和ES2016中所包含的新特性以外，更有很多让人兴奋的新特性处在实验开发阶段，这些功能很可能会在不久的将来进入ECMAScript标准。

写作感言

这《实战ES2015：深入现代JavaScript 应用开发》是由一篇较长的关于ES2015标准介绍的文章所发展出来的，历时6个月写作完成。在这6个月中，ECMA委员会还发布了最新的ES2016标准，而国内外不同的团队对ES2015甚至ES2016的使用率也渐渐达到了一个前所未有的高度，新语法、新特性的使用也开始成为JavaScript开发团队中的标配。

另外我还得特别感谢一些人。首先要感谢我的家人，在我成为“全职作者”的这段时间内所给予我的支持和鼓励。感谢这《实战ES2015：深入现代JavaScript 应用开发》的策划编辑张春雨老师，是他给予了我这个机会将一篇文章写成了一本完整的书籍，也是他让我重新捡起了搁置多年的出版计划。同时还要感谢贺师俊老师（hax）、程邵非老师（winter）等前辈给予《实战ES2015：深入现代JavaScript 应用开发》的大力支持和宝贵建议，使得这《实战ES2015：深入现代JavaScript 应用开发》的内容不至于空洞，也让我受益良多。

联系作者

我由衷地感谢你购买了此书，希望你会喜欢它，也希望它能够为你带来你所希望获得的知识。虽然我已经非常细心地检查书中所提到的所有内容，但仍有可能存在疏漏，若你在阅读过程中发现错误，在此我先表示歉意。同时欢迎你对《实战ES2015：深入现代JavaScript 应用开发》的内容和相关源代码发表意见和评论。你可以通过我的私人邮箱willwengunn@gmail.com与我取得联系，清楚地说明来意，我会一一解答你的疑惑。