Grokking Simplicity FP CH14

[hangineer]

《簡約的軟體開發思維：用 Functional Programming 重構程式》CH14

• 主講者：Ashley
• 筆記工：Hannah
• 簡報連結

---

目錄

• [Ch14 處理巢狀資料的函數式工具)(#ch14-處理巢狀資料的函數式工具)
  • 用高階函式處理物件內的值
  • 重構 3 : 以 update() 取代 『取得、修改、設定』
  • update() 能處理巢狀資料嗎？
  • 實作成普適化的 updateOption()
  • 實作兩層巢狀結構的 update2()
  • 函式 incrementSizeByName() 的 4 種實作方法
  • 實作三層巢狀結構的 update3()
  • 什麼是遞迴
  • 遇到深度巢狀資料時的設計考量
    • 為巢狀資料建立抽象屏障
  • 總結高階函式的應用
  • 小字典
  • 問題與討論

Ch14. 處理巢狀資料的函數式工具

用高階函式處理物件內的值

以下為一段有程式碼異味的程式

function incrementQuantity(item) {
    var quantity = item['quantity'];
    var newQuantity = quantity + 1;
    var newItem = objectSet(item, 'quantity', newQuantity);
    return newItem;
}

將屬性名稱轉為顯性

function incrementField(item, field) {
    var value = item[field];
    var newValue = value + 1;
    var newItem = objectSet(item, field, newValue);
    return newItem;
}

假設新增了另一段程式，重複的程式碼又出現了

function decrementField(item, field) {
    var value = item[field];
    var newValue = value - 1;
    var newItem = objectSet(item, field, newValue);
    return newItem;
}

解法：寫⼀個能更新（update）物件內屬性值的函數式工具，進而消除程式碼重複

function update(object, key, modify) {
    var value   = object[key]; //取得屬性值
    var newValue = modify(value); //修改屬性值
    var newObject = objectSet(object, key, newValue); //設定新物件
    return newObject;
}

重構 3 : 以 update() 取代 『取得、修改、設定』

步驟

1. 辨識「取得、修改、設定』程式段落
2. 利⽤ update() 取代以上三個段落，其中『修改』的部分為回呼

function halveField(item, field) {
    var value = item[field]; // 取得
    var newValue = value / 2; // 修改
    var newItem = objectSet(item, field, newValue); // 設定
    return newItem;
}

function halveField(item, field) {
    return update(item, field, function(value) {
        return value / 2; //將修改操作以回呼形式傳入 update()
    });
}

---

update() 能處理巢狀資料嗎？

-> 能，讓我們來看看以下範例：

var shirt = {
    name: "shirt",
    price: 13,
    options: { // shirt 物件中還有 options 物件，形成巢狀結構
        color: "blue",
        size: 3 // 必須存取到options 物件裡面的屬性值
    }
};
 

function incrementSize(item) {
    var options = item.options; //取得
    var size = options.size; //取得
    var newSize = size + 1; // 修改
    var newOptions = objectSet(options, 'size', newSize); // 設定
    var newItem = objectSet(item, 'options', newOptions); // 設定
    return newItem;
}

以 update()重構 incrementSize()

function incrementSize(item) {
    return update(item, 'options', function(options) {
        return update(options, 'size', increment); // 可以看到，函式名稱中又出現了隱性引數，而且還出現了兩個
    });
}

由於 size 屬性值位於兩層巢狀結構內（經過兩個物件才能取得該值），故需呼叫兩次 update()
資料的巢狀深度有多少，update() 的巢狀呼叫次數就有多少

---

實作成普適化的 updateOption()

// 1.包含隱性屬性名稱
function incrementSize(item) {
    return update(item, 'options', function(options) {
        return update(options, 'size', increment);
    });
}

// 2.改為顯性屬性名稱
function incrementOption(item, option) { 
    return update(item, 'options', function(options) {
        return update(options, option, increment);
    });
}

// 3.包含隱性修改操作
function incrementOption(item, option) {
    return update(item, 'options', function(options) {
        return update(options, option, increment);
    });
}

// 4.改為隱性修改操作
function updateOption(item, option, modify) {
    return update(item, 'options', function(options) { // 此處的 option 隱藏在函式名稱中，需改成顯性引數
        return update(options, option, modify);
    });
}

---

實作兩層巢狀結構的 update2()

function update2(object, key1, key2, modify) { // 函式名稱中的2表示用於兩層巢狀結構
    return update(object, key1, function(value1) {
        return update(value1, key2, modify);
    });
}

將 incrementSize() 改以 update2() 實作

// before
function incrementSize(item) {
    var options = item.options;
    var size = options.size;
    var newSize = size + 1;
    var newOptions = objectSet(options, 'size', newSize);
    var newItem = objectSet(item, 'options', newOptions);
    return newItem;
}

// after
function incrementSize(item) {
    return update2(item, 'options', 'size', function(size) {
        return size + 1;
    });
}

---

函式 incrementSizeByName() 的 4 種實作方法

• 方法1：使⽤ update() 和 incrementSize()
• 方法2：使⽤ update() 和 update2()
• 方法3：只⽤ update()
• 方法4：⾃⾏實作所有『 取得 、 修改 、 設定 』步驟

---

實作三層巢狀結構的 update3()

function update3(object, key1, key2, key3, modify) {
    return update(object, key1, function(object2) {
        return update2(object2, key2, modify);
    });
}

若是 update4()、update5() 會是怎麼樣？

function update4(object, k1, k2, k3, k4, modify) { 
    return update(object, k1, function(object2) { 
        return update3(object2, k2, k3, k4, modify); 
    });  
}

function update5(object, k1, k2, k3, k4, k5, modify) {
    return update(object, k1, function(object2) {
        return update4(object2, k2, k3, k4, k5, modify);
    });
}

觀察發現程式再度飄出『函式名稱中的程式碼異味』：函式名稱中的數字總是和鍵的數量相同！！！
將隱性引數轉為顯性

function update3(object, key1, key2, key3, modify) {
    return update(object, key1, function(value1) {
        return update2(value1, key2, key3, modify);
    });
}

加入⼀個代表『 巢狀深度 』 的 depth 參數

function updateX(object, depth, key1, key2, key3, modify) {
    return update(object, key1, function(value1) {
        return updateX(value1, depth-1, key2, key3, modify);
    });
}

以上改寫如何確保 depth 的值和鍵的數量應該要相同呢？
-> 將所有鍵按順序存成一個陣列，就不需設額外的 depth 參數了，該陣列的長度（即：元素數量）就是『巢狀深度』

function updateX(object, keys, modify) {  // keys 包含所有鍵的陣列
    var key1 = keys[0];                                
    var restOfKeys = drop_first(keys);        // 在遞迴呼叫之前，先把第一個鍵從 keys 陣列中刪除
    return update(object, key1, function(value1) {
        return updateX(value1, restOfKeys, modify);
    });
}

若是 update0()的話...

function update0(value, modify) {
    return modify(value);
}

只需多加一個判斷式，若 keys 陣列的長度為零 (= 沒有鍵），則直接呼叫 modify()，否則遞迴呼叫 updateX()。

function updateX(object, keys, modify) {
    if(keys.length === 0)
      return modify(object);
    var key1 = keys[0];
    var restOfKeys = drop_first(keys);
    return update(object, key1, function(value1) {
        return updateX(value1, restOfKeys, modify);
    });
}

=> 結論：所有遞迴呼叫皆應收斂到某種不涉及遞迴呼叫的情況，稱為基本條件(base case)

---

什麼是遞迴

遞迴函式 (recursive function) 就是在其定義中呼叫自己的函式，這種自己呼叫自己的做法叫「遞迴呼叫 recursive call」

為何要用？

1. 遞迴寫法特別適合對付巢狀資料
2. 利用 JS 的堆疊功能，省去手動 push 和 pop 的麻煩

可能會造成什麼問題？

1. 遞迴可能會造成無限迴圈，使用上要小心
2. 函式呼叫會佔用記憶體空間，導致堆疊空間不足

安全的遞迴要具備什麼？

1. 一定要有基本條件(base case) 當做遞迴結束的終點，否則會一直遞迴下去
2. 遞迴函式中至少要包含一次遞迴條件(recursive step)，就是呼叫自己的部分
3. 確定函式呼叫有朝著基本條件前進

---

遇到深度巢狀資料時的設計考量

nestedUpdate() 需要傳入一長串鍵作為路徑，但我們很難記得這些鍵到底指的是什麼

function nestedUpdate(object, keys, modify) {
    if(keys.length === 0) 
      return modify(object); 
    var key1 = keys[0];
    var restOfKeys = drop_first(keys);// 每經過一次遞迴呼叫，restOfKeys 就會少一個元素
      return update(object, key1, function(value1) {
      return nestedUpdate(value1, restOfKeys, modify);//遞迴呼叫
    });
}

httpGet("http://my-blog.com/api/category/blog", function(blogCategory) {
    renderCategory(nestedUpdate(blogCategory, ['posts', '12', 'author', 'name'], capitalize));
});

解法：為巢狀資料建立抽象屏障

---

抽象屏障（abstraction barrier）:

抽象屏障可以隱藏實作細節，使用時，不需要了解函式的底層實作

寫⼀個能根據給定貼⽂編號（ ID ）修改部落格貼⽂（ post ）的函式（貼⽂儲存在 category 巢狀物件的『posts』鍵下）

function updatePostById(category, id, modifyPost) { // 不需知道 posts 和 category 的關係也能用
    return nestedUpdate(category, ['posts', id], modifyPost); // 位於屏障上層的程式不必知道 category 的資料結構
}

// 變更作者資訊（user，存放於『author』鍵下）
function updateAuthor(post, modifyUser) {
    return update(post, 'author', modifyUser);
}

// 將作者名字改為大寫

function capitalizeName(user) {
    return update(user, 'name', capitalize); // capitalize 是一個 modify function
}

結合以上，就可以得到：

updatePostById(blogCategory, '12', function(post) {
    return updateAuthor(post, capitalizeUserName);
});

使用抽象屏障優點

• 函式的名稱簡單易懂
• 不知道鍵的名稱也能夠順利修改目標屬性

---

總結高階函式的應用

1. 在走訪陣列時取代 for loop
2. 有效處理巢狀資料
3. 套用寫入時複製
4. 將 try/catch 敘述標準化

---

小字典

路徑 (path): 用來定位巢狀物件中的 key 的序列，如下的 'options', 'size'，每個鍵對應到一個巢狀層

function incrementSize(item) {
    return update2(item, 'options', 'size', function(size) {
        return size + 1;
 });

---

問題與討論

前端開發中，何時會用到遞迴？

• 處理複雜的 api response
• 實作深拷貝