1、 免费在线版本 （非印刷免费在线版） InfoQ中文站出品 本书由 InfoQ中文站免费发放，如果您从其他渠道获取本书，请注册 InfoQ中文站以支持作者和出版商，并免费下载更多 InfoQ 企业软件开发系列图书。 2015 InfoQ China Inc. 版权所有 未经出版者预先的书面 许可，不得以任何方式复制或者抄袭本书的任何部分，本书任何部分不得用于再印刷，存储于可重复使用的系统，或者以任何方式进行电子、机械、复印和录制等形式传播。 本书提到的公司产品或者使用到的商标为产品公司所有。 如果读者要了解具体的商标和注册信息，应该联系相应的公司。 欢迎共同参与 InfoQ 中文站的内容建设工
2、作，包括原创投稿和翻译，请联系 卷首语 曾经听许多前端从业者说： “前端发展太快了。 ”这里的快，十有八九是说层出不穷的新概念，余下的一二，大抵只是抒发一下心中的苦闷罢 前两日刚习得的新技术转眼就 “落后 ”仔细品味这苦闷，除却不得不持续奔跑的无奈，更多的是一口气，一口卯足了劲儿也要把新知识全数揽入囊中的不服气。作为刚入行的新人，对这点体会颇深。就像是蓦地从某个时间点切入，半数时间向前走，半数时间向后看，瞻前顾后，回味揣摩这十年间的岁月精魄，还得翘首盼着花花新世界，不时再问自己一句，这样走下去真的会好么？是的，其实答案人尽皆知，同时也 无人知晓，因为没人能预言未来，顶多只能预测未来，但有一件
3、事情永不会错，当你笃定地沿着一条路走下去，结果通常不会太糟糕，但凡能在浮躁的社会冷静下来潜心磨砺，多少总会有收获。幸而我有意弱化了对新信息的执念，开始做一些事情，深入浅出 ES6就是其中一件。 纵观整个系列，亦即纵观 ECMAScript 2015 的整个体系，吸取了诸多成功经验：借鉴自 CoffeeScript 的箭头函数；始于 C+项目 Xanadu，接着被 E 语言采用，后来分别于 Python 和 JavaScript 框架 Dojo 中以 Deferred 对象的面貌出 现的 Promise 规范（详见Async JavaScript 一书 3.1 章）；借鉴了 C+、 Java、
4、C#以及 Python 等语言的 for-of 循环语句；部分借鉴 Mustache、 Nunjucks 的模板字符串。 当然，新的语言体系也在之前的基础上查漏补缺：弥补块级作用域变量缺失的 let和 const 关键字；弥补面向大型项目缺失的模块方案；标准委员会甚至为 JavaScript 增加了类特性，有关这一方面的特性褒贬不一， Douglas Crockford 曾在 2014 年的 Nordic.js大会发表了题为 The Better Parts 的演讲 ，重新阐述了他个人对于 ECMAScript 6 的看法，他认为 Class 特性是所有新标准中最糟糕的创新（我个人也略赞同这一
5、说法，类的加入虽然有助于其它语言的使用者开始使用 JavaScript，但是却无法发挥出 JavaScript原型继承的巨大优势）；以及为了保持非侵入式弥补其它新特性而诞生的 Symbols。 1其它的新特性也相当诱人，熟练掌握可以大幅度提升开发效率：迭代器 Iterator、生成器 Generators、不定参数 Rest、默认参数 Default、解构 Destructuring、生成器Generator、代理 Proxy，以及几种新类型： Set、 Map、 WeakSet、 WeakMap、集合 Collection。 以上提及的新特性只是其中的一部分，更多的新特性等待着大家进一步挖掘
6、。整个系列的翻译历时 150 余天，坚持专栏翻译的日子艰苦也快乐，编辑徐川细心地帮我审校每一篇文章，编辑丁晓昀赠予钱歌川先生详解 翻译之著作让我大开眼界，与李松峰老师的交流也让我深刻理解了 “阅读、转换、表达 ”的奥义所在，最感谢我的母亲，在我遇到困难需要力量的时候永远支持着我。选择 ES6 作为前端生涯的切入点实之我幸，恰遇这样的机会让我可以一心一意地向前走，向未来走。我很敬佩在 “洪荒 ”和 “战乱 ”年代沉淀无数经 验的前辈们，你们在各种不确定的因素中左右互搏，为终端用户提供统一的用户体验，直到如今你们依然孜孜不倦地吸取业内新鲜的经验。技术在进步，也为前端人 提供着无限的可能性，我们有责
7、任也有义务去推动新标准的发展和普及，诚然在商业的大环境下我 们不愿放弃每一寸用户的土壤，但携众人之力定将能推动用户终端 的革新。 ES7 标准的提案纷纷提上 日程，用不了多久也将登上前端大舞台。也感谢午川同学友情提供译文第十章“ 集合 Collection” ，让我在困难时期得以顺利过渡。最后祝愿国内前端社区向着更光明美好的未来蓬勃生长！ 2目录 卷首语 . 1 ES6 是什么 . 5 迭代器和 for-of 循环 . 8 生成器 Generators . 16 模板字符串 . 26 不定参数和默认参数 . 34 解构 Destructuring . 39 箭头函数 Arrow Functio
8、ns . 50 Symbols. 59 学习 Babel 和 Broccoli，马上就用 ES6 . 68 集合 . 79 生成器 Generators，续篇 . 89 代理 Proxies . 103 类 Class . 117 let 和 const . 125 子类 Subclassing . 134 模块 Modules . 146 展望未来 . 156 31 ES6 是什么 欢迎来到 ES6 深入浅出！ JavaScript 的新版本离我们越来越近，我们将通过每周一节的系列课程一起探索 ECMAScript 6 新世界。 ES6 中包含了许多新的语言特性，它们将使 JS 变得更加强大
9、，更富表现力。在接下来的几周内，我们将一一深入了解它们。但在我们开始详细学习之前，我认为十分有必要花几分钟讲解一下 ES6 到底是什么，以及你可以从中学到什么！ ECMAScript 发生了什么变化 编程语言 JavaScript 是 ECMAScript 的实现和扩展，由 ECMA（一个类似 W3C 的标准组织）参与进行标准化。 ECMAScript 定义了： 语言语法 语法解析规则、关键字、语句、声明、运算符等。 类型 布尔型、数字、字符串、对象等。 原型和继承 内建对象和函数的 标准库 JSON、 Math、 数组方法 、 对象自省方法 等。 ECMAScript 标准不定义 HTML
10、或 CSS 的相关功能，也不定义类似 DOM（文档对象模型）的 Web API，这些都在独立的标准中进行定义。 ECMAScript 涵盖了各种环境中 JS 的使用场景，无论是浏览器环境还是类似 node.js 的非浏览器环境。 4深入浅出 ES6（一）： ES6 是什么 新标准 上周， ECMAScript 语言规范第 6 版最终草案提请 Ecma 大会审查，这意味着什么呢？ 这意味着在今年夏天， 我们将迎来最新的 JavaScript 核心语言标准 。 这无疑是一则重 磅新闻。早在 2009 年，上一版 ES5 刚刚发布，自那时起， ES 标准委员会一直在紧锣密鼓地筹备新的 JS 语言标准
11、 ES6。 ES6 是一次重大的版本升级，与此同时，由于 ES6 秉承着最大化兼容已有代码的设计理念，你过去编写的 JS 代码将继续正常运行。事实上，许多浏览器已经支持部分ES6 特性，并将继续努力实现其余特性。这意味着，在一些已经实现部分特性的浏览器中，你的 JS 代码已经可以正常运行。如果到目前为止你尚未遇到任何兼容性问题，那么你很有可能将不会遇到这些问题，浏览器正飞速实现各种新特性。 版本号 6 ECMAScript 标准的历史版本分别是 1、 2、 3、 5。 那么为什么没有第 4 版？其实，在过去确实曾计划发布提出巨量新特性的第 4 版，但最终却因想法太过激进而惨遭废除（这一版标准中
12、曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。 ES4 饱受争议，当标准委员会最终停止开发 ES4 时，其成员同意发布一个相对谦和的 ES5 版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为 “Harmony”，因此， ES5 规范中包含这样两句话： ECMAScript 是一门充满活力的语言，并在不断进化中。 未来版本的规范中将持 续进行重要的技术改进。 这一声明许下了一个未来的承诺。 5深入浅出 ES6（一）： ES6 是什么 兑现承诺 2009 年发布的改进版本 ES5，引入了 Object.create()、 Object.definePropert
13、y()、 getters和 setters、 严格模式 以及 JSON 对象。我已经使用过所有这些新特性，并且我非常喜欢ES5 做出的改进 。但事实上，这些改进并没有深入影响我编写 JS 代码的方式，对我来说最大的革新大概就是新的 数组 方法： .map()、 . filter()这些。 但是， ES6 并非如此！经过持续几年的磨砺，它已成为 JS 有史以来最实质的升级，新的语言和库特性就像无主之宝，等待有识之士的发掘。新的语言特性涵盖范围甚广，小到受欢迎的语法糖，例如箭头函数（ arrow functions）和简单的字符串插值（ string interpolation），大到烧脑的新概念
14、，例如代理（ proxies）和生成器（ generators）。 ES6 将彻底改变你编写 JS 代码的方式！ 这一系列旨在向你展示如何仔细审阅 ES6 提供给 JavaScript 程序员的这些新特性。 我们将从一个经典的 “遗漏特性 ”说起，十年来我一直期待在 JavaScript 中看到的它。所以从现在起就加入我们吧，一起领略一下 ES6 迭代器（ iterators）和新的 for-of 循环！62 迭代器和 for-of 循环 我们如何遍历数组中的元素？ 20 年前 JavaScript 刚萌 生时，你可能这样实现数组遍历： for (var index = 0; index my
15、Array.length; index+) console.log(myArrayindex); 自 ES5 正式发布后，你可以使用内建的 forEach 方法来遍历数组： myArray.forEach(function (value) console.log(value); ); 这段代码看起来更加简洁，但这种方法也有一个小缺陷：你不能使用 break 语句中断循环，也不能使用 return 语句返回到外层函数。 当然，如果只用 for 循环的语法来遍历数组元素也很不错。 那么，你一定想尝试一下 for-in 循环： for (var index in myArray) / 千万别这样做
16、console.log(myArrayindex); 这绝对是一个糟糕的选择，为什么呢？ 7深入浅出 ES6（二）：迭代器和 for-of 循环 在这段代码中，赋给 index 的值不是实际的数字，而是字符串 “0”、 “1”、 “2”，此时很可能在无意之间进行字符串算数计算，例如： “2” + 1 = “21”，这给编码过程带来极大的不便。 作用于数组的 for-in 循环体除了遍历数组元素外，还会遍历 自定义 属性。举个例子，如果你 的数组中有一个可枚举属性 myArray.name，循环将额外执行一次，遍历到名为 “name”的索引。就连数组原型链上的属性都能被访问到。 最让人震惊的是，
17、在某些情况下，这段代码可能按照随机顺序遍历数组元素。 简而言之， for-in 是为普通对象设计的，你可以遍历得到字符串类型的键，因此不适用于数组遍历。 强大的 for-of 循环 还记得在 第一章“ ES6 是什么 ” 中我向你们承诺过的话么？ ES6 不会破坏你已经写好的 JS 代码。目前看来，成千上万的 Web 网站依赖 for-in 循环，其中一些网站甚至将其用于数组遍历。如果想通 过修正 for-in 循环增加数组遍历支持会让这一切变得更加混乱，因此，标准委员会在 ES6 中增加了一种新的循环语法来解决目前的问题。 就像这样： for (var value of myArray) console.log(value); 是的，与之前的内建方法相比，这种循环方式看起来是否有些眼熟？那好，我们将要探究一下 for-of 循环的外表下隐藏着哪些强大的功能。现在，只需记住： 这是最简洁、最直接的遍历数组元素的语法 这个方法避开了 for-in 循环的所有缺陷 与 forEach()不同的是，它可以正确响应 break、 continue 和 return 语句 8
