Javascript简化自撰写函数

问题描述

我在网上课程中遇到问题，试图向自己解释这一问题。我了解“组合”函数/想法以一种更简单的格式执行的操作，但是当涉及对工厂的函数应用reduce并在每个函数上运行compose时，这似乎让我感到困惑。希望有经验的人可以向我更清楚地解释“ return fns.reduce（compose）”行中发生了什么，以及它如何一次实现这些功能？一旦在底部调用该函数，每个函数是否依次是“累加器”和“电流”？

const user = {
    user: 'Jennnifer',active: true,cart: [],purchases: []
}


const compose = (f,g) => (...args) => f(g(...args));

function purchaseItem(...fns){
    return fns.reduce(compose)
    // return Object.assign({},user,{purchases: item})
}

//Receives a user,and the item
function addItemToCart(user,item){
    //Create a variable and concat the empty cart of the user object to add the item to the cart key.
    const updateCart = user.cart.concat(item);
    return Object.assign({},{ cart: updateCart });
}

function applyTaxToItems(user){
    const { cart } = user;
    const taxRate = 1.3;
    const updatedCart = cart.map(item => {
        return {
            name: item.name,price: item.price * taxRate
        }
    })

    return Object.assign({},{ cart: updatedCart})
}

function buyItem(user){
    return user
}

function emptyCart(user){
    return user
}

//Invoke Function:

console.log(purchaseItem
    (
        emptyCart,buyItem,applyTaxToItems,addItemToCart
    )(user,{ name: 'Laptop',price: 200})
)

解决方法

您的函数名称有点偏离

基本上，您的compose函数仅由2个函数组成

您的purchaseItem函数实际上没有购买任何东西。如果仔细观察，您会发现它只返回N个函数的组合

基本上，在reduce的每一步中，您都将current与accumulator组合在一起-所有以前组成的功能

如果它是第0步（没有before），那么它将组成前两个函数并将其放入accumulator

更好地重命名：

compose-> compose2

purchaseItem-> compose

然后在最后一个console.log（）中执行

purchaseItem
    (
        emptyCart,buyItem,applyTaxToItems,addItemToCart
    )(user,{ name: 'Laptop',price: 200})

为了更好地理解，您可以这样写

// composition of 2 functions
const compose2 = (f,g) => (...args) => f(g(...args))

// composition of N functions
const compose(...fns) => fns.reduce(compose2)

// applying composition to 4 functions
const purchaseItem = compose(
        emptyCart,addItemToCart
)

// calling 
purchaseItem(user,price: 200})

,

上面的答案已经足够了，但是为了更合乎逻辑地理解 reduce 函数的 compose 方法。

// reduce return : (...args) => prev(curr(...args));
// f'     : (...args) => f(g(...args));
// f''    : (...args) => f'(h(...args));    (...args) => f(g(h(...args))) 
// f'''   : (...args) => f''(j(...args));   (...args) => f(g(h(j(...args)))) 
// f''''  : (...args) => f'''(k(...args));  (...args) => f(g(h(j(k(...args)))))

function compose(f,g) {
  return function(...args) {
    return f(g(...args))
  }
}

function composeAll(...fns) {
  return fns.reduce(compose) // return function is (...args) => f(g(h(j(k(...args)))))
}

function f(x) {return x+'1'}
function g(x) {return x+'2'}
function h(x) {return x+'3'}
function j(x) {return x+'4'}
function k(x) {return x+'5'}

let result = composeAll(k,j,h,g,f)('cho');
console.log(result); // cho12345

前五行注释解释了 reduce 函数的 composeAll 返回值会发生什么。

f'' : (...args) => f'(h(...args)); (...args) => f(g(h(...args)))

表示(...args) => f'(h(...args))与(...args) => f(g(h(...args)))相同

我将这些表示为 f'

您需要区分reduce回调函数，reduce回调函数中的f,g（第9行）与composeAll的{​​{1}}和f参数的值不同（第 14 行）