開始嘗試 ES6
最近有時會看看 JavaScript ECMAScript 6 的相關文件，今年也是時候將新專案用 ES6 來撰寫，在還沒使用 ES6 以前，我個人比較偏好使用 CoffeeScript 或 LiveScript，如果嚐試過 CoffeeScript 後，你會發現轉換成 ES6 是相當容易。網路上可以直接看 6to5 專案，提供 Sprockets, Broccoli, Browserify, Grunt, Gulp, Webpack ..等，要嘗試 ES6 語法轉成 Javascript 可以透過 ES6 repl 介面來嘗鮮。
Classes
來看看用 CoffeeScript 怎麼寫 JavaScript Class:
class Person
constructor: (@firstName, @lastName) ->
name: ->
"#{@first_name} #{@last_name}"
setName: (name) ->
names = name.split " "
@firstName = names[0]
@lastName = names[1]
boy = new Person "Bo-Yi", "Wu"
boy.setName("Boy Apple")
console.log boy.name()在 ES6 可以使用 classes, getters, and setters
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 boy = new Person("Bo-Yi", "Wu");
boy.name = ""Boy Apple";
console.log(boy.name);從上面可以發現 2 點不一樣的地方
- 可以忽略
function字串 - 每個 function 後面不需要分號(;)
Interpolation
ES6 開始支援 Template String，詳細可以參考 Addy Osmani 最新寫的 Getting Literal With ES6 Template Strings
CoffeeScript:
"multi-line strings with interpolation like 1 + 1 = #{1 + 1}"JavaScript:
"multi-line strings with interpolation like 1 + 1 = " + (1 + 1)
ES6 template strings:
`multi-line strings with interpolation like 1 + 1 = ${1 + 1}`注意 ES6 並非用雙引號了。所以上面的 get name function 可以改成底下
get name() {
return `${this.firstName} ${this.lastName}`;
}Fat Arrows
在寫 Javascript 要如何把目前的 this 綁定到現在函式內，可以透過 CoffeeScript 的 => 符號，現在 ES6 也支援了
純 JavaScript 寫法
var self = this;
$("button").on("click", function() {
// do something with self
});CoffeeScript:
$("button").on "click", =>
# do something with thisES6:
$("button").on("click", () => {
// do something with this
});Default arguments
CoffeeScript 可以定義函式傳入預設值
hello = (name = "guest") -> console.log(name)
ES6 現在也可以了
var hello = function(name = "guest") {
alert(name);
}Splats functions
PHP 5.6 開始也支援了 Variadic functions，而 CoffeeScript 也有此功能
PHP 5.6:
<?php
function sum(...$numbers) {
$acc = 0;
foreach ($numbers as $n) {
$acc += $n;
}
return $acc;
}
echo sum(1, 2, 3, 4);
?>CoffeeScript:
awards = (first, second, others...) -> gold = first silver = second honorable_mention = others
ES6：
var awards = function(first, second, ...others) {
var gold = first;
var silver = second;
var honorableMention = others;
}Destructuring
Destructuring 讓變數可以直接對應物件或陣列內容
CoffeeScript:
[first, _, last] = [1, 2, 3]
ES6:
var [first, , last] = [1, 2, 3];
我們可以將 set name 函式改成底下
set name(name) {
[this.firstName, this.lastName] = name.split(" ");
}結論
更多學習資源可以直接參考 6to5 專案，從現在開始擁抱 ES6 吧。
參考: Replace CoffeeScript with ES6