重命名
部分問題只是在于命名。引入另外一項功能并重命名另外兩項功能將有所幫助。
var composeTwo = function test1(f, g) {
return function test2(...args) {
return f(g(...args));
};
};
function composeMany(...fns) {
return fns.reduce(composeTwo);
}
const userPurchase = composeMany(
empty,
addItemToPurchase,
applyTax,
addItemToCart
)
userPurchase(user1, { name: 'laptop', price: 876 });
//=> {active: true, cart: [], name: "Nady", purchase: [{name: "laptop", price: 1138.8}]}
// other functions elided
composeTwo（最初稱為compose） 是一個函數，它接受兩個函數并返回一個新函數，該函數接受一些輸入，使用該輸入調用第二個函數，然后使用結果調用第一個函數。這是函數的簡單數學組合。
composeMany（最初稱為 - 非常令人困惑 - userPurchase）將此組合擴展為在函數列表上工作，從傳遞的參數開始reduce，按順序調用到目前為止管道結果上的每個函數。請注意，它的工作范圍是從列表中的最后一項到第一項。
我們用它來定義 new userPurchase，它將empty、addItemToPurchase和傳遞給。這會返回一個函數，然后該函數將按順序應用它們，執行相當于applyTaxaddItemToCartpipelinefunction (...args) {return empty1(addItemToPurchase(applyTax(addItemToCart(...args))))}
我們可以在這段代碼中看到它的實際效果：
var user1 = {
name: 'Nady',
active: true,
cart: [],
purchase: [],
};
var composeTwo = function test1(f, g) {
return function test2(...args) {
return f(g(...args));
};
};
function composeMany (...fns) {
return fns.reduce(composeTwo);
}
const userPurchase = composeMany (
empty,
addItemToPurchase,
applyTax,
addItemToCart
)
console .log (
userPurchase(user1, { name: 'laptop', price: 876 })
)
function addItemToCart(user, item) {
return { ...user, cart: [item] };
}
function applyTax(user) {
var { cart } = user;
var taxRate = 1.3;
var updatedCart = cart.map(function updateCartItem(item) {
return { ...item, price: item.price * taxRate };
});
return { ...user, cart: updatedCart };
}
function addItemToPurchase(user) {
return { ...user, purchase: user.cart };
}
function empty(user) {
return { ...user, cart: [] };
}
.as-console-wrapper {max-height: 100% !important; top: 0}
現代語法
然而，我會發現使用更現代的 JS 語法會更干凈。這是非常等價的，但更干凈：
const composeTwo = (f, g) => (...args) =>
f (g (...args))
const composeMany = (...fns) =>
fns .reduce (composeTwo)
// .. other functions elided
const userPurchase = composeMany (
empty,
addItemToPurchase,
applyTax,
addItemToCart
)
很明顯，這里composeTwo接受兩個函數并返回一個函數。在了解和理解后.reduce，應該清楚composeMany接受一個函數列表并返回一個新函數。此版本也將此更改應用于其余功能，可在以下代碼段中找到：
var composeTwo = (f, g) => (...args) =>
f (g (...args))
const composeMany = (...fns) =>
fns .reduce (composeTwo)
const addItemToCart = (user, item) =>
({ ...user, cart: [item] })
const applyTax = (user) => {
var { cart } = user;
var taxRate = 1.3;
var updatedCart = cart .map (item => ({ ...item, price: item .price * taxRate }))
return { ...user, cart: updatedCart };
}
const addItemToPurchase = (user) =>
({ ...user, purchase: user.cart })
const empty = (user) =>
({ ...user, cart: [] })
const userPurchase = composeMany (
empty,
addItemToPurchase,
applyTax,
addItemToCart
)
const user1 = {
name: 'Nady',
active: true,
cart: [],
purchase: [],
};
console .log (
userPurchase (user1, { name: 'laptop', price: 876 })
)
.as-console-wrapper {max-height: 100% !important; top: 0}
如何reduce以及如何composeTwo一起工作
在這里，我們嘗試演示如何reduce將composeTwo多個函數組合為一個函數。
第一步，缺少init參數 to ，因此 JS 使用數組中的第一個值作為初始值，然后開始迭代第二個值。reduce所以reduce首先composeTwo用emptyand調用addItemToPurchase，產生一個相當于
(...args) => empty (addItemsToPurchase (...args))
現在reduce將該函數 和applyTax傳遞給compose，產生一個類似的函數
(...args) => ((...args2) => empty (addItemsToPurchase (...args2))) (applyTax (...args))
現在其結構如下：
(x) => ((y) => f ( g (y)) (h (x))
其中x代表...args、y代表...args2、f代表empty、g代表addItems、h代表applyTax。
但右側是一個函數 ( )，并對其應用了(y) => f ( g ( y))值。h (x)這與y在主體中替換為h(x), 產生相同f (g (h (x)))，因此該函數相當于 (x) => f (g (h (x)))，并且通過替換我們的原始值，最終結果為
(...args) => empty (addItemsToPurchase (applyTax ( ...args)))
請注意，在構建函數時，現在不會對函數應用值。當調用結果函數時就會發生這種情況。記憶中，這還是類似的東西(...args) => ((...args2) => empty (addItems (...args2))) (applyTax (...args))。但這個合乎邏輯的版本展示了它是如何工作的。
當然，我們現在再次這樣做addItemToCart：
(...args) => ((...args2) => empty (addItemsToPurchase (applyTax ( ...args2)))) (addItemToCart (...args))
通過同樣的應用，我們得到等價的
(...args) => empty (addItems (applyTax ( addItemToCart (...args))))
這就是這些函數的組成的基本定義。
清理稅率
硬編碼的稅率有些奇怪。我們可以通過在調用中使用參數來解決這個問題userPurchase。這也允許我們清理該applyTax函數：
const applyTax = (taxRate) => ({cart, ...rest}) => ({
... rest,
cart: cart .map (item => ({ ...item, price: item .price * taxRate }))
})
const userPurchase = (taxRate) => composeMany (
empty,
addItemToPurchase,
applyTax(taxRate),
addItemToCart
)
// ...
userPurchase (1.3) (user1, { name: 'laptop', price: 876 })
請注意，此參數的柯里化性質讓我們選擇僅應用此值來獲取特定于稅率的函數：
const someDistrictPurchase = userPurchase (1.12) // 12% tax
someDistrictPurchase(user, item)
我們可以在另一個片段中看到這一點：
var composeTwo = (f, g) => (...args) =>
f (g (...args))
const composeMany = (...fns) =>
fns .reduce (composeTwo)
const addItemToCart = (user, item) =>
({ ...user, cart: [item] })
const applyTax = (taxRate) => ({cart, ...rest}) => ({
... rest,
cart: cart .map (item => ({ ...item, price: item .price * taxRate }))
})
const addItemToPurchase = (user) =>
({ ...user, purchase: user.cart })
const empty = (user) =>
({ ...user, cart: [] })
const userPurchase = (taxRate) => composeMany (
empty,
addItemToPurchase,
applyTax(taxRate),
addItemToCart
)
var user1 = { name: 'Nady', active: true, cart: [], purchase: []}
console .log (
userPurchase (1.3) (user1, { name: 'laptop', price: 876 })
)
.as-console-wrapper {max-height: 100% !important; top: 0}
教訓
函數組合是函數式編程（FP）的重要組成部分。雖然擁有composeTwo和 等函數很有幫助composeMany，但如果它們具有易于理解的名稱，那就更好了。（請注意，這compose是第一個的完全合法的名稱。我在這里的更改只是為了使區別更清晰。）在我看來，最大的問題是作為組合函數composeMany的原始名稱。userPurchase這讓很多事情變得混亂。
現代 JS（箭頭函數、休息/擴展和解構）使代碼不僅更簡潔，而且通常更容易理解。
