你需要知道的關於ECMAScript 6的12件事
ECMAScript 6 是 JavaScript 標準的下一個版本。
以下是您需要知道的有關 ES6 的12個酷事:
1. 箭頭函數
類似於 CoffeeScript,ES6 允許你使用肥箭頭語法定義一個函數。
var square = n => n * n
2. 箭頭範疇
‘this’關鍵字可能會令人困惑,因為它指的是調用它的東西。例如,當使用 setTimeout
時,‘this’ 指的是窗口物件。箭頭函數表達式解決了這個問題,將‘this’綁定到函數本身。
function yo() {
this.name = "Victor"
setTimeout(() => {
console.log("yo " + this.name)
}, 5000)
}
// Output: yo Victor
3. 字串模板
就像 CoffeeScript 一樣,ES6 包含了一個使用 ${}
語法用於變數的字串內插特性。注意下面的例子在第 2 行使用了反勾號而非單引號。
var person = { name: "Victor", age: 24 }
var hello = `My name is ${person.name} and I am ${person.age} years old`
4. Let 範疇
let
聲明了一個區塊範疇的本地變數。換句話說,它不會覆寫外部範疇中的變數值。
var x = 10
for (let i = 0; i < 10; i++) {
let x = i * 2
}
console.log(x) // x is still 10, not 18
5. 陣列解構賦值
您不必逐一聲明多個變數,可以像這樣在一行中賦值給它們:
var [one, two, three] = [1, 2, 3]
6. 物件解構賦值
同樣地,您也可以為物件使用解構賦值:
var { firstName: name } = { firstName: "Victor" }
7. 物件字面量
您可以使用簡寫符號來構造一個物件,而不是寫 {firstName: firstName, lastName: lastName}
。
var firstName = "Victor",
lastName = "Leung"
var person = { firstName, lastName }
8. 默認參數
您可以像這樣為參數分配默認值:
function sayHello(name, greeting = "yo man") {
return `${greeting} ${name}`
}
9. 展開運算符
展開運算符(...
)允許您將一個陣列的每個元素作為參數傳遞。
function threeNumbers(x, y, z) {
console.log(x, y, z) // 0, 1, 2
}
var args = [0, 1, 2]
threeNumbers(...args)
10. 類別
就像其他物件導向的程式設計語言一樣,ES6 允許您使用新的類別語法來定義一個用於構建物件的藍圖。
class Person {
sayHey(name) {
return "hey " + name
}
}
11. 類別繼承
您可以使用 extends
關鍵字來擴展一個類別。
class Victor extends Person {
sayHey() {
return super.sayHey("Victor")
}
}
12. 產生器
產生器是可以被退出並稍後重新進入的函數。調用一個產生器函數並不會立即執行其內容。當迭代器的 next()
方法被調用時,產生器函數的內容會被執行,直到遇到第一個 yield
表達式。
function* idMaker() {
var index = 0
while (true) yield index++
}
var gen = idMaker()
console.log(gen.next().value) // 0
console.log(gen.next().value) // 1
console.log(gen.next().value) // 2
ECMAScript 6中有許多新特性。更多細節,請參考 MDN。官方發表過程於2015年3月在Mozilla開始,並預計於2015年6月完成。敬請期待!