ES6 速查表

ES6 (ECMAScript 2015) 速查表,方便自己在工作期間可以方便查詢。

模板實值

模板實值能夠將表達式內嵌在字串裡:`${ninja}`。

區塊範圍變數

  • 使用新關鍵字 let 來建立區塊範圍變數:let ninja = ‘Yoshi’。
  • 使用新關鍵字 const 來建立區塊範圍常數,它的值不能被重新指派:const ninja = ‘Yoshi’。

函式參數

  • 不定參數會將所有無法對應到函式參數的引數建立成一個陣列:
    function multiMax(first, ...remaining) {
      /*...*/
    }
    multiMax(2, 3, 4, 5); // first: 2; remaining: [3, 4, 5]
    
  • 呼叫函式卻沒有提供引數值的時候,會使用預設參數作為參數值
    function do(ninja, action = 'skulk') {
      return ninja + ' ' + action;
    }
    do('Fuma'); // 'Fuma skulk'
    

分散運算子

分散運算子用在需要多個資料項的地方,它會擴展一個表達式:[…items, 3, 4, 5]

箭頭函式

箭頭函式讓我們可用較簡潔的語法來建立函式。它們沒有屬於自己的 this 參數,而是從建立之處的背景空間繼承過來:

const values = [0, 3, 2, 5, 7, 4, 8, 1];
values.sort((v1, v2) => v1 - v2); /* 或 values.sort((v1, v2) => { return v1 - v2; }); */
values.forEach(value => console.log(value));

生成器

生成器會針對每次請求產生一連串的值。一旦產生一個值,它就暫停執行,以免造成阻塞。它使用 yield 指令來產生值:

function *IdGenerator() {
  let id = 0;
  while(true) { yield ++id; }
}

約定

約定是計算結果的預留項,它保證我們最終會知道某些計算的結果。約定可能成功,也可能失敗,一旦它的工作完成了,它的狀態就不能再變更:

  • 建立一個約定:new Promise((resolve, reject) => {});
  • 呼叫 resolve 函式來解除一個約定,呼叫 reject 函式來拒絕一個約定。如果發生了錯誤,約定會隱性地被拒絕。
  • 約定物件有一個 then 方法,它會回傳一個約定,而以兩個回呼函式為參數:一個 success 回呼函式與一個 failure 回呼函式。
    myPromise.then(val => console.log("Success"), err => console.log("Error"));
    
  • 串連 catch 方法來捕捉約定的失敗狀況:
    myPromise.catch(e => alert(e));
    

類別

類別就像是包裝在 JavaScript 原型上的糖衣語法:

class Person {
  constructor(name) { this.name = name; }
  dance() { return true; }
}
class Ninja extends Person {
  constructor(name, level) {
    super(name);
    this.level = level;
  }
  static compare(ninja1, ninja2) {
    return ninja1.level - ninja2.level;
}

代理

代理控制了對其他物件的存取。當透過代理與一個物件進行互動時(例如讀取一個屬性或呼叫一個函式),可以執行一些自訂動作:

const p = new Proxy(target, {
  get: (target, key) => { /* 當屬性透過代理存取時呼叫 */ },
  set: (target, key, value) => { /* 當屬性透過代理設置時呼叫 */ }
});

對應表 (map)

對應表 (map) 代表鍵與值之間的對應關係:

  • new Map():建立一個新的對應表
  • 使用 set 方法來新增一筆對應,用 get 方法來取得一筆對應,用 has 方法來檢查一筆對應是否存在,用 delete 方法來移除一筆對應

集合表 (set)

集合表 (set) 是一組由唯一值所組成的集合:

  • new Set():建立一個新的集合表
  • 使用 add 方法新增一筆資料項,用 delete 方法移除一筆資料項,透過 size 屬性來取得一個集合表裡的資料項數目。

for…of

for…of 迴圈會對集合與生成器做迭代。

解構

解構可用來從物件與陣列中取出資料:

  • const {name: ninjaName} = ninja
  • const [firstNinja] = [‘Yoshi’]

模組

模組是組織成大型單元的程式碼,讓我們可以將程式分成多個群集:

export class Ninja{}; // 匯出一個項目
export default class Ninja{}; // 預設匯出
export {ninja}; // 匯出既有變數
export {ninja as samurai}; // 重新命名一個匯出

import Ninja from "Ninja.js"; // 匯入一個預設匯出
import {ninja} from "Ninja.js"; // 匯入具名匯出
import * as Ninja from "Ninja.js"; // 匯入所有具名匯出
import {ninja as iNinja} from "Ninja.js"; // 匯入時進行更名

 


參考資料:

Secrets of the JavaScript Ninja

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料