JavaScript函数式编程示例分析

 更新时间:2022年10月18日 08:33:14   作者:爱思考的猪  
函数式编程是一种编程范式,将整个程序都由函数调用以及函数组合构成。 可以看成一条流水线,数据可以不断地从一个函数的输出流入另一个函数的输入,最后输出结果

函数式编程

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

总结

1.必须是纯函数

2.函数式编程需要结合Curring和Compose使用

3.函数编程的优点有(1).代码更稳定更独立,更有利于单测和tree shaking.(2).更接近原生js。

到此这篇关于JavaScript函数式编程示例分析的文章就介绍到这了,更多相关JS函数式编程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序自定义toast实现方法详解【附demo源码下载】

    微信小程序自定义toast实现方法详解【附demo源码下载】

    这篇文章主要介绍了微信小程序自定义toast实现方法,简单描述了微信小程序自带toast使用方法,并结合实例形式分析了自定义toast的定义与使用方法,需要的朋友可以参考下
    2017-11-11
  • Async Validator 异步验证使用说明

    Async Validator 异步验证使用说明

    async-validator 是一个异步验证的库,需要传入要验证的数据和验证规则 ,下面通过本文给大家介绍Async Validator 异步验证使用说明,需要的的朋友参考下吧
    2017-07-07
  • 基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)

    基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)

    这篇文章主要为大家详细介绍了touch.js手势库结合zepto.js插件开发图片查看器,图片可以实现滑动、缩放、双击缩放等效果,
    2016-11-11
  • Javascript实现鼠标右键特色菜单

    Javascript实现鼠标右键特色菜单

    鼠标右键大家都经常操作,但是鼠标的内容是不是符合大家的“口味”?这篇文章就是教大家如何定制自己专属鼠标右键,需要的朋友可以参考下
    2015-08-08
  • JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结

    JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结

    今天测试代码时,发现不少IE可以运行的ajax,但在FF中报错。IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下,需要的朋友可以看下,对于以后的代码书写一定要考虑到多浏览器的兼容性。
    2010-04-04
  • JS数据结构之队列结构详解

    JS数据结构之队列结构详解

    这篇文章主要为大家详细介绍了JavaScript数据结构与算法中的队列结构,文中通过简单的示例介绍了队列结构的原理与实现,需要的可以参考一下
    2022-11-11
  • js流动式效果显示当前系统时间

    js流动式效果显示当前系统时间

    这篇文章主要为大家详细介绍了js实现流动式时间效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 深入理解JS的事件绑定、事件流模型

    深入理解JS的事件绑定、事件流模型

    这篇文章主要介绍了JS的事件绑定、事件流模型的相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • javascript 闭包详解

    javascript 闭包详解

    闭包:是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部创建另外一个函数。在javascript中没有块级作用域,一般为了给某个函数申明一些只有该函数才能使用的局部变量时,我们就会用到闭包,我们来详细探讨下
    2015-07-07
  • D3.js实现雷达图的方法详解

    D3.js实现雷达图的方法详解

    大家应该都知道基本图表一共有六种,分别是柱状图、折线图、散点图、气泡图、饼图和雷达图。前面五种图形都已经介绍过如何实现了,今天我们一起来看看最后的雷达图。有需要的朋友们可以参考学习下。
    2016-09-09

最新评论