详解JS中的compose函数和pipe函数用法

简介

函数式编程是一种编程范式，它的特点是把函数当作基本的构建块和抽象单元，强调函数调用以表达程序的控制流和对数据的处理。在函数式编程中，函数可以像数据一样被传递和操作，灵活性很高。在JavaScript领域，函数式编程受到了越来越多的重视，并且实现了一个各种常见函数式编程工具函数库——Lodash.js。

compose函数

定义

在数学中，复合函数是指把两个函数以一定的顺序组合起来形成一个新的函数。在函数式编程中，异步调用函数通常会以这种方式组合。在JavaScript中，复合函数可以用compose函数实现。compose函数是一个高阶函数，它将多个函数作为参数，并返回这些函数组合而成的新函数。

const compose = (...fns) => {
  return fns.reduce((prev, next) => (...args) => prev(next(...args)))
}

示例

下面展示一个简单的使用示例。假设有两个不同的函数，一个函数用于将字符串转化为大写字符串，另一个函数是将大写字符串转化为字符串。

const toUpperCase = str => str.toUpperCase()
const reverseString = str => str.split('').reverse().join('')

现在我们可以使用compose函数将这两个函数组合成一个新函数reverseAndFormatString：

const reverseAndFormatString = compose(
  toUpperCase,
  reverseString
)

console.log(reverseAndFormatString('hello world')) // 'DLROW OLLEH'

这个示例展示了如何使用compose函数将多个函数组合成一个新的函数。在这个示例中，toUpperCase函数和reverseString函数都被组合成一个新函数，这个新函数将输入的字符串进行了反转和大小写转换的操作。

pipe函数

定义

pipe函数和compose函数非常相似，它们都用于将多个函数组合成一个新函数。但是它们的执行顺序是不同的。在compose函数中，多个函数是从右到左依次执行的，而在pipe函数中，多个函数是从左到右依次执行的。

const pipe = (...fns) => {
  return fns.reduce((prev, next) => (...args) => next(prev(...args)))
}

示例

下面展示一个使用pipe函数的示例。假设有一个函数，用于将字符串中的数字替换为X字符，另一个函数用于将字符串转化为大写字符串。

const maskNumbers = str => str.replace(/\d+/g, 'X')
const toUpperCase = str => str.toUpperCase()

现在我们可以使用pipe函数将这两个函数组合成一个新函数maskAndFormatString：

const maskAndFormatString = pipe(
  maskNumbers,
  toUpperCase
)

console.log(maskAndFormatString('hello 123!')) // 'HELLO X!'

在这个示例中，maskNumbers函数和toUpperCase函数都被组合成一个新函数，这个新函数将字符串中的数字替换为X字符并将整个字符串转化为大写字符串。