将带有逻辑和用户界面的函数转换为高阶函数答案

【问题标题】：Converting function with logic and ui into higher order functions将带有逻辑和用户界面的函数转换为高阶函数
【发布时间】：2020-12-20 01:14:14
【问题描述】：

我正在努力提高我的 JavaScript 技能。我正在学习可组合性和功能模式，但我完全迷失了。

我有两个函数：一个映射数组，另一个从前一个函数中调用以生成标记。

const names = ['peter', 'paul', 'patrice']

const namesMarkup = name => {
  return `<p>${name}</p>`
}

const showNames = listOfNames => {
  return listOfNames.map(el => {
    return namesMarkup(el)
  })
}

showNames(names)

我一直在阅读有关 HOF 的文章，从技术上讲，它们是将函数作为参数和/或返回函数的函数。我怎样才能将这些函数组合成一个 HOF？

我浏览了一些基本示例，例如

const square = num => num * num

const plus10 = (num, callback) => {
  return callback(num) + 10
}

console.log(addTwo(7, square))

但是我无法围绕前面的示例和使用列表来思考问题。我会很感激帮助，因为我研究得越多，我就越困惑。

【问题讨论】：

您现有的代码对我来说看起来非常好（尽管您也可以考虑隐式返回）
你只是传递一个函数并调用它，它最终会返回一个结果，然后你对这个结果进行一些额外的计算，HOC 背后没有太多的科学
我会简化为const showNames = listOfNames => listOfNames.map(namesMarkup);。如果你想在这里实现更高阶的东西，你只需在 map 周围创建一个包装器，这已经是一个更高阶的方法。
我的意思是，您可以使用 curried map 包装器来使用部分应用程序 const showNames = map(namesMarkup);，但您可以过度使用。此外，imo showNames 最终缺少像 .join('\n') 这样的东西，这会使咖喱徒劳无功。

标签： javascript functional-programming higher-order-functions

【解决方案1】：

您的错误是假设showNames 是一个数组。永远不要这样做。始终实现函数的最简单版本。在 FP 数组中是一种计算效果。不要默认实现这么有效的功能：

const nameMarkup = name => {
  return `<p>${name}</p>`;
}

const nameMarkup2 = name => {
  return `<p>${name.toUpperCase()}!</p>`;
}

const showName = f => name => {
  const r = f(name);
  /* do something useful with r */
  return r;
}

const names = ['peter', 'paul', 'patrice']

console.log(
  showName(nameMarkup) ("peter"));

// lift the HOF if you want to process a non-deterministic number of names:

console.log(
  names.map(showName(nameMarkup2)));

现在交换标记只是意味着传递另一个函数参数。您的 showName 更通用，因为 HOF 允许您传递部分功能。

如果我们放弃数组要求，您的 showNames 将不再做任何有用的事情。不过，它仍然说明了基本思想。

【讨论】：