快捷導(dǎo)航

JavaScript函數(shù)式編程示例分析

更新時(shí)間：2022年10月18日 08:33:14 作者：愛思考的豬

函數(shù)式編程是一種編程范式,將整個(gè)程序都由函數(shù)調(diào)用以及函數(shù)組合構(gòu)成。可以看成一條流水線,數(shù)據(jù)可以不斷地從一個(gè)函數(shù)的輸出流入另一個(gè)函數(shù)的輸入,最后輸出結(jié)果

函數(shù)式編程

1.函數(shù)式編程指的是函數(shù)的映射關(guān)系

2.vue3、react16.8的函數(shù)組件推動(dòng)了前端函數(shù)編程

3.必須是純函數(shù)(冪等):同樣的輸入有同樣的輸出

//非純函數(shù)
function getFirst1(arr){
  return arr.splice(0,1);
};
//純函數(shù)
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]

再來看一組純函數(shù)和非純函數(shù)的例子

//非存函數(shù)
const avaliableVersion = 16.8;
function checkVersion(version){
 return version >= avaliableVersion;
};
//純函數(shù)
function checkVersion(version){
 return version >= 16.8;
};

由于前面的函數(shù)依賴了外部的(環(huán)境)變量,當(dāng)avaliableVersion這個(gè)外部變量發(fā)生變化的時(shí)候輸出結(jié)果也會(huì)變化,將avaliableVersion在函數(shù)內(nèi)部固定寫死就使得這個(gè)函數(shù)成為純函數(shù)了,但是這樣有一個(gè)致命的弊端就是寫出來的代碼不夠靈活沒有拓展性,使用函數(shù)柯理化能有效解決這個(gè)問題。

函數(shù)柯理化(Curring)

柯理化能做到函數(shù)的預(yù)加載

//普通函數(shù)
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

函數(shù)柯理化也有一個(gè)弊端就是函數(shù)層層嵌套,像包心菜一樣,于是又出現(xiàn)了compose(組合)用來解決這個(gè)問題。

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));

場(chǎng)景案例

如何在不知道數(shù)組長度的情況下獲取數(shù)組的最后一個(gè)元素? 這道題的其中一個(gè)解題方法是先把數(shù)組reverse再取值

  //常規(guī)寫法
  function getFirst(arr){
      return arr.reverse()[0];
    };
  //使用compose 1.倒置數(shù)組 2.取數(shù)組的第一項(xiàng)
  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