JavaScript函数式编程

1:基本概念

函数式编程是一种编程思维方式,并不是一些语法规则,对于复用性高的功能代码进行一定的函数封装,实现了代码的高可复用性(主要目的)。

函数式编程的特点:

  • 函数是第一等公民,因为叫函数式编程,因此函数的地位是最高的,也就是说比起变量函数的地位更高一点。
  • 只用表达式而不用语句,表达式就是声明式的意思,语句就是命令式的,尽量使用表达式或者是声明式的代码来组织逻辑。
  • 没有副作用的代码,也叫做纯函数或者在一些开发框架中也叫作纯主键,纯的意思是输入一定那么输出也一定。
  • 不修改状态。
  • 引用透明。

2:函数是一等公民

理解:函数在整个JavaScript代码里面一般来讲有四种,第一种叫做声明函数、然后是表达式函数、匿名函数以及自执行函数。

为什么函数是一等公民?

  • 函数声明优先级高于变量声明和函数表达式
      console.log(getName);
      
      getName();
      
      var getName;
      getName = 'Eric';
      function getName(){
          console.log('function getName');
      }
      
      console.log(getName);
      
      //ƒ getName(){
          console.log('function getName');
        }
      // function getName
      // Eric
  • 函数应用
      //声明函数
      function getName(){
      }
      
      //表达式函数(直接赋给一个变量)
      var getName = function(){
      }
      
      //匿名函数(没有名字)
      setTimeout(function(){
      },1000);
      
      //自执行函数(IIFE)
      (function(){
      })();

3:纯函数

特点:

  • 对于相同的输入,永远会得到相同的输出
      function getNumber(num){
          return num + Math.random();
      }
  • 不改变输入值
      function getGirlGift(list){
          // 输入值改变
          list = list.map(girl => {
              girl.gift = girl.age > 18 ? 'big' : 'small';
          });
          return list;
      }
  • 不包含副作用(网络、I/O)
      var array = [1,2,3,4,5];
      array.slice(0,3);
      array.slice(0,3);
      // [1, 2, 3]
      
      // 改变原数组
      array.splice(0,3);
      array.splice(0,3);
      // [4, 5]
      
      //网络请求
      asiox.get('https://www.xxxx.com').then(res => {
          
      })
      
      //时间
      function getDate(){
          return new Date();
      }
  • Array函数举例
      以数组为例,纯与不纯函数有哪些:
      //不纯:调用数组之后改变了原数组。
      array.push();       数组尾部插入
      array.pop();        删除并返回数组最后一个元素
      array.unshift();    数组头部插入
      array.shift();      删除并返回数组第一元素
      array.splice();     删除元素,并向数组添加元素
      array.reverse();    颠倒数组元素的顺序
      array.sort();       排序数组元素
      
      
      //数组纯函数:调用数组的方法不改变原数组。
      array.slice();      数组中返回选定的元素
      array.concat();     连接数组,并发挥新数组
      array.join();       按分隔符连接数组,返回字符串

4:函数柯里化

定义:传递给函数的一部分参数来调用它,让它返回一个函数去处理剩下的参数。

柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。例如:

    // 普通的add函数
    function add(x, y) {
        return x + y
    }
    add(1,2);
    // 3
    
    // 柯里化改编后
    function addX(y) {
        return function (x) {
            return x + y;
        }
    }
    addX(2)(1);
    // 3
    
    // 函数不纯 - 硬编码 - 依赖min参数 
    var min = 90; 
    var isWell = score => score > min;
    
    // 柯里化改编 
    var min = 90; 
    var chekoLevel = baseLine => (score => score > baseLine);
    var isWell = chekoLevel(90);
    // isWell(90)
       false
    // isWell(940)
       true
    
    实际上就是把add函数的x,y两个参数变成了先用一个函数接收x然后返回一个函数去处理y参数。现在思路应该就比较清晰了,就是只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。

一种对参数的缓存

  • 用在一些区分环境的函数预缓存
  • 已获取某些耗时操作结果缓存

5:函数组合

在函数式编程思想之前,出现过一个函数嵌套的现象,函数嵌套是一个函数的执行结果它是另外一个函数的入参,一般来讲是两层,但是两层以上或者更多也是可能的。比如下面的代码,它的意思是function13的结果作为function2的入参,然后function2的结果又作为function1的入参。这样的写法不太好理解而且容易混乱,因此在这个基础上,衍生了函数式编程的另外一个思想,叫做函数组合。

函数组合是通过另外一个函数去组合嵌套函数,但是函数本身的嵌套关系,依赖关系是不会改变的。只不过是通过另外一个函数完成一个组装。

  • 函数嵌套
      function1(function2(function13(x)));
  • 函数组合
      var compose = (function1, function2) => (x => function1(function2(x)));
      
      var function1 = param => param + 1;
      var function2 = param => param + 2;
      var final = compose(function1, function2);
      final(1);
      
      // 4

6:Point Free

不要命名转瞬即逝的中间变量。

    var getSplitWord = str => str.toUpperCase().split(' ');

    //柯里化封装
    var toUpperCase = word => word.toUpperCase();
    var split = x => str => str.split(x);
    var getSplitWord = compose(split(' '), toUpperCase);

7:声明式代码

    var students = [{
        name: 'Eric',
        score: 99,
        },
        {
            name: 'Iven',
            score: 59,
        }
    }];
    
    //命令式
    const getWell =students => {
        let result = [];
        for (let i = 0; i < students.length; i++){
            if (students[i].score >= 90){
                result.push(students[i])
            }
        }
        return result;
    }
    
    //声明式
    const getWell = students => return students.filler(student => students.score >= 90);

8:高阶函数

把函数当参数,把传入的函数做一个封装。

    function add(x,y,f){
        return f(x) + f(y);
    }

高阶函数是对其他函数进行操作的函数,可以将它们作为参数或返回它们。 简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。

常见的高阶函数有:

  • Array.map
      var array = [1,2,3];
      array.map(s => s + 1);
      // [2, 3, 4]
  • Array.sort(排序)
  • Array.filter(过滤)
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,069评论 4 358
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,212评论 1 287
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,912评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,424评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,741评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,194评论 1 206
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,553评论 2 307
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,289评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,923评论 1 237
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,251评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,775评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,144评论 2 249
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,698评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,936评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,658评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,214评论 2 267
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,159评论 2 258

推荐阅读更多精彩内容