新系列導讀
學習編程語言是一件持之以恒的事情，從學會簡單的語法就能寫出程序，到理解類型和設計模式，再到考慮代碼的組織架構。誰不是從這樣一點點深入和積累的呢？入門總是輕松又令人愉悅的，但隨著知識點越來越多學習的曲線卻驟然陡峭。但隨著對語言的深入理解，再回頭來重新審閱基本的知識，又會有柳暗花明又一村的豁然感，「啊，原來是這樣的」那種感覺。
這個「3分鐘」系列將利用 babel 在線的實時編譯工具，來學習分析 es6+ 的部分特性。通過編譯后的 es5 代碼，我們可以從中了解到 es6+ 特性的實現細節，更好的掌握新特性的適用性。
作為系列的第一篇，先介紹這個 babel 在線實時編譯工具。
babel
「今天，使用下一代 Javascript 編程」，正如 babel 官網的標語，babel 正是為抹平 高速擴展的 JS 標準 和 緩慢實現標準的瀏覽器 產生的鴻溝而出現的。babel 最大的功能就是將瀏覽器還未支持的語法編譯成低版本 js 語法，讓其能正常運行。
首先打開頁面 babel 在線實時編譯
界面分為三大區域：設置區、源碼區 和 編譯區。
設置區
主要進行編譯方式的設置和編譯環境的設置。
我們主要關心編譯環境（PRESETS) 的設置，比如你希望引入的環境編譯包(lib)。圖中所示的就是引入了 es2015 和 stage-3 兩個編譯包，編譯器就會先對源碼進行 stage-3 的特性進行編譯，再對 es2015 的特性進行編譯。需要注意的是，如果只開啟 es2015 那么只會編譯 es2015 中新增的特性，更加新穎的特性就無法識別出來。
讓我們來舉個例子：箭頭函數是 es2015 的新特性，而算數運算符冪運算 ** 是 es2016 的新特性，那么在編譯環境里只選擇 es2015 會發生什么呢？
// v6.26.0
// presets: es2015
// 源碼區
let foo = {
bar: () => {
return true;
},
baz: 10 ** 2,
}
// 編譯區
"use strict";
var foo = {
bar: function bar() { // 只有 es2015 的箭頭函數被編譯了
return true;
},
baz: 10 ** 2
};
如果在編譯環境里只選擇 es2016 會發生什么呢？
// v6.26.0
// presets: es2016
// 源碼區
let foo = {
bar: () => {
return true;
},
baz: 10 ** 2,
}
// 編譯區
let foo = {
bar: () => {
return true;
},
baz: Math.pow(10, 2) // 只有 es2016 的冪運算符被編譯了
};
所以如果想讓所有新特性都被編譯成 es5 那么最好同時選擇 es2015 和 stage-3 兩個編譯包。
// v6.26.0
// presets: es2015 stage-3
// 源碼區
let foo = {
bar: () => {
return true;
},
baz: 10 ** 2,
}
// 編譯區
"use strict";
var foo = {
bar: function bar() {
return true;
},
baz: Math.pow(10, 2)
};
// 特性都被編譯了
源碼區和編譯區
在源碼區輸入代碼，在編譯區就能實時顯示編譯后的代碼。
示例解讀
在這個系列里的代碼示例，為了可讀性都不會使用截圖，而是用代碼編寫，在代碼頭部添加注釋以方便閱讀代碼的人知道代碼的編譯環境和編譯細節。
代碼會包含使用的編輯器版本
// v6.26.0
包含使用的編譯包
// es2016
結語
由于 ES 的新特性主要包含兩個方面，一個是對現有對象的擴展，比如 Object.assing()；另一方面是對語法的擴展，比如新語法和語法糖。這個「3分鐘」 系列也將著重介紹對語法的擴展。
謝謝。
羅小黑寫寫文字
如果喜歡文章 請留下一個贊~
如果喜歡文章 分享給更多人~自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）
轉載時請保留原文鏈接 以保證可及時獲取對文章的訂正和修改
