ECMAScript 6 简介

1.1 ECMAScript 和JavaScript 的关系

        一个常见的问题是, ECMAScript 和JavaScript 到底是什么关系?
要讲清楚这个问题,需要回顾历史。1996 年11 月, JavaS cr ipt 的创造者一-Netscape 公司,决定将JavaScript 提交给国际标准化组织ECMA ,希望这种语言能够成为国际标准。次年, ECMA发布了262 号标准文件( ECMA-262 )的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript ,这个版本就是1.0 版。该标准从一开始就是针对JavaScript 语言制定的,但是井没有称其为JavaScript ,主要有以下两方面原因。一是商标, Java 是Sun 公司的注册商标,根据授权协议,只有Netscape 公司可以合法地使用JavaScript 这个名字,而且Java S cript 本身也己被Netscap e 公司注册为商标。二是想体现这门语言的制定者是ECMA ,而不是Netscape ,这样有利于保证这门语言的开放性和中立性。因此, ECMAScript 和JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的ECMAScript 方言还有JScript 和Action Script )。在日常场合,这两个词是可以互换的。

1.2 ES6 与ECMAScrip2015 的关系

ECMAScript 2015 (简称ES2015 )这个词也是经常可以看到的。那么,它与ES6 是什么关系呢?

201 l 年, 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.l 版,因为两者的差异非常小(只新增了数组实例的includes 方法和指数运算符),基本上可以认为是同一个标准。根据计划, 2017 年6 月会发布ES2017 标准。因此, ES6 既是一个历史名词,也是一个泛指,含义是5.1 版本以后的JavaScript 的下一代标准,涵盖了ES2015 、ES2016 、ES2017 等,而ES2015 则是正式名称,特指当年发布的正式版本的语言标准。本书中提到的ES6 , 一般是指ES2015 标准,但有时也是泛指“下一代JavaScript 语言” 。

1.3 语法提案的批准流程

