快來使用ECMAScript 2015吧
ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準，已經(jīng)在2015年6月正式發(fā)布了。標準的制定者有計劃，以后每年發(fā)布一次標準，使用年份作為標準的版本。因為當前版本的ES6是在2015年發(fā)布的，所以又稱ECMAScript 2015。
如果你還不知道ECMAScript，那么你有可能知道javascript，那么可自行查詢js和es的關系，如果你也不知道javascript可以忽略這篇文章了。
ES6是ES5.1的下一個版本，和ES5不一樣，ES6的改動非常大，而且無法用shim腳本兼容陳舊的瀏覽器，我一開始認為這是有違web理論的，web得以繁榮昌盛，得益其強大的兼容性，HTML5的理念也是向后兼容，css3的理念也是向后兼容，我一直認為ES6會步ES4的后塵，就像xhtml2.0的結局一樣。
直到我遇見了babel，transpiler 的理念真是太棒了，當我驀然回首，發(fā)現(xiàn)自己早已深處工程化前端之列，預編譯已經(jīng)融入到工作中了，如果你還處在前端的蠻荒時代（沒有編譯流程），那么可以先考慮引入工程化流程，再來接觸ES6，目前比較流行的有grunt，gulp，webpack等。當然如果是node的話，那就沒什么壓力了。
babel支持的平臺非常多，可以參看這里，點擊相應平臺，下面會給出使用的例子。
至此我真的想說，前端朋友們，是時候使用ES6了，大膽嘗試吧，真的非常棒。
本文將介紹在fis中借助babel使用ES6的過程，包括環(huán)境搭建，基本語法，模塊系統(tǒng)，優(yōu)秀特性等。
環(huán)境搭建
作為前端開發(fā)者，我非常幸運能使用fis這么高大上的工具，fis在前不久剛剛發(fā)布了fis3，我們用的還是fis2，作為國產(chǎn)工具最大的杯具就是babel不提供默認支持，好的方面是fis團隊已經(jīng)開發(fā)出了插件支持——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語法的瀏覽器里運行，如果你支持的瀏覽器都是現(xiàn)代瀏覽器可以忽略這個問題，如果你要兼容一些陳舊瀏覽器，比如ie8那么我建議使用es5-shim，需要引入es5-shim.js和es5-sham.js。
很多編輯器其實還不支持es6的語法，我使用的編輯器是sublime，借助JavaScriptNext - ES6 Syntax這個插件，可以讓sublime支持es6語法。
如果你的編輯器沒有類似的功能，那么推薦你用subliem吧，我總結了一些使用subliem的經(jīng)驗，推薦給你《我的 Sublime Text 2 筆記》。
基本語法
ES6帶來了很多新的語法，參考資料里面列舉了一些資料可以參考，我看的是阮一峰老師的ECMAScript 6 入門，新知識點還是蠻多的，邊掃語法邊實驗，看看babel編譯完的es5語法是什么樣子，我建議你也這么做，這樣效率極高，而且能知道babel干了些什么。
babel有一個try is out，可以時時預覽原語法和編譯后的語法。本文下面的部分就將用這個作為演示系統(tǒng)。
需要注意的是babel并不支持全部的es6語法，有些并沒有實現(xiàn)，babel首頁有個清單，babel還不止支持es6，還支持部分es7的語法。
模塊系統(tǒng)
先來說說模塊系統(tǒng)吧，如果你還未使用模塊開發(fā)（AMD OR CMD），那可以跳過這個章節(jié)，或者看看我的另一篇文章《JavaScript模塊的前世今生》，了解下javascript模塊的歷史，ES6的模塊系統(tǒng)和現(xiàn)有模塊系統(tǒng)是兼容的，也就是說你既可以在AMD中引用ES6中的模塊，也可以在ES6中引用AMD中的模塊。
在ES6模塊系統(tǒng)中，引用其他模塊系統(tǒng)可以用下面的代碼：
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默認使用的模塊系統(tǒng)是commonjs，上面編譯完的代碼就是commonjs的代碼。
再來看看如何導出能被其他模塊系統(tǒng)引用的模塊。
var $ = '';
export default $;
上面的代碼，導出了默認導出模塊，下面看看babel編譯的結果：
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var $ = '';
exports['default'] = $;
module.exports = exports['default'];
編譯完還是符合commonjs規(guī)范的模塊。好了對于其他導入和導出已發(fā)，不妨自己試試吧。
注意：babel編譯完的代碼會好使用嚴格模式。
關于模塊的更多細節(jié)可以參考這里：
優(yōu)秀特性
模塊系統(tǒng)介紹完了，來看看ES6中一些其他優(yōu)秀特性，babel并未對ES6的全部語法提供支持，下面我列舉一些自己認為優(yōu)秀的特性，并可立即使用的特性列舉出來。
字符串
動態(tài)字符串使用反引號。并且支持模塊變量和多行模式。
// 源碼
`yanhaijing ${abc}`;
// babel編譯完的代碼
"yanhaijing " + abc;
后面只列舉源碼，babel編譯完的結構可自行查看。
解構賦值
使用數(shù)組和對象成員對變量賦值，優(yōu)先使用解構賦值。
// 數(shù)組結構賦值
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() {}
}
數(shù)組
使用擴展運算符（…）拷貝數(shù)組。
var arr1 = [1, 2, 3];
var arr2 = [...arr1];
函數(shù)
箭頭函數(shù)：
(() => {
console.log('Welcome to the Internet.');
})();
不要在函數(shù)體內使用arguments變量，使用rest運算符（…）代替：
function concatenateAll(...args) {
return args.join('');
}
使用默認值語法設置函數(shù)參數(shù)的默認值：
function f(a = 1) {}
Class
總是用class，取代需要prototype操作。因為class的寫法更簡潔，更易于理解
class Child extends Parent {
constructor() {
super();
this.value = 1;
}
get() {
return this.value;
}
}
更多優(yōu)秀特性，請參看這里。
總結
好了這就是本文的全部內容了，讀完本文按捺不住心中的小激動就快快來適用吧，es6真的很棒，babel非常重要，ES6還有很多特性等待你去挖掘哦，另外babel也有很多功能，你自己去發(fā)現(xiàn)吧。
如果你有什么疑問或建議在評論區(qū)和我一起討論吧。
更多建議：