前端 JS 经典:函数管道

简介: 前端 JS 经典:函数管道

1. 定义

什么是函数管道,就是将多个单参函数组合起来形成一个新的函数,在函数管道中,前一个函数的输出,是后一个函数的输入。

2. 例子

现在有一个需求,需要去除字符串所有空白字符,并将每个单词首字母大写。现在有小伙伴有疑问了,为什么不可以重新编写一个函数,专门用来做这件事叻,要把功能拆出来,再拼起来,这是为了复用,如果有需求,只是需要首字母大写呢。

// 将字符串中每一个单词首字母大写
const everyFirstLetterUp = (str) => {
  return str.toLowerCase().replace(/( |^|,)[a-z]/g, (L) => L.toUpperCase());
};
 
// 去除字符串中所有空白字符
const removeEmpty = (str) => {
  return str.replace(/\s+/g, "");
};

当我们不使用函数管道实现功能时,这就有几个问题,我们必须按顺序,反复调用这些函数,难以维护,容易出错。如下:

let str = "    yqcoder is good";
str = everyFirstLetterUp(str);
str = removeEmpty(str);
console.log(str); // 'YqcoderIsGood'

当我们使用函数管道实现时,好处是我们把函数执行的顺序定下来了,并且便于我们维护,并且我们没有重新去写一个函数,只是利用之前的函数来组合成为了一个新的函数。如下:

let str = "    yqcoder is good";
// 管道函数
const pipe = function () {
  let args = Array.from(arguments);
  return function (val) {
    return args.reduce((result, func) => {
      return func(result);
    }, val);
  };
};
 
// 组合函数
const smallCamel = pipe(everyFirstLetterUp, removeEmpty);
smallCamel(str); // 'YqcoderIsGood'


目录
相关文章
|
1月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
80 19
|
3月前
|
JavaScript 前端开发 API
|
3月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
123 8
|
3月前
|
JavaScript 前端开发 容器
|
3月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
3月前
|
JavaScript 前端开发
|
3月前
|
存储 JavaScript 前端开发
|
3月前
|
移动开发 JavaScript 前端开发
|
3月前
|
存储 JavaScript 前端开发
|
3月前
|
JavaScript 前端开发

热门文章

最新文章