我一直在關注JavaScript的下一個版本ES6，而且最後有機會在一個專案中使用了它。在我使用它短暫時間內，我發現在不發生巨大語法變化的情況下，解決了很多CoffeeScript 試圖解決的問題。
現在使用ES6
我們現在就可以開始使用ES6，通過 6to5專案可以將ES6程式碼轉換成ES5。6to5能支援大量的構建工具包括Broccoli、Grunt、 Gulp和Sprockets。我使用sprockets-es6已經很成功，Sprockets 4.x將為6to5提供開箱即用的支援。
如果你使用Vim，你想將.es6副檔名與JavaScript關聯，請將以下程式碼放到你的. vimrc。
你還可以使用 6to5 REPL 在您的瀏覽器中嘗試ES6。
類
CoffeeScript和ES6都有類的支援。讓我們看看CoffeeScript類與ES6的區別。
CoffeeScript允許我們通過引數、字串插值（interpolation）設定例項變數，同時不使用括號呼叫函式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class Person constructor: (@firstName, @lastName) -> name: -> "#{@first_name} #{@last_name}" setName: (name) -> names = name.split " " @firstName = names[0] @lastName = names[1] blake = new Person "Blake", "Williams" blake.setName("Blake Anderson") console.log blake.name() |
在ES6中，我們可以使用class、getter和setter方法:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } get name() { return this.firstName + " " + this.lastName; } set name(name) { var names = name.split(" "); this.firstName = names[0]; this.lastName = names[1]; } } var blake = new Person("Blake", "Williams"); blake.name = "Blake Anderson" console.log(blake.name); |
如果你在JavaScript中使用任何提供class功能的庫或框架、你會注意到ES6語法有一些細微的差別：
- 函式名後沒有分號
- 函式關鍵字省略了
- 每個定義後沒有逗號
我們也可以利用getter和setter的優勢，它允許我們把name函式當做屬性對待。
插值
我經常希望JavaScript能有一個更強大的字串語法。幸運的是ES6引入了 模板字串。讓我們來對比CoffeeScript字串、JavaScript字串、模板字串、看看每個的功能。
CoffeeScript:
|
1 2 3 4 |
“CoffeeScript允許多行字串 與 插值，比如1 + 1 = # { 1 + 1 } ” |
JavaScript 字串：
|
1 2 |
“JavaScript字串只能在一行”+ ”不支援插值” |
ES6模板字串：
|
1 2 3 |
`模板字串允許字串在 多行,允許插值，比如1 + 1 = $ { 1 + 1 } ` |
我們可以在前面的示例利用模板字串，按如下方式改寫name的getter方法：
|
1 2 3 |
get name() { return `${this.firstName} ${this.lastName}`; } |
這比我們之前使用的字串拼接方式要感覺更加乾淨，使我們更接近CoffeeScript的例子。
大箭頭（Fat arrows）
使得CoffeeScript有如此吸引力的另一個功能，也出現在ES6，即大箭頭。大箭頭允許我們將函式繫結到的當前this的值上。首先，讓我們看看在不使用大箭頭時，我們是如何處理這個問題的。
在ES5中，我們必須在定義函式儲存一個對當前this值的引用：
|
1 2 3 4 5 |
var self = this; $("button").on("click", function() { // do something with self }); |
CoffeeScript大箭頭可以完全省略引數和括號:
|
1 2 |
$("button").on "click", => # do something with this |
ES6大箭頭需要括號，可以帶或不帶引數：
|
1 2 3 |
$("button").on("click", () => { // do something with this }); |
其它特性
ES6有一些其他特性值得關注。
預設引數
CoffeeScript：
|
1 2 |
hello = (name = "guest") -> alert(name) |
ES6：
|
1 2 3 |
var hello = function(name = "guest") { alert(name); } |
Splats
Variadic functions（可變引數函式）, 在CoffeeScript叫做splats。允許你以一個陣列收集傳遞給函式附加引數。ES6中叫做rest引數。
CoffeeScript：
|
1 2 3 4 |
awards = (first, second, others...) -> gold = first silver = second honorable_mention = others |
ES6：
|
1 2 3 4 5 |
var awards = function(first, second, ...others) { var gold = first; var silver = second; var honorableMention = others; } |
解構
解構允許你通過模式匹配從陣列和物件提取特定的值。
CoffeeScript：
|
1 |
[first, _, last] = [1, 2, 3] |
ES6：
|
1 |
var [first, , last] = [1, 2, 3] |
我們可以在前面定義的name setter方法中使用解構，使程式碼更簡潔:
|
1 2 3 |
set name(name) { [this.firstName, this.lastName] = name.split(" "); } |
總結
ES6 transpilers（轉換編譯器）的開發非常活躍，它在功能上正迎頭趕上CoffeeScript。這篇文章只涉及ES6給JavaScript帶來的少數功能，你可以在這裡找到更多關於本文提到的以及其它特性。
在你的下一個專案把CoffeeScript放在一邊，拿ES6試一試！