es6 阮一峰

5星(超过95%的资源)
所需积分/C币:48 2018-04-08 16:37:38 5.51MB PDF
49
收藏 收藏
举报

es6 阮一峰 ecmascript6 ecmascript6 ecmascript6 ecmascript6
2017/11/20 ECMAScript6简介- ECMAScript6入门 该标准从一开始就是针对 JavaScript语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java是Sun公司的商标,根据授权协议,只 有 Netscape公司可以合法地使用 JavaScript这个名字,且 JavaScript本身也已经被 Netscape公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。 因此, ECMAScript和 Javascript的关系是,前者是后者的规格,后者是前者的种实现(另外的 ECMAScript方言还有 jscript和 Action Script) 日常场合,这两个词是可以互换的 2.ES6与 ECMAScript2015的关系 ECMAScript2015(简称ES2015)这个词,也是经常可以看到的。它与ES6是什么关系呢? 2011年, ECMAScript5.1版发布后,就开始制定6.0版了。因此,ES6这个词的原薏,就是指 JavaScript语言的下一个版本。 但是,因为这个版本引入的语法功能太多,而且尙定过程当中,还有很多组织和个人不断提交新功能。事情很快就变得清楚了,不可能在一个版本里面包 括所有将要引入的功能。常规的做法是先发布6.0版,过一段时间冉发6.1版,然后是6.2版、6.3版等等。 但是,标准的制定者不想这样做。他们想让标往的升级成为常规流程:任何人在任何时候,都可以向标准委员会提交新语法的提案,然后标准委员会毎个 月开一次会,评估这些提案是否可以接受,需要明些改进。如果经过多次会议以后,一^提案足够成熟了,就可以正式进入标准了。这就是说,标准的版 本升级成为了一个不断滚动的流程,每个月都会有变动 标准委员会最终决定,标准在每年的6月份正式发布一次,作为当年的正式版本。接下来的时间,就在这个版本的基础上做改动,直到下一年的6月份 草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份标记就可以了。 ES6的第一个版本,就这样在2015年6月发布了,正式名称就是《 ECMAScript2015标准》(简称ES2015)。2016年6月,小幅修订的 《 ECMAScri[2016标准》(简称Es2016)如期发布,这个版本可以看作是ES6.1版,因为两者的差异非常小(只新增了数组实例的 includes方法 和指数运算符),本上是同一个标准。根据计划,2017年6月发布ES2017标准 因此,ES6既是一个历史名词,也是一个泛指,含义是5.1版以后的 JavaScript的下一代标ⅶ准,涵盖了Es2015、ES2016、ES2017等等,而 ES2015则是正式名称,特指该年发布的正式版本的语言标准。本书中提到ES6的地方,一般是指ES2015标准,但有时也是泛指下一代 JavaScript 语言"。 3.语法提案的批准流程 任何人都可以向标准委员会(又称TC39委员会)提案,要求修改语言标准 种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都需要由TC39委员会批准。 Stage0- Strawman(展示阶段 - stage1- Proposal(征求意见阶段) Stage2- Draft(草案阶段) Stage3- Candidate(候选人阶段 Stage4- Finished(定案阶段) 一个提案只要能进入 Stage2,就差不多肯定会包括在以后的正式标准里面。 ECMAScrip当前的所有提案,可以在TC39的官方网站 Github. com/tc39/ecma262查看。 本书的写作目标之一是跟踪 ECMAScripρt语言的最新进展,介绍5.1版本以后所有的新语法。对于那些明确或很有希望,将要列入标准的新语法,都将 予以介绍 4. ECMAScript的历史 ES6从开始制定到最后发布,整整用了15年。 前面提到, ECMAScript1.0是1997年发布的,接下来的两年,连续发布了 ECMAScript2.0(1998年6月)和 ECMAScript3.0(1999年12 月)。3.0版是一个巨大的成功,在业界得到广泛支持,成为通行标准,奠定了 JavaScript语言的基本语法,以后的版本完全继承。直到今天,初学者一 开始学习 Java Script,其实就是在学3.0版的语法。 2000年, ECMAScript4.0开始酝酿。这个版本最后没有通过,但是它的大部分内容被ES6继承了。因此,ES6制定的起点其实是2000年 为什么Es4没有通过呢?因为这个版本太激进了,对ES3做了彻底升级,导致标准委员会的一些成员不愿意接受。ECMA的第39号技术专家委员会 ( Technical committes39,简称TC39)负责制订 ECMAScript标准,成员包括 Microsoft、 Mozilla、 Google等大公司。 2007年10月, ECMAScript4.0版草案发布,本来预计次年8目为布式斯太.伯皂,各方对于是否通过这个标准,发生了严重分歧。以 Yahoo Microsoft、 Google为首的大公司,反对 javAscript的大幅升上二 a Script创造者 Brendan eich为首的Mze公司,则坚持 http:/les6.ruanyifeng.com/#docs/intro 2111 2017/11/20 ECMAScript6简介- ECMAScript6入门 当前的草案。 2008年7月,由于对于下一个版本应该包活唧些功能,各方分歧太大,争论过于激烈,ECMA开会决定,中止 ECMAScript4.0的开发,将其中涉及现 有功能改善的一小部分,发布为 ECMAScript3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为 Harmony(和谐)。会后不久, ECMAScript3.1就改名为 ECMAScript5。 2009年12月, ECMAScript5.0版正式发布。 Harmony项目则一分为二,一些较为可行的设想定名为 Javascript. next继续开发,后来演变成 ECMAScript6;一些不是很成熟的设想,则被视为 Java Script. next next,在更沅的将来再考虑推出。TC39委员会的总体考虑是,ES5与ES3呈本 保持兼容,较大的语法修正和新功自加入,将由 Javascript.next完成。当时, Javascript.next指的是ES6,第六版发布以后,就指ES7。TC39的 判断是,ES5会在2013年的年中成为 Javascript开发的主流标准,并在此后五年中一直保持这个位置 2011年6月, ECMAscript5.1版发布,并且成为Iso国际标准(ISO/IEC16262:2011)。 2013年3月, ECMAScript6草案冻结,不再添加新功能。新的功能设想将被放到 ECMAScript7。 2013年12月, ECMAScript6草案发布。然后是12个月的讨论期,听取各方反馈。 2015年6月, ECMAScript6正式通过,成为国际标准。从2000年算起,这时已经过去了15年 5.部署进度 各大浏览器的最新版本,对ES6的支持可以査看 kangax. github.io/es5- compat-table/es6/。随着时间的推移,支持度已经越来越高了,超过90%的 ES6语法特性都实现了。 Node是 Javascript的服努器运行坏境( runtime)。它对ES6的支持度更高。除了那些默认打开的功能,还有一些语法功能已经实现了,但是默认没 有打开。使用下面的命令,可以查看Node已经实现的ES6特性。 s node --v8-options grep harmony 上面命令的输出结果,会因为版本的不同而有所不同。 我写了一个工具ES- Checker,用来检查各种运行环境对Es6的支持情况。访问 Jruanyf. github.io/es- checker,可以看到您的浏览器支持ES6的程 度。运行下面的命令,可以査看你正在使用的Node环境对Es6的支持程度。 s npm install-g es-checker s es-checkcr Passes 24 feature Dectations Your runtime supports 57% of ECMAScript G 6.Babe转码器 Babe是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有坏境执行。这意味着,你可以用ES6的方式编写程序,又不用担心 现有环境是杏支持。下面是一个例子。 //转码 input map(item = item+1); //传码后 input map(function (item)I return item +1j }) 上面的原始代码用了箭头函数,Babe将其转为普通函数,就能在不支持箭头函数的 JavaScript环境执行了。 配置文件. babel Babe的配置文件是. baber,存放在项目的根目录下。使用 Babel的第一步,就是配置这个文件。 该文件用来设置转码规则和插件,基本格式如下。 presets http://es6.ruanyifeng.com/#docs/intro 3/11 2017/11/20 ECMAScript6简介- ECMAScript6入门 plugin: presets字段设定转码规则,官方提供以下的規则集,你可以根据需要安装。 #最新转码规则 npm install --save-dev babel-preset-latest # react转码规则 npm install --save-dev babel-preset-react #个同阶段语法提案的转吗规则(其有4个阶段),选装一个 s npm install --save-dev babel-preset-stage-B s npm install --save-dev babel-preset-stage-1 s npm install --save-dev babel-preset-stage-2 s npm install--save babel-preset-stage-3 然后,将这些规则加入. babers。 presets":[ ⊥ atest react plugins:[] 注意,以下所有Babe工具和模块的使用,都必须先写好.babe1rc。 命令行转码 babel-c11 Babe提供 babel-c1工具,用于命令行转码 它的安装命令如下。 s npm install --global babel-cli 基本用法如下。 #转吗结果辁出到标准输出 s babel example. js #转码结果写入一个文件 #--0ut-fie或-o参数指定输出文件 s babel example. js --out-file compiled js 4或者 s babel example is -o compiled. js #整个目录转码 #--0ut-dir或-d参数指定输出目录 s babel src --out-dir lib #或者 s babel src -d lib #-5参数生成 source map文件 s babel src -d lib-s 上面代码是在全局环境下,进行Babe转码。这意味着,如果项目要运行,全局环境必须有Babe丨,也就是说项囯产生了对环境的依賴。另-方面,这样 做也无法支持不同项目使用不同版本的 Babel 一个解决办法是将babe1-c1i安装在项目之中。 安装 install 然后,改写 package,json devDependenci " babel-c1i":"^6.9." http://es6.ruanyifeng.com/#docs/intro 4/11 2017/11/20 ECMAScript6简介- ECMAScript6入门 build babel src -d lib 转码的时候,就执行下面的命令 s npn run build babel-node oabe1-cli工具自带—个 babel-node命令,提供一个支持ES6的REPL坏境。它支持Node的REPL坏境的所有功能,而且可以直接运行ES6代码。 它不用单独安装,而是随 babel-c1i一起安装。然后,执行 babel-node就讲入REPL坏境 s babel-node (x=)x*2)(1) babel-node命令可以直按运行ES6脚本。将上面的代码放入脚本文件εs6.js,然后直接运行。 s babe l-node es5.js abe1-node也可以安装在项目中 npm install --save-dev babel-cli 然后,改写 package.json scripts": I script-name":"babel-node script js 上面代码中,使用babe1-nd替代node,这样 script.js本身就不用做任何转码处理。 babel-register babel- register模块改写 require命令,为它加上一个钓子。此后,每当使用 require加载.js、,jsx、,es和,es6后缀名的文件,就会先用 Babel 进行转码。 s npm install --save-dev babel-register 使用时,必须首先加载babe1 register。 require("babel-register require("/index. js"); 然后,就不需要手动对 index.js转码了 需要注意的是, babel- register只会对 require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发坏境使用。 babel-core 如果某些代码需要调用 Babel的API进行转码,就要使用babe1-core模块。 安装命令如下 s npm install babel-core--save 然后,在项目中就可以调用 babel-core。 http://es6.ruanyifeng.com/#docs/intro 2017/11/20 ECMAScript6简介- ECMAScript6入门 var babel- require('babel-core)i /字符串转码 babel. transform(code oi, options); //=> code, map, ast h //文件转码(异步) babel. trans fornFile( filename. js, options, function(err, result)( result: //= code, map, ast j //文件转码(同步) babel. transformFileSync('filename js,, options )j //=>I code, map, ast I /Babe1A转码 babel. transformFromAst(ast, code, options ) //= code, map, ast H 配置对象options可以参看官方文档thttp://babeljs.io/docs/usage/options/ 下面是一个例子 var es6Code ='let x= n=>n+1 var es cOde require('babel-core') transform(es cOde, t presets:[" latest’ code. //use strict"\n\nvar x= function x(n) \n return n +1;\n); 上面代码中, transtorm方法的第一个参数是一个字符串,表示需要被转换的ES6代码,第二个参数是转换的配置对象。 babel-polyfill Babe默认只转换新的 JavaScript句法( syntax),而不转换新的API,比如 Iterator、 Generator、set、Maps、pr Reflect romise等全局对象,以及一些定义在全局对象上的方法(比如 obJect, assign)都不会转码。 举例来说,ES6在 Array对象上新增了Aray.fron方法。 Babel就不会转码这个方法。如果想让这个方法运行必须使用babe1-poyf11,为当前环境 提供一个垫片。 安装命令如下。 s npm install --save babel-polyfill 然后,在脚本头部,加入如下一行代码 import ' fill /或者 Babel默认不转码的API非常多,详细清单可以查看babe1- plugin- trans form- runtime模块的 definitions.js文件。 浏览器环境 Babe也可以用丁浏览器环境。但昰,从Babe6.0开始,不再直接提供浏览器版本,而是要用构建工具构建岀来。如果你没有或不想使用构建工具,可 以使用 babel-standalone模块提供的浏览器版本,将其插入网页 scriptsrc=https://cdnjs.cloudflarecom/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script> <script type="text/babel"> / Your ES6 code </script> 注意,网页实时将ES6代码转为ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。 下面是如何将代码打包成浏览器可以使用的脚本,以Bae配合 Browserify为例。首先,安装babe1ify模块。 s npm install --save-dev babelify babel-preset-latest http://es6.ruanyifeng.com/#docs/intro 6/11 2017/11/20 ECMAScript6简介- ECMAScript6入门 然后,再用命令行转换ES6脚本 s browserify script js -o bundle.js\ babelify--presets[ latest 1 上面代码将ES6脚本 script.js转为 bundle.js,浏览器直接加载后者就可以了。 在 package.ison设置下面的代码,就不用每次命令行都输入参数了。 browserify": t transform":[["babelify",["presets":["latest] 1] 在线转换 Babe提供一个REPL在线编译器,可以在线将ES6代码转为ES5代码。转换后的代码,可以直接作为ES5代码插入网页运行 与其他工具的配合 许多工具需要Babe进行前置转码,这里举两个例子: ESLin和 Mocha。 ELInt用于静态检查代的语法和风格,安装命令如下。 s npm install --save-dev elint babel-eslint 然后,在项目根目录下,新建一个配置文件, eslintrc,在其中加入 parser字段 parser:"babel-eslint", rules":t 再在 package,json之中,加入相应的 scripts脚本。 name":my-module scripts:( lint":"elint my-filesjs } devDependencies":t elint Mocha则是一个测试框架,如果需要执行使用ES6语法的测试脚本,可以修改 package,json的 scripts,test scripts": f test":"mocha --ui qunit --compilers js: babel-core/register 上面命令中,- compilers参数指定脚本的转码器,规定后缀名为js的文件,都需要使用 babel-ce/ register先转码。 7. Traceur转码器 Google公司的 Traceur转码器,也可以将Es6代码转为ES5代码 直接插入网页 http://es6.ruanyifeng.com/#docs/intro 7/11 2017/11/20 ECMAScript6简介- ECMAScript6入门 Traceur允许将ES6代码直接插入网页。首先,必须在网页头部加载 Traceur库文件。 scriptsrc="https://google.github.io/traceur-compiler/bin/traceur.js"></script> scriptsrc="https://google.github.io/traceur-compiler/src/bootstrap.js"></scriptyoty cscriptsrc=https://google.github.io/traceur-compiler/bin/browsersystem.js></scri <script type="module"> Import'·/ Greeter.js /script> 上面代码中,一共有4个 script标签。第—个是加载 Traceur的库文件,第二个和第三个是将这个库文件用于浏览器环境,第四个则是加载用户脚本, 这个脚本里面可以使用ES6代码 注意,第四个 script标签的type属性的值是 module,而不是text/ javascripυt。这是 Traceur编译器识别ES6代码的标志,编译器会自动将所有 type= module的代码编译为ES5,然后冉交给浏览器执行。 除了引用外部ES6脚本,也可以直接在网贞中放置ES6代码。 <script type="module"> class calc t constructor( t console. log( Calc constructor add(a, b)i return a +b: var c- new Calco console. log(c. add(4, 5)); </script> 正常情况下,上面代码会在控制台打印出9。 如果想对 Traceur的行为有精确控制,可以采用下面参数配置的写法。 <script> // Create the System objet window System= new traceur. runtime. BrowserTraceur Loader(; // set some experimental opti var metadata -4 traceuroptions: t experimental: true, properTailCalls: true symbols: true, array Comprehension: true async Functions: true asyncGenerators: exponentiation forOn: true, generatorComprehension: true / Load your module emimport('/myModule. js, (metadata: metadata)). catch( function(ex)t nsoleerror(Import Failed, ex stack </script> 上面代码中,首先生成 Traceur的全局对象 window. System,然后 System. import方法可以用来加载Es6。加载的时候,需要传入一个配置对象 metadata,该对象的 traceuroptions属性可以配置支持ES6功能。如果设为 experimenta1:true,就表示除了ES6以外,还支持一些实验性的新功 能。 在线转换 Traceur也提供一个在线编译器,可以在线将ES6代码转为ES5代码。转换后的代码,可以直接作为εS5代码插入网页运行。 上面的例子转为ES5代码运行,就是下面这个样子 scriptsrc="https://google.github,io/traceur-compiler/bin/traceur,is></script> scriptsrc-https://google.github.io/traceur-compiler/bin/browsersystem.js"></script> scriptsrc=https://google.github.io/traceur-compiler/src/bootstrap.is"></script> <script> straceur Runtime Modulestore getAnonymousModule( function()( e strict var Calc function Calco)[ console. log(Cal constructor )j http://es6.ruanyifeng.com/#docs/intro B/11 2017/11/20 ECMAScript6简介- ECMAScript6入门 (StraceurRuntime createclass)(Calc, [add: function(a, b)i return a D },{}); console. log(c. add (4, 5))i 命令行转换 作为命令行工具使用时, Traceur是一个Node的模块,首先需要用npm安装。 install -g t 安装成功后,就可以在命令行下使用 Traceur了 Traceur直接运行ES6脚本文件,会在标准输出显示运行结果,以前面的calc.js为例。 s traceur calc. j Calc constructor 如果要将ES6脚本转为ES5保存,要采用下面的写法 s traceur --script calc es6is --out calces5, is 上面代码的-- script选项表示指定输入文件,--out选项表示指定输出文件。 为了防止有些特性编译不成功,最好加上 per imental i2u项 s traceur --script calces6.js --out calc es5. js --experimental 命令行下转换生成的文件,就可以直接放到浏览器中运行。 Node环境的用法 Traceur的Node用法如下(假定已安装 traceur模块)。 var traceur require( ''); var fs require('fs ) //将ES6脚本转为字符串 var contents fs, readFilesync('es6-file, js), tostring() var result traceur compile( contents, filename:es6-fileis, sourceMap: true, /!其他设置 modules:' commonis if (result error throw result, error /esu1t对象的js属性就是转换后的ES5代码 fs. writeFileSync(outis, result.js); // sourceMap属对应map文件 fs. writeFileSync(outis map, result. sourceMap) 留言 http://es6.ruanyifeng.com/#docs/intro 9/11

...展开详情
试读 127P es6 阮一峰
立即下载 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
happyjoey217 很好的书~第二版是开源的 最新的第三版需要购买纸质版~
2019-07-26
回复
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
  • 分享精英

关注 私信
上传资源赚钱or赚积分
最新推荐
es6 阮一峰 48积分/C币 立即下载
1/127
es6 阮一峰第1页
es6 阮一峰第2页
es6 阮一峰第3页
es6 阮一峰第4页
es6 阮一峰第5页
es6 阮一峰第6页
es6 阮一峰第7页
es6 阮一峰第8页
es6 阮一峰第9页
es6 阮一峰第10页
es6 阮一峰第11页
es6 阮一峰第12页
es6 阮一峰第13页
es6 阮一峰第14页
es6 阮一峰第15页
es6 阮一峰第16页
es6 阮一峰第17页
es6 阮一峰第18页
es6 阮一峰第19页
es6 阮一峰第20页

试读结束, 可继续阅读

48积分/C币 立即下载