重命名
部分問題只是在于命名。引入另外一項功能并重命名另外兩項功能將有所幫助。
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） 是一個函數(shù)，它接受兩個函數(shù)并返回一個新函數(shù)，該函數(shù)接受一些輸入，使用該輸入調(diào)用第二個函數(shù)，然后使用結(jié)果調(diào)用第一個函數(shù)。這是函數(shù)的簡單數(shù)學(xué)組合。
composeMany（最初稱為 - 非常令人困惑 - userPurchase）將此組合擴(kuò)展為在函數(shù)列表上工作，從傳遞的參數(shù)開始reduce，按順序調(diào)用到目前為止管道結(jié)果上的每個函數(shù)。請注意，它的工作范圍是從列表中的最后一項到第一項。
我們用它來定義 new userPurchase，它將empty、addItemToPurchase和傳遞給。這會返回一個函數(shù)，然后該函數(shù)將按順序應(yīng)用它們，執(zhí)行相當(dāng)于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}
現(xiàn)代語法
然而，我會發(fā)現(xiàn)使用更現(xiàn)代的 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接受兩個函數(shù)并返回一個函數(shù)。在了解和理解后.reduce，應(yīng)該清楚composeMany接受一個函數(shù)列表并返回一個新函數(shù)。此版本也將此更改應(yīng)用于其余功能，可在以下代碼段中找到：
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多個函數(shù)組合為一個函數(shù)。
第一步，缺少init參數(shù) to ，因此 JS 使用數(shù)組中的第一個值作為初始值，然后開始迭代第二個值。reduce所以reduce首先composeTwo用emptyand調(diào)用addItemToPurchase，產(chǎn)生一個相當(dāng)于
(...args) => empty (addItemsToPurchase (...args))
現(xiàn)在reduce將該函數(shù) 和applyTax傳遞給compose，產(chǎn)生一個類似的函數(shù)
(...args) => ((...args2) => empty (addItemsToPurchase (...args2))) (applyTax (...args))
現(xiàn)在其結(jié)構(gòu)如下：
(x) => ((y) => f ( g (y)) (h (x))
其中x代表...args、y代表...args2、f代表empty、g代表addItems、h代表applyTax。
但右側(cè)是一個函數(shù) ( )，并對其應(yīng)用了(y) => f ( g ( y))值。h (x)這與y在主體中替換為h(x), 產(chǎn)生相同f (g (h (x)))，因此該函數(shù)相當(dāng)于 (x) => f (g (h (x)))，并且通過替換我們的原始值，最終結(jié)果為
(...args) => empty (addItemsToPurchase (applyTax ( ...args)))
請注意，在構(gòu)建函數(shù)時，現(xiàn)在不會對函數(shù)應(yīng)用值。當(dāng)調(diào)用結(jié)果函數(shù)時就會發(fā)生這種情況。記憶中，這還是類似的東西(...args) => ((...args2) => empty (addItems (...args2))) (applyTax (...args))。但這個合乎邏輯的版本展示了它是如何工作的。
當(dāng)然，我們現(xiàn)在再次這樣做addItemToCart：
(...args) => ((...args2) => empty (addItemsToPurchase (applyTax ( ...args2)))) (addItemToCart (...args))
通過同樣的應(yīng)用，我們得到等價的
(...args) => empty (addItems (applyTax ( addItemToCart (...args))))
這就是這些函數(shù)的組成的基本定義。
清理稅率
硬編碼的稅率有些奇怪。我們可以通過在調(diào)用中使用參數(shù)來解決這個問題userPurchase。這也允許我們清理該applyTax函數(shù)：
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 })
請注意，此參數(shù)的柯里化性質(zhì)讓我們選擇僅應(yīng)用此值來獲取特定于稅率的函數(shù)：
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}
教訓(xùn)
函數(shù)組合是函數(shù)式編程（FP）的重要組成部分。雖然擁有composeTwo和 等函數(shù)很有幫助composeMany，但如果它們具有易于理解的名稱，那就更好了。（請注意，這compose是第一個的完全合法的名稱。我在這里的更改只是為了使區(qū)別更清晰。）在我看來，最大的問題是作為組合函數(shù)composeMany的原始名稱。userPurchase這讓很多事情變得混亂。
現(xiàn)代 JS（箭頭函數(shù)、休息/擴(kuò)展和解構(gòu)）使代碼不僅更簡潔，而且通常更容易理解。
