当前位置: 首页 > Web前端 > HTML5

vue、react函数式编程

时间:2023-04-05 19:53:05 HTML5

函数式编程JavaScript语言从诞生之日起就带有函数式编程的烙印。它将函数视为一种独立的数据类型,与其他数据类型处于同等地位。在JavaScript语言中,您可以使用面向对象编程,也可以使用函数式编程。有人甚至说JavaScript是第一个被广泛采用的函数式编程语言。ES6的各种新特性让函数式编程更加方便和强大。本章介绍ES6是如何进行函数式编程的。CurryingCurrying是指将一个多参数函数拆分成一系列函数,每个拆分函数只接受一个参数(一元)。functionadd(a,b){returna+b;}add(1,1)//2复制代码在上面的代码中,函数add接受两个参数a和b。柯里化就是把上面的函数拆成两个函数,每个函数只接受一个参数。functionadd(a){returnfunction(b){returna+b;}}//或者使用箭头函数写constadd=x=>y=>x+y;constf=add(1);f(1)//2复制代码上面的代码中,函数add只接受一个参数a,返回一个函数f。函数f也只接受一个参数b。函数组合函数组合(functioncomposition)是指将多个函数组合成一个函数。constcompose=f=>g=>x=>f(g(x));常量f=组合(x=>x*4)(x=>x+3);f(2)//20复制代码上面代码中,compose是一个函数合成器,用于将两个函数合成一个函数。可以发现柯里化与函数组合密切相关。前者用于将一个功能拆分为多个功能,后者用于将多个功能合并为一个功能。参数倒置参数倒置(flip)是指改变函数前两个参数的顺序。vardivide=(a,b)=>a/b;var翻转=f。翻转(划分);flip(10,5)//0.5flip(1,10)//10varthree=(a,b,c)=>[a,b,c];varflip=f.flip(three);flip(1,2,3);//=>[2,1,3]复制上面代码中的代码,前端训练if按照正常的参数顺序,10除以5等于2。但是,将参数取反后得到的新函数,结果是5除以10,结果是0.5。如果原始函数有3个参数,则只有前两个参数被反转。参数反转的代码非常简单。让f={};f.flip=fn=>(a,b,...args)=>fn(b,a,...args.reverse());copycodeexecutionboundaryexecutionboundary(until)指的是函数执行到条件满足为止。letcondition=x=>x>100;letinc=x=>x+1;letuntil=f.until(condition,inc);until(0)//101condition=x=>x===5;until=f.until(condition,inc);until(3)//5上面代码中,第一段的条件是执行到x大于100,所以当x的初值为0时,会一直执行到101。第二段的条件一直执行到等于5,所以x的最终值为5。执行边界的实现如下。让f={};f.until=(condition,f)=>(...args)=>{varr=f.apply(null,args);返回条件(r)?r:f.until(条件,f)(r);};上面代码的关键是满足条件就返回结果,否则继续递归执行。队列操作队列(列表)操作包括以下内容。head:获取队列的第一个非空成员。last:取出有限队列的最后一个非空成员。tail:取出除“队头”以外的其他非空成员。init:取出除“queuetail”以外的其他非空成员。下面是一个例子。f.head(5,27,3,1)//5f.last(5,27,3,1)//1f.tail(5,27,3,1)//[27,3,1]f.init(5,27,3,1)//[5,27,3]复制代码这些方法实现如下。让f={};f.head=(...xs)=>xs[0];f.last=(...xs)=>xs.slice(-1);f.tail=(...xs)=>Array.prototype.slice.call(xs,1);f.init=(...xs)=>xs.slice(0,-1);merge操作分为concat和concatMap两种。前者是将多个数组组合成一个数组,后者是先对参数进行处理,再将处理结果组合成一个数组。F。concat([5],[27],[3])//[5,27,3]f.concatMap(x=>'hi'+x,1,[[2]],3)//['hi1','hi2','hi3']CopyCode这两个方法的实现代码如下如下。让f={};f.concat=(...xs)=>xs.reduce((a,b)=>a.concat(b));f.concatMap=(f,...xs)=>f.concat(xs.map(f));复制代码配对操作配对操作分为zip和zipWith两种方法。zip操作将两个队列的成员一一配对,组成一个新的队列。如果两个队列的长度不相等,则较长队列的额外成员将被忽略。zipWith操作的第一个参数是一个函数,然后后面的队列成员一个一个配对,输入这个函数,返回值组成一个新的队列。下面是一个例子。让a=[0,1,2];让b=[3,4,5];让c=[6,7,8];f.zip(a,b)//[[0,3],[1,4],[2,5]]f.zipWith((a,b)=>a+b,a,b,c)//[9,12,15]copycode上面的代码中,zipWith方法的第一个参数是一个求和函数,它将后面三个队列的成员一一相加。这两个方法的实现如下。让f={};f.zip=(...xs)=>{让r=[];让nple=[];让length=Math.min.apply(null,xs.map(x=>x.length));for(vari=0;inple.push(x[i]));r.push(nple);nple=[];}returnr;};f.zipWith=(op,...xs)=>f.zip.apply(null,xs).map((x)=>x.reduce(op));