在 JavaScript ES6 標準規範中，其實還有很多的新擴展、新語法、新 API 都很有特色，只是這些就比較不常用了，大部分的功能也都能使用舊方法去實現，至少這些新事物能幫助簡化程序就是一大進步了。

本篇將會簡單地介紹 ES6 其他較實用常見的 API 與擴展，主要知道基本內容就好，並不會深入探討。

JavaScript ES6 其他常見的新 API

Promise 物件

Set 物件

  • 這是新的資料結構物件，Set 類似於陣列，但內容成員不會有重複的值
  • 放入有重複的值將會被覆蓋，內容成員總數不變
  • 與 Map 物件一樣都有類似的操作方法與迭代方法
1
2
3
4
5
6
7
8
9
10
let set = new Set();

// 可以使用 add() 方法設置資料內容
set.add(10);
set.add(10);
set.add('text');
set.add({sayHi: 'Hi'});

console.log(map);
// Set(4) {10, "text", {sayHi: "Hi"}}

Proxy 物件

  • 概念為重新定義 JavaScript 中某些操作的原始行為，攔截那些操作方法去改變它
  • 應用範例 :
    • 利用 Proxy 可以讓 “讀取 Object 的屬性值“ 轉變為 “執行某個函數“，從而實現屬性的方法操作，不需要建立函數
    • 利用 Proxy 可以讓 “設定 Object 的屬性值“ 作為 “數據綁定“，發生變化時就會自動更新 DOM 與瀏覽器上的渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 這是基本語法
var proxy = new Proxy(target, handler);

// 此用來攔截變數的 "物件內容"，改變它的原始行為
var proxy = new Proxy({}, {
    get: function(target, propKey, receiver) {
        return 'getting';
    },
    set: function(target, propKey, value, receiver) {
        console.log('setting');
    }
});

console.log(proxy.test);  // 'getting'
console.log(proxy.other); // 'getting'

// 以下都會執行 console.log('setting');
proxy.abc = 10;
proxy[10] = 'test';

Reflect 物件

  • 概念也是攔截 JavaScript 中某些操作方法去改變它
  • Reflect 可以在 Proxy 的內部方法調用，確保該操作方法會執行原始的行為，然後再執行 Proxy 內定義的額外的功能
  • 另外 Reflect 物件的其他用途
    • 可以用來取代 Object 原型中部分的操作方法，改善了一些物件原始結構的問題

Generator 生成器函數

  • 它有點類似一般的函數，使用關鍵詞function*
  • Generator 的運作概念就像是一個狀態機 (state machine)，會一直改變內部的不同狀態
  • 取得的 Generator 物件，起始狀態會先暫停什麼都不做，而每次執行next()方法，就會繼續執行函數，直到遇到下一個 yield 關鍵字，又會暫停函數的執行，而每一次暫停時會 yiled (產出)一個當前狀態值
  • yiled 會返回一個{value: anyType, done: boolean}結構的物件
  • Generator 產生的物件也有 Iterator 的性質，所以可以用for...of迭代迴圈去取得 yield 返回的 value 值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function* gen() {
    yield 1;
    yield 2;
}

var g = gen();

// 第一次執行 next() - 停在 yield 1
// 返回 Object {value: 1, done: false}
g.next();

// 第二次執行 next() - 停在 yield 2
// 返回 Object {value: 2, done: false}
g.next();

// 第三次執行 next() - 沒有 yield 將會結束
// 返回 Object {value: undefined, done: true}
g.next();

JavaScript ES6 其他較實用的擴展

  • 字串 (Sting) 可使用 Unicode 表示法
1
2
// Unicode 表示法
console.log("\u{41}\u{42}\u{43}"); // ABC
  • 數值 (Number) 可以使用二進制和八進製表示法
    • 前綴須加上0b(或0B)、0o(或0O)表示
  • 數值 (Number) 可以使用**關鍵字當作指數運算
1
2
3
4
5
6
// 二進制和八進製表示法
console.log(0b1100011); // 99
console.log(0o143); // 99

// 指數運算
console.log(2**6); // 64

JavaScript ES6 其他新功能 - 參考網址