JavaScript ECMAScript版本介绍

程序员文章站 2022-07-03 11:34:38

1. 介绍 1.1 什么是ECMAScript ECMAScript，简称ES，是由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）按照ECMA-262和ISO/IEC 16262标准制定的一种脚本语言规范。 ......

1. 介绍

1.1 什么是ecmascript

ecmascript，简称es，是由ecma国际（前身为欧洲计算机制造商协会,英文名称是european computer manufacturers association）按照ecma-262和iso/iec 16262标准制定的一种脚本语言规范。

1.2 javascript 与 ecmascript 的关系

javascript是按ecmascript规范实现的一种脚本语言，其他的还有jscript、actionscript。

这三种语言还提供了ecma规范外的额外功能。

1.3 ecmascript版本

截止到2017年年底，ecmascript共发布了8个版本：

ecmascript 1

1997年06月：发布首版。

ecmascript 2

1997年06月：修改规范完全符合iso/iec 16262国际标准。

ecmascript 3

1999年12月：增加正则、更好的文字处理、新的控制语句、try/catch异常处理、更加明确的错误定义，数字输出格式等等。

ecmascript 4

放弃发布。

ecmascript 5

2009年12月：完善了ecmascript 3版本、增加"strict mode,"（严格模式）、以及新的功能，如getter和setter、json库支持和更完整的对象属性。

ecmascript 5.1

2011年06月：使规范更符合iso/iec 16262:2011第三版。

ecmascript 6

2015年06月：第六版的名字有很多，可以叫ecmascript 6（es6），也可以叫ecmascript 2015（es2015）。

此版本增加了非常重要的东西：let、const、class、modules、 arrow functions,、template string, destructuring, default, rest argument、binary data、promises等等。

规范地址：

es6及以上的教程可参考babel提供的：

ecmascript 7

2016年06月：也被称为ecmascript 2016。完善es6规范，还包括两个新的功能：求幂运算符（*）和array.prototype.includes方法。

规范地址：

ecmascript 8

2017年06月：增加新的功能，如并发、原子操作、object.values/object.entries、字符串填充、promises、await/asyn等等。

规范地址：

2. 浏览器与js新特性

2.1 查看浏览器支持情况

js的每隔一段时间就会出新的特性，而浏览器只有不断的升级才能满足这些，而且同一个浏览器各版本对新特性的支持情况也不一样。

网站：提供了查看某个功能浏览器的支持情况。

如es6规范新增加的arrow function（箭头函数）的支持如下：

JavaScript ECMAScript版本介绍

可以看到ie所有版本完全不支持，chrome 45版本才开始支持。

2.2 babel

想使用js的新特性，又想兼容旧浏览器版本，那么就需要一种转换工具：把js的新特性代码转换为旧浏览器可以支持的js代码。而babel就是这么一个工具。

babel，官方介绍一个javascript编译器。说简单点就是把使用es6及以上的特性的代码转换为对应的es5代码，以使旧浏览器可以运行。

网址：

在gulp中使用babel

babel除了自身提供babel built-ins外，还提供了其他构建工具的版本，本示例以gulp为例。

1) 安装gulp-babel

npm install --save-dev gulp-babel babel-core babel-preset-env

2) 编写一段es6的代码

创建一个app.js文件，并写入以下代码：

var sayhello = (username, age) => {
console.log(username + ' age is ' + age);
};

3) 编写gulp文件

var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('default', function() {
return gulp
.src('js/app.js')
.pipe(
babel({
presets: ['env']
})
)
.pipe(gulp.dest('dist'));
});

4) 运行gulp后的结果

'use strict';
var sayhello = function sayhello(username, age) {
console.log(username + ' age is ' + age);
};

end

web开发之路系列文章

菜单加载中...