免费AI编程助手
快来使用ECMAScript 2015吧
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。标准的制定者有计划，以后每年发布一次标准，使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。
如果你还不知道ECMAScript，那么你有可能知道javascript，那么可自行查询js和es的关系，如果你也不知道javascript可以忽略这篇文章了。
ES6是ES5.1的下一个版本，和ES5不一样，ES6的改动非常大，而且无法用shim脚本兼容陈旧的浏览器，我一开始认为这是有违web理论的，web得以繁荣昌盛，得益其强大的兼容性，HTML5的理念也是向后兼容，css3的理念也是向后兼容，我一直认为ES6会步ES4的后尘，就像xhtml2.0的结局一样。
直到我遇见了babel，transpiler 的理念真是太棒了，当我蓦然回首，发现自己早已深处工程化前端之列，预编译已经融入到工作中了，如果你还处在前端的蛮荒时代（没有编译流程），那么可以先考虑引入工程化流程，再来接触ES6，目前比较流行的有grunt，gulp，webpack等。当然如果是node的话，那就没什么压力了。
babel支持的平台非常多，可以参看这里，点击相应平台，下面会给出使用的例子。
至此我真的想说，前端朋友们，是时候使用ES6了，大胆尝试吧，真的非常棒。
本文将介绍在fis中借助babel使用ES6的过程，包括环境搭建，基本语法，模块系统，优秀特性等。
环境搭建
作为前端开发者，我非常幸运能使用fis这么高大上的工具，fis在前不久刚刚发布了fis3，我们用的还是fis2，作为国产工具最大的杯具就是babel不提供默认支持，好的方面是fis团队已经开发出了插件支持——fis-parser-babel-5.x。
借助这个插件就搞定了编译问题，先来说说我的思路吧，我只希望给固定的js引入编译过程，我的思路是这样的，后缀为.es或.es.js的文件才引入编译流程，这样就可以共存了。
test.js // 普通js文件
test.es // es文件
test.es.js //es文件
我使用的是fis2，配置的js也非常容易，所以在此就不列举了。
babel会将es6代码编译为es5代码，所以其代码需要在支持es5语法的浏览器里运行，如果你支持的浏览器都是现代浏览器可以忽略这个问题，如果你要兼容一些陈旧浏览器，比如ie8那么我建议使用es5-shim，需要引入es5-shim.js和es5-sham.js。
很多编辑器其实还不支持es6的语法，我使用的编辑器是sublime，借助JavaScriptNext - ES6 Syntax这个插件，可以让sublime支持es6语法。
如果你的编辑器没有类似的功能，那么推荐你用subliem吧，我总结了一些使用subliem的经验，推荐给你《我的 Sublime Text 2 笔记》。
基本语法
ES6带来了很多新的语法，参考资料里面列举了一些资料可以参考，我看的是阮一峰老师的ECMAScript 6 入门，新知识点还是蛮多的，边扫语法边实验，看看babel编译完的es5语法是什么样子，我建议你也这么做，这样效率极高，而且能知道babel干了些什么。
babel有一个try is out，可以时时预览原语法和编译后的语法。本文下面的部分就将用这个作为演示系统。
需要注意的是babel并不支持全部的es6语法，有些并没有实现，babel首页有个清单，babel还不止支持es6，还支持部分es7的语法。
模块系统
先来说说模块系统吧，如果你还未使用模块开发（AMD OR CMD），那可以跳过这个章节，或者看看我的另一篇文章《JavaScript模块的前世今生》，了解下javascript模块的历史，ES6的模块系统和现有模块系统是兼容的，也就是说你既可以在AMD中引用ES6中的模块，也可以在ES6中引用AMD中的模块。
在ES6模块系统中，引用其他模块系统可以用下面的代码：
import $ from 'jquery.js';
$('#test');
babel编译完的代码如下：
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _jqueryJs = require('jquery.js');
var _jqueryJs2 = _interopRequireDefault(_jqueryJs);
(0, _jqueryJs2['default'])('#test');
babel默认使用的模块系统是commonjs，上面编译完的代码就是commonjs的代码。
再来看看如何导出能被其他模块系统引用的模块。
var $ = '';
export default $;
上面的代码，导出了默认导出模块，下面看看babel编译的结果：
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var $ = '';
exports['default'] = $;
module.exports = exports['default'];
编译完还是符合commonjs规范的模块。好了对于其他导入和导出已发，不妨自己试试吧。
注意：babel编译完的代码会好使用严格模式。
关于模块的更多细节可以参考这里：
优秀特性
模块系统介绍完了，来看看ES6中一些其他优秀特性，babel并未对ES6的全部语法提供支持，下面我列举一些自己认为优秀的特性，并可立即使用的特性列举出来。
字符串
动态字符串使用反引号。并且支持模块变量和多行模式。
// 源码
`yanhaijing ${abc}`;
// babel编译完的代码
"yanhaijing " + abc;
后面只列举源码，babel编译完的结构可自行查看。
解构赋值
使用数组和对象成员对变量赋值，优先使用解构赋值。
// 数组结构赋值
var arr = [1, 2, 3, 4];
var [first, second] = arr;
// 对象结构赋值
var obj = {a: 1, b: 2};
var {a, b} = obj;
对象
ES6扩展了对象字面量的语法。
var a = 1;
var obj = {
a,
[a + 1]: 3,
add() {}
}
数组
使用扩展运算符（…）拷贝数组。
var arr1 = [1, 2, 3];
var arr2 = [...arr1];
函数
箭头函数：
(() => {
console.log('Welcome to the Internet.');
})();
不要在函数体内使用arguments变量，使用rest运算符（…）代替：
function concatenateAll(...args) {
return args.join('');
}
使用默认值语法设置函数参数的默认值：
function f(a = 1) {}
Class
总是用class，取代需要prototype操作。因为class的写法更简洁，更易于理解
class Child extends Parent {
constructor() {
super();
this.value = 1;
}
get() {
return this.value;
}
}
更多优秀特性，请参看这里。
总结
好了这就是本文的全部内容了，读完本文按捺不住心中的小激动就快快来适用吧，es6真的很棒，babel非常重要，ES6还有很多特性等待你去挖掘哦，另外babel也有很多功能，你自己去发现吧。
如果你有什么疑问或建议在评论区和我一起讨论吧。
更多建议：