JavaScript如何修复动态传参的compose函数实现预期运行效果

你当前的代码存在三处需要调整的点：

• 调用compose时直接传入了字符串数组props，没有将数组元素映射为mapp中对应的函数，也没有展开数组作为独立参数传入，导致compose接收的参数是一个数组而非多个函数
• mapp中定义的箭头函数使用花括号包裹逻辑时没有显式声明return，执行后会返回undefined，无法拿到拼接后的结果
• compose默认从右到左执行传入的函数，需要调整映射后的函数顺序才能匹配你预期的调用效果

完整修改后代码 #

const props = ['link', 'letter'];

const mapp = {
  // 这里可以显式写return，或者去掉花括号用箭头函数隐式返回
  letter: (v) => v + 'letter',
  link: (v) => v + 'nr'
}

const compose = (...fns) =>
  fns.reduce(
    (prevFn, nextFn) =>
      (...args) =>
        nextFn(prevFn(...args)),
    (value) => value,
  );

// 核心修改：映射为对应函数、反转顺序匹配compose执行逻辑、展开为独立参数传入
const res = compose(...props.map(key => mapp[key]).reverse());

console.log(res('test')) // 输出结果为 testnrletter

效果验证 #

• 当props = ['link', 'letter']时，代码等价于const res = compose(mapp['letter'], mapp['link'])，符合预期
• 当props = ['letter']时，代码等价于const res = compose(mapp['letter'])，调用res('test')会返回testletter

内容的提问来源于stack exchange，提问作者Asking