logo资料库

es6入门课程(阮一峰版)pdf.pdf

第1页 / 共373页
第2页 / 共373页
第3页 / 共373页
第4页 / 共373页
第5页 / 共373页
第6页 / 共373页
第7页 / 共373页
第8页 / 共373页
资料共373页,剩余部分请下载后查看
ECMAScript 6 入门
目录
ECMAScript 6简介
let和const命令
变量的解构赋值
字符串的扩展
正则的扩展
数值的扩展
数组的扩展
函数的扩展
对象的扩展
Symbol
Set和Map数据结构
Proxy
Reflect
Promise 对象
Iterator和for...of循环
Generator 函数的语法
Generator 函数的异步应用
async 函数
Mixin
Class
修饰器
Module 的语法
Module 的加载实现
函数式编程
编程风格
读懂 ECMAScript 规格
二进制数组
SIMD
参考链接
ECMAScript 6 入门 《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性。 本书覆盖 ES6 与上一个版本 ES5 的所有不同之处,对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。 本书为中级难度,适合已经掌握 ES5 的读者,用来了解这门语言的最新发展;也可当作参考手册,查寻新增的语法点。 全书已由电子工业出版社出版,目前是第二版,书名为《ES6 标准入门》。纸版是基于网站内容排版印刷的。 感谢张春雨编辑支持我将全书开源的做法。如果您认可这本书,建议购买纸版。这样可以使出版社不因出版开源书籍而亏钱, 进而鼓励更多的作者开源自己的书籍。 - - - - 京东 当当 亚马逊 China-pub 版权许可 本书采用“保持署名—非商用”创意共享4.0许可证。 只要保持原作者署名和非商用,您可以自由地阅读、分享、修改本书。 详细的法律条文请参见创意共享网站。
ECMAScript 6 入门 作者:阮一峰 授权:署名-非商用许可证 1. 目录 0. 前言 1. ECMAScript 6简介 2. let 和 const 命令 3. 变量的解构赋值 4. 字符串的扩展 5. 正则的扩展 6. 数值的扩展 7. 数组的扩展 8. 函数的扩展 9. 对象的扩展 10. Symbol 11. Set 和 Map 数据结构 12. Proxy 13. Reflect 14. Promise 对象 15. Iterator 和 for...of 循环 16. Generator 函数的语法 17. Generator 函数的异步应用 18. async 函数 19. Mixin 20. Class 21. Decorator 22. Module 的语法 23. Module 的加载实现 24. 函数式编程 25. 编程风格 26. 读懂规格 27. 二进制数组 28. SIMD 29. 参考链接 2. 其他 - - - 源码 修订历史 反馈意见
ECMAScript 6简介 1. ECMAScript 和 JavaScript 的关系 2. ES6 与 ECMAScript 2015 的关系 3. 语法提案的批准流程 4. ECMAScript 的历史 5. 部署进度 6. Babel 转码器 7. Traceur 转码器 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 1. ECMAScript 和 JavaScript 的关系 一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? 要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标 准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布262号标准文件(ECMA-262)的第一版,规定了浏览 器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是1.0版。 该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司 的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和 中立性。 因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。日常场合,这两个词是可以互换的。 2. ES6 与 ECMAScript 2015 的关系 ECMAScript 2015(简称 ES2015)这个词,也是经常可以看到的。它与 ES6 是什么关系呢? 2011年,ECMAScript 5.1版发布后,就开始制定6.0版了。因此,ES6 这个词的原意,就是指 JavaScript 语言的下一个版 本。 但是,因为这个版本引入的语法功能太多,而且制定过程当中,还有很多组织和个人不断提交新功能。事情很快就变得清楚 了,不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布6.0版,过一段时间再发6.1版,然后 是6.2版、6.3版等等。 但是,标准的制定者不想这样做。他们想让标准的升级成为常规流程:任何人在任何时候,都可以向标准委员会提交新语法的 提案,然后标准委员会每个月开一次会,评估这些提案是否可以接受,需要哪些改进。如果经过多次会议以后,一个提案足够 成熟了,就可以正式进入标准了。这就是说,标准的版本升级成为了一个不断滚动的流程,每个月都会有变动。 标准委员会最终决定,标准在每年的6月份正式发布一次,作为当年的正式版本。接下来的时间,就在这个版本的基础上做改 动,直到下一年的6月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份标记就可以了。 ES6 的第一个版本,就这样在2015年6月发布了,正式名称就是《ECMAScript 2015标准》(简称 ES2015)。2016年6月,小幅修订的《ECMAScript 2016标准》(简称 ES2016)如期发布,这个版本可以看作是 ES6.1
版,因为两者的差异非常小(只新增了数组实例的 includes 方法和指数运算符),基本上是同一个标准。根据计 划,2017年6月发布 ES2017 标准。 因此,ES6 既是一个历史名词,也是一个泛指,含义是5.1版以后的 JavaScript 的下一代标准,涵盖 了ES2015、ES2016、ES2017等等,而ES2015 则是正式名称,特指该年发布的正式版本的语言标准。本书中提到 ES6 的 地方,一般是指 ES2015 标准,但有时也是泛指“下一代 JavaScript 语言”。 3. 语法提案的批准流程 任何人都可以向标准委员会(又称 TC39 委员会)提案,要求修改语言标准。 一种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。 - - - - - Stage 0 - Strawman(展示阶段) Stage 1 - Proposal(征求意见阶段) Stage 2 - Draft(草案阶段) Stage 3 - Candidate(候选人阶段) Stage 4 - Finished(定案阶段) 一个提案只要能进入 Stage 2,就差不多肯定会包括在以后的正式标准里面。ECMAScript 当前的所有提案,可以在 TC39 的 官方网站Github.com/tc39/ecma262查看。 本书的写作目标之一,是跟踪 ECMAScript 语言的最新进展,介绍5.1版本以后所有的新语法。对于那些明确或很有希望,将 要列入标准的新语法,都将予以介绍。 4. ECMAScript 的历史 ES6 从开始制定到最后发布,整整用了15年。 前面提到,ECMAScript 1.0 是1997年发布的,接下来的两年,连续发布了 ECMAScript 2.0(1998年6月)和 ECMAScript 3.0(1999年12月)。3.0版是一个巨大的成功,在业界得到广泛支持,成为通行标准,奠定了 JavaScript 语 言的基本语法,以后的版本完全继承。直到今天,初学者一开始学习 JavaScript,其实就是在学3.0版的语法。 2000年,ECMAScript 4.0 开始酝酿。这个版本最后没有通过,但是它的大部分内容被 ES6 继承了。因此,ES6 制定的起点 其实是2000年。 为什么 ES4 没有通过呢?因为这个版本太激进了,对 ES3 做了彻底升级,导致标准委员会的一些成员不愿意接受。ECMA 的 第39号技术专家委员会(Technical Committee 39,简称TC39)负责制订 ECMAScript 标准,成员包括 Microsoft、Mozilla、Google 等大公司。 2007年10月,ECMAScript 4.0 版草案发布,本来预计次年8月发布正式版本。但是,各方对于是否通过这个标准,发生了严 重分歧。以 Yahoo、Microsoft、Google 为首的大公司,反对 JavaScript 的大幅升级,主张小幅改动;以 JavaScript 创造 者Brendan Eich为首的Mozilla公司,则坚持当前的草案。 2008年7月,由于对于下一个版本应该包括哪些功能,各方分歧太大,争论过于激烈,ECMA 开会决定,中止 ECMAScript 4.0 的开发,将其中涉及现有功能改善的一小部分,发布为 ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版 本,由于会议的气氛,该版本的项目代号起名为 Harmony(和谐)。会后不久,ECMAScript 3.1 就改名为 ECMAScript 5。 2009年12月,ECMAScript 5.0 版正式发布。Harmony 项目则一分为二,一些较为可行的设想定名为 JavaScript.next 继 续开发,后来演变成 ECMAScript 6;一些不是很成熟的设想,则被视为 JavaScript.next.next,在更远的将来再考虑推
出。TC39 委员会的总体考虑是,ES5 与 ES3 基本保持兼容,较大的语法修正和新功能加入,将由 JavaScript.next 完成。 当时,JavaScript.next 指的是ES6,第六版发布以后,就指 ES7。TC39 的判断是,ES5 会在2013年的年中成为 JavaScript 开发的主流标准,并在此后五年中一直保持这个位置。 2011年6月,ECMAscript 5.1 版发布,并且成为 ISO 国际标准(ISO/IEC 16262:2011)。 2013年3月,ECMAScript 6 草案冻结,不再添加新功能。新的功能设想将被放到 ECMAScript 7。 2013年12月,ECMAScript 6 草案发布。然后是12个月的讨论期,听取各方反馈。 2015年6月,ECMAScript 6 正式通过,成为国际标准。从2000年算起,这时已经过去了15年。 5. 部署进度 各大浏览器的最新版本,对 ES6 的支持可以查看kangax.github.io/es5-compat-table/es6/。随着时间的推移,支持度已 经越来越高了,超过90%的 ES6 语法特性都实现了。 Node 是 JavaScript 的服务器运行环境(runtime)。它对 ES6 的支持度更高。除了那些默认打开的功能,还有一些语法功 能已经实现了,但是默认没有打开。使用下面的命令,可以查看 Node 已经实现的 ES6 特性。 $ node --v8-options | grep harmony 上面命令的输出结果,会因为版本的不同而有所不同。 我写了一个工具 ES-Checker,用来检查各种运行环境对 ES6 的支持情况。访问ruanyf.github.io/es-checker,可以看到您 的浏览器支持 ES6 的程度。运行下面的命令,可以查看你正在使用的 Node 环境对 ES6 的支持程度。 $ npm install -g es-checker $ es-checker ========================================= Passes 24 feature Dectations Your runtime supports 57% of ECMAScript 6 ========================================= 6. Babel 转码器 Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。这意味着,你可以用 ES6 的 方式编写程序,又不用担心现有环境是否支持。下面是一个例子。 // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); 上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。 配置文件 .babelrc
Babel 的配置文件是 .babelrc ,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。 该文件用来设置转码规则和插件,基本格式如下。 { "presets": [], "plugins": [] } presets 字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。 # 最新转码规则 $ npm install --save-dev babel-preset-latest # react 转码规则 $ npm install --save-dev babel-preset-react # 不同阶段语法提案的转码规则(共有4个阶段),选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3 然后,将这些规则加入 .babelrc 。 { "presets": [ "latest", "react", "stage-2" ], "plugins": [] } 注意,以下所有 Babe l工具和模块的使用,都必须先写好 .babelrc 。 命令行转码 babel-cli Babel提供 babel-cli 工具,用于命令行转码。 它的安装命令如下。 $ npm install --global babel-cli 基本用法如下。 # 转码结果输出到标准输出 $ babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ babel example.js --out-file compiled.js # 或者 $ babel example.js -o compiled.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 $ babel src --out-dir lib # 或者 $ babel src -d lib # -s 参数生成source map文件 $ babel src -d lib -s
上面代码是在全局环境下,进行 Babel 转码。这意味着,如果项目要运行,全局环境必须有 Babel,也就是说项目产生了对环 境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的 Babel。 一个解决办法是将 babel-cli 安装在项目之中。 # 安装 $ npm install --save-dev babel-cli 然后,改写 package.json 。 { // ... "devDependencies": { "babel-cli": "^6.0.0" }, "scripts": { "build": "babel src -d lib" }, } 转码的时候,就执行下面的命令。 $ npm run build babel-node babel-cli 工具自带一个 babel-node 命令,提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能,而且可以直 接运行ES6代码。 它不用单独安装,而是随 babel-cli 一起安装。然后,执行 babel-node 就进入REPL环境。 $ babel-node > (x => x * 2)(1) 2 babel-node 命令可以直接运行ES6脚本。将上面的代码放入脚本文件 es6.js ,然后直接运行。 $ babel-node es6.js 2 babel-node 也可以安装在项目中。 $ npm install --save-dev babel-cli 然后,改写 package.json 。 { "scripts": { "script-name": "babel-node script.js" } } 上面代码中,使用 babel-node 替代 node ,这样 script.js 本身就不用做任何转码处理。
babel-register babel-register 模块改写 require 命令,为它加上一个钩子。此后,每当使用 require 加载 .js 、 .jsx 、 .es 和 .es6 后缀名的文 件,就会先用Babel进行转码。 $ npm install --save-dev babel-register 使用时,必须首先加载 babel-register 。 require("babel-register"); require("./index.js"); 然后,就不需要手动对 index.js 转码了。 需要注意的是, babel-register 只会对 require 命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以 只适合在开发环境使用。 babel-core 如果某些代码需要调用 Babel 的 API 进行转码,就要使用 babel-core 模块。 安装命令如下。 $ npm install babel-core --save 然后,在项目中就可以调用 babel-core 。 var babel = require('babel-core'); // 字符串转码 babel.transform('code();', options); // => { code, map, ast } // 文件转码(异步) babel.transformFile('filename.js', options, function(err, result) { result; // => { code, map, ast } }); // 文件转码(同步) babel.transformFileSync('filename.js', options); // => { code, map, ast } // Babel AST转码 babel.transformFromAst(ast, code, options); // => { code, map, ast } 配置对象 options ,可以参看官方文档http://babeljs.io/docs/usage/options/。 下面是一个例子。 var es6Code = 'let x = n => n + 1'; var es5Code = require('babel-core') .transform(es6Code, { presets: ['latest'] }) .code; // '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};' 上面代码中, transform 方法的第一个参数是一个字符串,表示需要被转换的ES6代码,第二个参数是转换的配置对象。
分享到:
收藏