任何人都可以向标准委员会(又称TC39 委员会〉提案,要求修改语言标准。
一种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都要由TC39
委员会批准。
Stage 0: Strawman (展示阶段)
Stage I : Proposal (征求意见阶段〉
Stage 2: Draft (草案阶段)
• Stage 3: Candidate (候选阶段)
• Stage 4: Finished (定案阶段)
一个提案只要能进入Stage 2 ,就基本认为其会包括在以后的正式标准里面。ECMAScript当前的所有提案都可以在TC39 的官方网站Github.com/tc39/ecma262 中查看。
本书的写作目标之一,是跟踪ECMAScript 语言的最新进展,介绍5.1 版本以后所有的新语
法。对于那些明确或很有希望会被列入标准的新语法,本书都将予以介绍。

l. 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 所继
承。因此, E S6 制定的起点其实是在2000 年。
为什么ES4 没有通过呢?因为这个版本太激进了,对ES3 做了彻底升级,导致标准委员会
的一些成员不愿意接受。E CMA 的第39 号技术专家委员会( Technical Committee 39 ,简称TC39)
负责制订EC MAScript 标准,成员包括Microsoft 、Mozilla 、Google 等大公司。
2007 年10 月, ECMAScript 4.0 版草案发布,本来预计次年8 月发布正式版本。但是,各
方对于是否通过这个标准,发生了严重分歧。以Yahoo 、Microsoft 、Google 为首的大公司,反
对JavaScript 的大幅升级,主张小幅改动;以JavaScript 创造者Brendan Eich 为首的Mozilla 公
司,则坚持当前的草案。
2008 年7 月,由于对于下一个版本应该包括哪些功能,各方分歧太大,争论过于激烈, ECMA
开会决定,中止ECMA Script 4.0 的开发,将其中涉及现有功能改善的一小部分发布为
ECMAScript 3.1 ,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本
的项目代号为Harmony (和谐)。会后不久, ECMAScript 3 .1 就改名为ECMAScript 5 了。
2009 年12 月, ECMAScript 5 . 0 版正式发布。Harmony 项目则一分为二, 一些较为可行的
设想定名为JavaScript.next 继续开发,后来演变成ECMAScript 6 : 一些不是很成熟的设想则被
视为JavaScript. xt.next ,在更远的将来再考虑推出。TC39 委员会的总体考虑是, ES5 与ES3
基本保持兼容,较大的语法修正和新功能的加入,将由JavaScript.next 完成。当时, JavaScript.next
指的是ES6 ,第6 版发布以后就指ES7 。TC39 的判断是, ES5 会在2013 年的年中成为JavaScript
开发的主流标准,井在此后5 年中一直保持这个位置。
2011 年6 月, ECMAscript 5.1 版发布,并且成为ISO 国际标准CISO/IEC 16262 :2 011 ) 。
2013 年3 月, ECMAScript 6 草案冻结,不再添加新功能。新的功能设想将被放到ECMAScript
7 中。2013 年12 月, ECMAScript 6 草案发布。此后是12 个月的讨论期,以听取各方反馈意见。
2015 年6 月, ECMAScript 6 正式通过,成为国际标准。从2000 年算起,已经过去了
15 年。

1.5 部署进度

 

关于各大浏览器最新版本对于ES6 的支持,可以参阅kangax.github.io/es5-compat-table /es 6 /。
随着时间的推移,支持度己经越来越高,超过90%的ES6 语法特性都实现了。
Node 是JavaScript 语言的服务器运行环境( runtime ),它对ES6 的支持度更高。除了那些
默认打开的功能,还有一些语法功能也已经实现了,但是默认没有打开。使用如下命令,可以
查看Node 中己经实现的E S6 特性。
$ node --vs-options I grep harmony
执行以上命令,输出结果会因为版本的不同而有所不同。
笔者写了一个ES-Checker ( github.com/ruanyf/es-checker )模块,用来检查各种运行环境对
ES6 的支持情况。访问ruanyf.github.io/es-checker 即可查看所用浏览器对ES6 的支持程度。运行
下面的命令,可以查看本机对ES6 的支持程度。
$ npm install -g es-checker
$ es-checker

----------------------------------------------------------------------
Passes 2 4 feature Dectati ons
Your runtime supports 57% of ECMAScript 6

----------------------------------------------------------------------

1.6 Babel 转码器

Babel ( babeljs.io /)是一个广为使用的ES6 转码器,可以将ES6 代码转为ES5 代码,从而
在浏览器或其他环境执行。这意味着,可以用ES6 的方式编写程序,而不用担心现有环境是否
支持。下面是一个例子。
//转码前
input . map(item =>item+ l) ;
// 转码后
input.map(functio n (工tern) {

return item + l;

}
上面的原始代码用了箭头函数, Babel 将其转为普通函数, 这样就能在不支持箭头函数的
JavaScript 环境中执行了。

1.6.1 配置文件.babelrc

Babel 的配置文件是.babelrc ,存放在项目的根目录下。使用Babel 的第一步就是配置这
个文件。
该文件用来设置转码规则和插件,基本格式如下。

{
" p resets ": [ ] ,
" plug ins ":[ ]

}
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 中。

{

" p resets ": [
" latest ",
" react ",
" stage-2 "
" plugins ": [ ]

}

1.6.2 命令行转码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 - cl 工
然后,改写package . json 。

{
//...

" devDependencies ":{
" babel-cl i ": " ^6. 0. 0"

},
" scripts ": {
" build":"babel src - d lib "

},

}
转码的时候需要执行以下命令。
$ npm run build

1.6.3 babel-node

babel-cli 工具自带一个babel-node 命令,提供一个支持E S6 的REPL 环境。它支持
No d e 的REPL 环境的所有功能,而且可以直接运行ES6 代码。
babel-node 不用单独安装,而是随babe l- c li 一起安装。执行babel-node 可以进
入阻P L 环境。
$ babel-node
> (x => x * 2) (1)
2
babel-node 命令可以直接运行E S6 脚本。将上面的代码放入脚本文件es6.js ,然后直
接运行。
$ babel-node es6.js

2
babel-node 也可以安装在项目中。
$ npm install --save-dev babel-cli
然后,改写package.json 。

{
” scripts ”:{
” script-name”:”babel-node script . j s ”

   }

}
在以上代码中,使用babel-node 替代node ,这样script . j s 本身就不用进行任何转
码处理了。

1.6.4 babel-register

babel-reg i ster 模块改写了require 命令,为它加上一个钩子。此后,每当使用require 加载后缀为. j s 、. j SX 、. es 和. es6 的文件时,就会先用Babel 进行转码。$ npm install --save-dev babel- register
使用时,必须首先加载babel-register 。
require ( ” babel - register ” );
require ( ” . / index . j s ”);
这样便不需要手动对index. j s 进行转码了。

注意!
babel-register 只会对require 命令加载的文件进行转码,而不会对当前文件进行转码。另外,由于它是实时转码,所以只适合在开发环境中使用。

 

.......................

持续未完

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(web前端,ES6)