我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript函数式编程示例分析

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

总结

1.必须是纯函数

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

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

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript函数式编程示例分析

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript函数式编程示例分析

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

python函数式编程的示例分析

这篇文章给大家分享的是有关python函数式编程的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。python可以做什么Python是一种编程语言,内置了许多有效的工具,Python几乎无所不能,该语言通俗
2023-06-14

JavaScript中的函数式编程实例分析

这篇文章主要介绍“JavaScript中的函数式编程实例分析”,在日常操作中,相信很多人在JavaScript中的函数式编程实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript中的函数式
2023-07-05

Java函数编程的示例分析

小编给大家分享一下Java函数编程的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、函数编程Lambda我们可以将lambda表达式视为一个匿名函数,可以将其分配给变量并传递给方法,该方法接受函数接口作为参数。L
2023-06-25

Python函数式编程装饰器的示例分析

这篇文章给大家分享的是有关Python函数式编程装饰器的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、装饰器的本质:装饰器(decorator)本质是函数闭包(function closure)的语法
2023-06-29

JavaScript数据类型对函数式编程的影响示例解析

这篇文章主要为大家介绍了JavaScript数据类型对函数式编程的影响示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-02-23

Golang函数式编程深入分析实例

习惯与函数式编程语言的开发者,会认为for循环和if判断语句是冗长的代码,通过使用map和filter处理集合元素让代码更可读。本文介绍Go闭包实现集合转换和过滤功能
2023-01-10

汇编语言的函数式编程实例分析

这篇文章主要介绍了汇编语言的函数式编程实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇汇编语言的函数式编程实例分析文章都会有所收获,下面我们一起来看看吧。一切都是为了消除副作用要了解函数式编程,我们需要首
2023-06-27

JavaScript中异步编程的示例分析

这篇文章给大家分享的是有关JavaScript中异步编程的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。目的提升开发效率,编写易维护的代码引子问题请求时候为什么页面卡死??$.ajax({ url: "
2023-06-15

JavaScript函数柯里化的示例分析

这篇文章将为大家详细讲解有关JavaScript函数柯里化的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。函数柯里化使用方法:柯里化是函数式编程的一个重要技巧,将使用多个参数的一个函数转换成一系列
2023-06-27

JavaScript动画函数封装的示例分析

小编给大家分享一下JavaScript动画函数封装的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、动画函数原理核心原理:通过定时器setInterval() 不断移动盒子位置。实现步骤:获得盒子当前位置让盒子在
2023-06-22

编程热搜

目录