快來使用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-babel2。

藉助這個外掛就搞定了編譯問題，先來說說我的思路吧，我只希望給固定的js引入編譯過程，我的思路是這樣的，字尾為.es6或.es6.js的檔案才引入編譯流程，這樣就可以共存了。

test.js // 普通js檔案
test.es6 // es6檔案
test.es6.js //es6檔案

我使用的是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 的模組系統

優秀特性

模組系統介紹完了，來看看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也有很多功能，你自己去發現吧。

如果你有什麼疑問或建議在評論區和我一起討論吧。

參考資料

• ECMAScript 5.1
• ECMAScript 6 入門
• ECMAScript 6 — New Features: Overview & Comparison
• es6features
• 現在開始使用 ES6
• es6 compat-table

原文連結

http://yanhaijing.com/js/2015/09/04/try-es2015/