ECMAScript 7又以JavaScript
2016而被熟知,是正在快速开发的新一代JavaScript编程语言标准。尽管该标准需要等到明年才发布,但是诸多浏览器已经做好了准备。同往常一样,Chrome和Firefox率先做出改变,而今天召开的微软开发者网络会议上,负责HTML5和开源网页标准的主要项目经理David
Catuhe也宣布Edge浏览器开始部署ECMAScript 7功能。

JavaScript由三部分组成:

目录

  • 引言

  • ECMAScript

  • ES5-/-ES6-/-ES7

  • babel

    • babel-cli

    • babel-node

    • 其他

  • 小结

  • 参考

澳门新葡萄京所有网站 1

    1. ECMAScript(核心)

            作为核心,它规定了语言的组成部分:语法、类型、语句、关键字、保留字、操作符、对象。

引言

作为一个JavaScript使用者和开发者
想必每天都在和不同的JavaScript版本和工具打交道 例如:

ES5 / ES6 / ES7 / babel ...

那么这些到底是什么意思呢? 本文打算用最简单的描述理清这些关系

据 悉Edge浏览器在装备ECMAScript
7功能之后将会率先增加async/await功能,这是老JavaScript的版本回调和承诺模式(官方在ES6中增加)的革命性升级。微软公司和
JavaScript社区推行该功能已经有段时间,主要是因为在微软的C#编程语言上使用async/await功能已经有数年时间了。在Windows
10 Build 10532及更高版本将会增加对async/await功能的支持。

    2. DOM(文档对象模型)

ECMAScript

ECMAScript是由ECMA国际(前身为
欧洲计算机制造商协会 European Computer Manufacturers
Association)制定的标准化脚本语言

JavaScript是按照ECMAScript标准实现的编程语言

即: ECMAScript是标准 JavaScript是实现 但是日常两种可以互换

稿源:cnbeta

    3. BOM (浏览器对象模型)

ES5 / ES6 / ES7

  • ES5 / ES6 是指ECMAScript版本的缩写

ECMAScript标准发布的版本和年份的对应关系如下

年份 版本 缩写
2011 ECMAScript 5.1 ES5
2015 ECMAScript 6.0 ES6/ES2015
  • ES7 是指ECMAScript的最新版本

澳门新葡萄京所有网站,由于标准还没有正式确定所以分为4个stage

功能 stage 0 > stage 1 > stage 2 > stage 3

我们主要了解ECMAScript

    ECMAScript版本:

babel

babel[‘beibəl] 即
巴别塔

从名字不难看出babel的作用: 解决JavaScript不同版本兼容性问题

ES6 / ES7标准也很多有用的特性

例如: async / await就包含在stage 3

但是由于

  • 兼容性 尤其是浏览器的兼容性 + 国内用户各种盗版系统不升级
    所以不得不将ES6 / ES7实现的JavaScript代码转码成ES5执行

浏览器对ES6的兼容性 可以参考ECMAScript 6 compatibility
table

  • 扩展性
    JavaScript的超集TypeScript以及JSX
    也需要转码成JavaScript才能执行

        第一版(ES1):

            初始版本

babel-cli

Babel提供了babel-cli工具 用于命令行转码 安装命令如下

npm i -g babel-cli
babel -V

关于npm的安装和使用可以参考这里

  • 首先 创建一个使用ES6″箭头函数”语法的script.js文件

var a = [1, 2];
console.log('before: ' + a);

a = a.map(i => i + 1);
console.log('after: ' + a);

关于”箭头函数”的更多介绍
可以参考这里

  • 接着 在script.js文件的同级目录添加babel的配置文件.babelrc

{
  "presets": [
    "es2015"
  ],
}
  • 同时 我们需要添加babel presets “es2015″的依赖 安装命令如下

npm i --save-dev babel-preset-es2015

安装成功后 在同级目录下会生成package.json文件和node_modules文件夹

  • 最后 我们就可以使用babel来将ES6文件转码成ES5文件了 命令如下

babel script.js -o script-compiled.js

转码成功后 可以看到生成的script-compiled.js文件内容如下

'use strict';

var a = [1, 2];
console.log('before: ' + a);

a = a.map(function (i) {
  return i + 1;
});
console.log('after: ' + a);

除了在本机安装babel-cli工具
还可以使用babel在线转码工具

        第二版(ES2):

            编辑加工

babel-node

在安装babel-cli的时候 除了安装上述babel命令 还安装了babel-node命令

babel-node可以直接运行ES6文件 例如: script.js文件

babel-node script.js

打印如下

before: 1,2
after: 2,3

babel-node当然也可以运行转码后的文件 例如: script-compiled.js

babel-node script-compiled.js

打印如下

before: 1,2
after: 2,3

如果读者有node.js开发经验
那么可以直接使用babel-node代替node来启动node.js应用

        第三版(ES3):

            新增正则表达式、新控制语句、try-catch等,第三版标志着ECMAScript成为了一门真正的编程语言。

其他

除了上述babel babel-node工具外 还有babel-register babel-core
babel-polyfill等工具

这里就不一一详细介绍了
感兴趣的读者可以参考这里

        第四版(ES4-夭折):

            没有发布成功。全面修订,强类型,新语句,新数据结构,真正的类,经典继承,因为跨度太大,被放弃。

小结

本文作为鄙人Javacript学习和经验总结的开篇 �希望通过本文的介绍
读者再次遇到ES2015 / ES6 / stage3 / babel工具集时不再迷茫

        第五版(ES5):

            ES5,增加JSON原生对象(用于解析和序列化JSON数据)、继承的方法和高级属性定义,包含严格模式。也是目前被浏览器等环境广泛支持的版本。

参考

  • ECMAScript
    6简介

  • ECMAScript
    proposals

  • ECMAScript 6 compatibility
    table

  • Babel
    入门教程

更多文章,
请支持我的个人博客

        第六版(ES6):

            ES6,增加const/let关键字、模版字符串、函数默认值、剪头函数、对象初始化简写、解构、展开运算符、import/export关键字、Promise、Generators,类的支持等一系列新特性。

            ES6也是一个泛指5.1版本后的JavaScript新一代标准,因为这个版本新增的特别比较多,也比较大。

            第六版还没有被浏览器普遍支持,所以需要babel编译器,将ES6代码编译成ES5。

            ES6在2015年发布,也叫ES2015。至此之后,ECMAScript将进入每年发布一次新标准的阶段。所以以后的版本,一般不按版本号说,按年号说,ES2017、ES2018….

        ECMAScript 2016:

            增加了async/await异步语法糖等。