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