[JS Compose] 1. Refactor imperative code to a single composed expression using Box-优快云博客

本文介绍了一种使用Box工具重构代码的方法，通过将复杂的嵌套表达式转换为更易读的形式。示例展示了如何处理字符串去除特定字符并转换为浮点数的过程，并最终应用到折扣计算上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

After understanding how Box is, then we are going to see how to use Box to refacotr code, to un-nested expression.

For example, we have code:

const moneyToFloat = str => {
  const cost = str.replace(/\$/g, '');
  return parseFloat(cost);
}

const percentToFloat = str => {
  const cost = parseFloat(str.replace(/\$/g, ''));return cost * 0.01;
}

const applyDiscount = (price, prec) => {
  const cost = moneyToFloat(price);
  const p = percentToFloat(prec);
  return cost - cost * p;
}

const result = applyDiscount('$5.00', '20%')
console.log(result) // 4

So how it would be when we using Box version:

const moneyToFloat = str => {
  const cost = str.replace(/\$/g, '');
  return parseFloat(cost);
}

const moneyToFloat = str => 
  Box(str)
  .map(s => s.replace(/\$/g, ''))
  .map(s => parseFloat(cost))

Well, nothing really impress here, we put 'str' into Box, and using map to do all the logic.

const percentToFloat = str => {
  const cost = parseFloat(str.replace(/\$/g, ''));
  return cost * 0.01;
}

const percentToFloat = str => 
  Box(str.replace(/\$/g, ''))
    .map(s => parseFloat(s))
    .map(s => s * 0.01)

This part, notice we un-nest 'parseFloat(str.replace(...))', make logic more readable by using map.

const applyDiscount = (price, prec) => {
  const cost = moneyToFloat(price);
  const p = percentToFloat(prec);
  return cost - cost * p;
}

const applyDiscount = (price, prec) =>
  moneyToFloat(price)
    .fold(cost => percentToFloat(prec)
         .fold(p => cost - cost * p))

Notice here, because 'moneyToFloat' return a Box, so we are able to chain map on that.

And 'cost', we can use clouse to remember 'cost', and chain 'fold' on precentToFloat. The reason we use 'fold' instead of 'map', is 'fold' we can get value out of Box.

const Box = x =>
({
  map: f => Box(f(x)),
  fold: f => f(x),
  toString: () => `Box(${x})`
})

const moneyToFloat = str => 
  Box(str)
  .map(s => s.replace(/\$/g, ''))
  .map(s => parseFloat(cost));

const percentToFloat = str => 
  Box(str.replace(/\$/g, ''))
    .map(s => parseFloat(s))
    .map(s => s * 0.01);

const applyDiscount = (price, prec) =>
  moneyToFloat(price)
    .fold(cost => percentToFloat(prec)
         .fold(p => cost - cost * p))

const result = applyDiscount('$5.00', '20%')
console.log(result) // 4