JavaScript 最新特性實現的三大黑科技

依次執行多項異步任務

有時候，我們希望批量執行一組異步任務，但是不是 并行 ，而是依次執行，這組任務是動態的，在一個數組里，當然我們可以用 for 循環然后一個一個 await 執行，但是還有另外一種方式：

JS Bin on jsbin.com

在上面的例子里，我們定義了一個 taskReducer：

async function taskReducer(promise, action){
  let res = await promise;
  return action(res);
}

這個 reducer 的兩個參數是 promise 和 action，promise 是代表當前任務的 promise，而 action 是下一個要執行的任務。我們可以 await 當前 promise 執行當前任務，然后將執行結果傳給下一個 action 就可以了。

這樣我們可以調用：

[task1, task2, task3, ...].reduce(taskReducer, init);

不管這些任務是同步還是異步都可以被 依次執行 。需要注意的是，每一個任務的返回值將是下一個任務的輸入 promise 或者 value。

generator 與 async/await 一同使用

將上面的代碼進一步擴展，我們發現，它可以支持 generator 與 async/await 一同使用：

JS Bin on jsbin.com

在上面的例子里，我們定義了一個計時 tick 函數，我們通過 timing 來連續調用它，而 timing 是一個 generator，計時器顯然是異步函數，然而我們可以：

continuous(...timing(10))(0);

而這里的 continuous 其實就是前面的 reduce 的封裝。

使用 Proxy 實現 PHP 中的常用“魔術方法”

PHP 中有 __get 、 __set 和 __call 三個強大的魔術方法，可以實現對不存在的屬性的讀寫和方法調用。在新的 ES 標準中添加了 Proxy 類，它可以構造 Proxy 對象，用來“重載”對象的屬性和方法讀寫，從而實現類似于 PHP 的魔術方法：

JS Bin on jsbin.com

上面的例子里，我們在對象構造的時候，分別“代理”對象實例的屬性 get 和 set 方法，如果對象上已存在某個屬性或方法，代理直接返回或操作該屬性。否則，判斷對象上是否有 __get 、 __set 或者 __call 方法，有的話，做相應的處理。

這里我們使用裝飾器模式，定義了一個 Magical 裝飾器函數，讓它來處理希望使用 Magical 的類。

等到 ES Decorators 標準化了之后，我們就可以使用更加優雅的寫法了：

@magical
class Foo {
    __call(key, ...args){
        ...
    }
}

以上就是今天的所有內容。ES 的新特性為我們提供了非常強大的功能，讓我們能夠更加優雅地寫代碼。有任何問題，歡迎留言討論。

來自：https://www.h5jun.com/post/three-black-tech-in-modern-js.html