js中的函数管道

文章类型:Javascript

发布者:hp

发布时间:2023-05-30

一:定义

1:是一种组合多个函数以便按照特定顺序处理数据的技术

2:可以帮助简化代码并提高可读性,尤其是在函数式编程中

3:说白了就是一个高阶函数,返回一个新的函数

二:形式

1:一系列函数组成,其中每个函数都接收前一个函数的输出作为输入,并将自己的输出传递给下一个函数

2:组合形成一个流水线,使得数据按照指定的顺序经过一系列的转换和处理

三:图解

四:代码

// 定义一些用于管道的函数
function addTwo(x) {
  return x + 2;
}

function multiplyByThree(x) {
  return x * 3;
}

function subtractOne(x) {
  return x - 1;
}

// 创建一个函数管道
const pipeline = [addTwo, multiplyByThree, subtractOne];

// 定义一个初始值
let result = 5;

// 在管道上依次应用函数
for (const func of pipeline) {
  result = func(result);
}

console.log(result); // 输出:20

五:总结

1:提供了一种声明式的方式来组合函数

2:使得代码易读、易理解和维护

3:复用和模块化,随时添加、删除、替换管道中的函数

六:完整示例

<script>
	/*
	实现需求
	将字符串的每一个单词(第一个单词除外)首字母大写
	将字符串中每一个单词除首字母外小写
	去掉字符串的所有空白字符
	若字符串的长度超过 15 个字符,去掉后面的字符
	*/
   
   //处理首字母大写
   function dealOne(str){
	   return str.split(' ').map((item,index)=>{
		   
		   return index==0 ? item :item[0].toUpperCase()+item.substring(1)	
		 
	   }).join(' ')
   }
   //处理超过长度
   function dealFour(str){
	   return  str.length>15 ? str.substring(0,15) :str
	  
   }
   function dealTwo(str){
	   return str.split(' ').map((item,index)=>{
		   return item[0]+ item.substring(1).toLowerCase()
	   }).join(' ')
   }
   //处理空白
   function dealNull(str){
	   return str.replace(/\s*/g,"")
   }
 
   let str="my firST nAme demo check"
   let oneResult=dealOne(str)
   let twoResult=dealTwo(oneResult)
   let threeResult=dealNull(twoResult)
   let fourResult=dealFour(threeResult)
	console.log(fourResult) //myFirstNameDemo
	
/*采用函数管道的形式*/
function deal(...fns){
	return function(data){
		let val=data
		return fns.reduce((result,fn)=>{
			return fn(result)
		},data)
		return val
	}
}
let result=deal(dealOne,dealTwo,dealNull,dealFour)
console.log(result(str)) //myFirstNameDemo

   
	
</script>