函数式编程~懂？

Posted 2021-04-09 韩师剑七

    “ 函数式编程是一种强调以函数使用为主的软件开发风格，也是一种范式。”

函数式编程的含义

• 函数式编程一种强调以函数使用为主的软件开发风格，也是一种范式。

• 某些函数式编程语言Haskell/lisp/scheme

JS中函数式编程

• 数学中函数

• f（x） = y (无外部依赖)

• JS中的普通函数(有外部依赖,结果不可控)

let a = 3
let totalNum = num=>a*num 




• JS中的纯函数

let totalNum = (num,num2)=>num*num2 

1. 可推测

2. 可复用、模块化

3. 无副作用

4. 可读性

• 高阶函数

• 以函数作为输入和输出的函数被称为高阶函数（HOC）

• 常见------>回调

• 特性：

• 抽象

  命令式编程

  声明式编程

  //遍历数组
  let arr = [1,2,3,4,5]
  let forEach = function(arr, fn){
      for(let i = 0; i<arr.length; i++){
           fn(arr[i])
      }
  }
  forEach(arr,item=>console.log(item))
  

• 强调 “做什么”，把 “如何做” 抽象

• 强调 “如何做”

  //遍历数组
  let arr = [1,2,3,4,5]
  for(let i = 0; i<arr.length; i++){
      console.log(arr[i])
  }

• 缓存特性

• 需求: 让某函数只执行一次(利用闭包)

  function test(){
       console.log("xxx")
  }
  
  function once(fn){
      let done = false
      return function(){
          if(!done){
              fn()
              done = true
          }else{
              console.log("函数已执行")
          }
      }
  }
  
  let onceFn = once(test)
  onceFn();
  onceFn();
  onceFn();

• 惰性执行（惰性函数）

  //普通函数 a
  function createXHR(){
      let xhr = XMLHttpRequest?  XMLHttpRequest:  ActiveXObject;
   return  new xhr()
        
  }
  //惰性函数 b
  function createXHR(){
      let xhr = XMLHttpRequest?  XMLHttpRequest:  ActiveXObject;
      console.log("xhr")
      createXHR = function () {
              console.log("new xhr")
                      return new xhr();
         }
   return  new xhr();
  }
  假设执行多次createXHR，b就会省去判断条件
  

  
  

• 柯里化（把多元函数转化为一元函数）  

  
  function sum(x, y) {
      return x + y;
  }
  
  const curry = function (fn) {
      return function curryFn(...args) {//剩余参数...args
          if (args.length < fn.length) {
              return function () {
                  return curryFn(...args.concat([...arguments]));
              };
          }
           return fn(...args);
      };
  };
  let currySum = curry(sum);

• 组合(执行顺序从右到左) / 管道(执行顺序从左到右)

  const compose = function(...fns){
      return function(val){
          fns.reduce((total,fn)=>{
              return fn(total)
          }, val)
      }
  }