你需要知道的關於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月完成。敬請期待!