Method chaining 方法鏈介紹 - 以 JavaScript 為例

大家應該都有使用過方法鏈(Method chaining)，只是不知道這樣的寫法叫做方法鏈

依據維基百科的說明:
方法鏈是指每個方法都回傳一個物件，允許在單個陳述式(statement)中將方法鏈接在一起，而不需要建立多個只使用一次的變數儲存結果。

先看看下面的範例:

    
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let result = array
    .filter(x => x > 5) // 篩選，保留大於 5 的成員 // 6, 7, 8, 9
    .sort((a, b) => b - a); // 排序，由大到小 // 9, 8, 7, 6

console.log(result); // 9, 8, 7, 6
    

在上面的程式碼中，我們在 array 呼叫了 filter 方法，又直接在同個陳述式(statement)中呼叫 sort 方法，這樣的撰寫方式就是方法鏈。

實作範例

假設我們要將特定的金額以最小數量的鈔票和硬幣呈現:

    
class Money {
    /**
     * 建構子
     * @param {number} money 金錢總數
     */
    constructor(total) {
        this.total = total;
    }

    /**
     * 增加鈔票或硬幣面額
     * @param money 鈔票或硬幣面額
     */
    addUnit(money) {
        let count = Math.floor(this.total / money);
        this.total -= count * money;
        console.log(`${money}元: ${count}張(個)`);
        return this;
    }
}

new Money(999)
    .addUnit(100)
    .addUnit(50)
    .addUnit(10)
    .addUnit(5)
    .addUnit(1);
    

假設要將輸出結果儲存到陣列中只要稍做修改即可:

    
class Money {
    /**
     * 建構子
     * @param {number} money 金錢總數
     */
    constructor(total) {
        this.total = total;
        this.result = [];
    }

    /**
     * 增加鈔票或硬幣面額
     * @param money 鈔票或硬幣面額
     */
    addUnit(money) {
        let count = Math.floor(this.total / money);
        this.total -= count * money;
        this.result.push({money, count});
        console.log(`${money}元: ${count}張(個)`);
        return this;
    }
}

let result = new Money(999)
    .addUnit(100)
    .addUnit(50)
    .addUnit(10)
    .addUnit(5)
    .addUnit(1);

console.log(result.result);
    

參考資料：
Wiki - Method chaining