上一篇文章我們介紹了法力無邊的stage-0 和 包羅萬象的stage-1， 現在我們來介紹下 stage-2 和 stage-3
深藏不露的stage-2
為什么說 stage-2深藏不露呢，因為它很低調，低調到你可以忽略它，但事實上，它很有內涵的。它除了覆蓋stage-3的所有功能，還支持如下兩個插件：
syntax-trailing-function-commas
這個插件讓人一看覺得挺沒趣的，讓人甚至覺得它有點雞肋。因它不是對ES6功能的增加，而是為了增強代碼的可讀性和可修改性而提出的。如下面的代碼所示：
// 假設有如下的一個函數，它有兩個參數
function clownPuppiesEverywhere(
param1,
param2
) { /* ... */ }
clownPuppiesEverywhere(
'foo',
'bar'
);
// 有一天，它需要變成3個參數，你需要這樣修改
function clownPuppiesEverywhere(
param1,
- param2
+ param2, // 這一行得加一個逗號
+ param3 // 增加參數param3
) { /* ... */ }
clownPuppiesEverywhere(
'foo',
- 'bar'
+ 'bar', // 這里的修改為逗號
+ 'baz' // 增加新的參數
);
// 看到沒？ 我們修改了4行代碼。。啊啊。修改了4行代碼。
修改了4行代碼，嗯嗯嗯。。追求高效的程序猿想想了，以后如果有更多參數了，我是不是要改等多行，得想想，代碼改的越少越好，於是有了下面的改動。。
// 我們來重新定義一下函數
function clownPuppiesEverywhere(
param1,
param2, // 注意這里，我們加了一個逗號喲
) { /* ... */ }
clownPuppiesEverywhere(
'foo',
'bar', // 這里我們也加了一個逗號
);
// 現在函數需要三個參數，我們來修改下
function clownPuppiesEverywhere(
param1,
param2,
+ param3, // 增加params3參數
) { /* ... */ }
clownPuppiesEverywhere(
'foo',
'bar',
+ 'baz', // 增加第三個參數
);
// 叮叮當，我們只修改了兩行代碼就完成了，好開森
說實話吧，這個功能讓人有點很無語。不過程序猿對干凈代碼的追求真的很讓人感動，還是值得鼓勵的。這個就是stage-2中"尾逗號函數”功能。哈哈哈哈。
transform-object-rest-spread
再來說transform-object-rest-spread， 其實它是對 ES6中解構賦值的一個擴展，因為ES6只支持對數組的解構賦值，對對象是不支持的。如下面的代碼所示：
// 獲取剩下的屬性
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
// 屬性展開
let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
大放異彩的stage3
為啥說stage3大放異彩呢？因為它支持大名鼎鼎的async和await, 這兩個哥們可是解決(Ajax)回調函數的終極解決方法呀！管你什么異步，我都可以用同步的思維來寫，ES7里面非常強悍的存在。總的來說，它包含如下兩個插件:
transform-async-to-generator
transform-async-to-generator主要用來支持ES7中的async和await， 我們可以寫出下面的代碼：
const sleep = (timeout)=>{
return new Promise( (resolve, reject)=>{
setTimeout(resolve, timeout)
})
}
(async ()=>{
console.time("async");
await sleep(3000);
console.timeEnd("async");
})()
再來一個實際點的例子
const fetchUsers = (user)=>{
return window.fetch(`https://api.douban.com/v2/user/${user}`).then( res=>res.json())
}
const getUser = async (user) =>{
let users = await fetchUsers(user);
console.log( users);
}
console.log( getUser("flyingzl"))
提示： 由於asycn和await是ES7里面的內容，現階段不建議使用。為了順利運行上面的代碼，建議用webpack進行編譯。
transform-exponentiation-operator
transform-exponentiation-operator這個插件算是一個語法糖，可以通過**這個符號來進行冪操作，想當於Math.pow(a,b)。如下面的樣例
// x ** y
let squared = 2 ** 2;
// 相當於: 2 * 2
let cubed = 2 ** 3;
// 相當於: 2 * 2 * 2
// x **= y
let a = 2;
a **= 2;
// 相當於: a = a * a;
let b = 3;
b **= 3;
// 相當於: b = b * b * b;
很簡單也很實用吧，哈。使用起來還是蠻方便的。
總結
通過以上的兩篇文章，我們了解了stage-0,state-1，stage-2以及stage-3的區別。在進行實際開發時，可以更具需要來設置對應的stage。如果省事懶得折騰，一般設置為stage-0即可。如果為了防止開發人員使用某些太新的功能，我們可以限制到某個特定的stage即可。如果有其他問題，歡迎大家留言 😃。 更詳細的請參考https://babeljs.io/docs/plugins/preset-stage-0/