前端 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'


目录
相关文章
|
3天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
15 7
|
4天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
17 0
|
18小时前
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
7 2
|
1天前
|
JavaScript 前端开发
JavaScript 数组的函数 map/forEach/reduce/filter
JavaScript 数组的函数 map/forEach/reduce/filter
|
1天前
|
JavaScript 前端开发 索引
JS中的substr()和substring()函数有什么区别
JS中的substr()和substring()函数有什么区别
|
1天前
|
SQL 自然语言处理 JavaScript
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
ES6,作为ECMAScript 2015的简称,标志着JavaScript编程语言的一个重要进化节点。它不是渐进的变化,而是一次飞跃式的更新,为开发者带来了一系列强大的新特性与语法糖,极大提升了代码的简洁性、可读性和运行效率。从新的变量声明方式let与const,到优雅的箭头函数、模板字符串,再到让对象操作更为灵活的解构赋值与增强的对象字面量,ES6的每项改进都旨在让JavaScript适应日益复杂的应用场景,同时保持其作为脚本语言的活力与魅力。本文是深入探索这些核心特性的起点,为你铺开一条通向高效、现代JavaScript编程实践
19 0
|
3天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
18 3
|
3天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
JS-函数封装数组求和案例
JS-函数封装数组求和案例
|
3天前
|
JavaScript 前端开发 容器
JavaScript 函数
JavaScript 函数