JavaScript函数式编程示例分析

函数式编程是一种编程范式,将整个程序都由函数调用以及函数组合构成。可以看成一条流水线,数据可以不断地从一个函数的输出流入另一个函数的输入,最后输出结果

函数式编程

1.函数式编程指的是函数的映射关系

2.vue3、react16.8的函数组件推动了前端函数编程

3.必须是纯函数(幂等):同样的输入有同样的输出

//非纯函数 function getFirst1(arr){ return arr.splice(0,1); }; //纯函数 function getFirst2(arr){ return arr.slice(0,1); }; const arr = [1,2,3,4,5]; getFirst1(arr);//[1] getFirst1(arr);//[2] getFirst2(arr);//[1] getFirst1(arr);//[1]

再来看一组纯函数和非纯函数的例子

//非存函数 const avaliableVersion = 16.8; function checkVersion(version){ return version >= avaliableVersion; }; //纯函数 function checkVersion(version){ return version >= 16.8; };

由于前面的函数依赖了外部的(环境)变量,当avaliableVersion这个外部变量发生变化的时候输出结果也会变化,将avaliableVersion在函数内部固定写死就使得这个函数成为纯函数了,但是这样有一个致命的弊端就是写出来的代码不够灵活没有拓展性,使用函数柯理化能有效解决这个问题。

函数柯理化(Curring)

柯理化能做到函数的预加载

//普通函数 const add = (x,y)=>x+y; //柯理化后 const curringAdd = x => (y=>x+y); const add2 = curringAdd(2); const add3 = curringAdd(3); console.log(add2(1),add3(1));//3,4

函数柯理化也有一个弊端就是函数层层嵌套,像包心菜一样,于是又出现了compose(组合)用来解决这个问题。

Compose

const compose = (f1,f2)=>(x=>f1(f2(x))); const add2 = x=> x+2; const mult5 = x=>x*5; const.log(compose(mult5,add2)(2));

场景案例

如何在不知道数组长度的情况下获取数组的最后一个元素? 这道题的其中一个解题方法是先把数组reverse再取值

  //常规写法 function getFirst(arr){ return arr.reverse()[0]; }; //使用compose 1.倒置数组 2.取数组的第一项 const reverse = arr => arr.reverse(); const getFirstFromArray = arr => arr[0]; console.log(compose(getFirstFromArray, reverse)([1, 2, 3, 4, 5]));//5,4,3,2,1