JS高级——纯函数、柯里化(手写自动柯里化函数)、组合函数(手写自动组合函数)

一、理解JavaScript纯函数

函数式编程中有一个非常重要的概念叫纯函数,JavaScript符合函数式编程的范式,所以也有纯函数的概念;

  • 在react开发中纯函数是被多次提及的;
  • 比如react中组件就被要求像是一个纯函数(为什么是像,因为还有class组件),redux中有一个reducer的概念,也是要求必须是一个纯函数;
  • 所以掌握纯函数对于理解很多框架的设计是非常有帮助的;

简单总结一下纯函数的定义:

  • 确定的输入,一定会产生确定的输出;
  • 函数在执行过程中,不能产生副作用;

副作用的理解

  • 副作用(side effect)其实本身是医学的一个概念,比如我们经常说吃什么药本来是为了治病,可能会产生一些其他的副作用;
  • 在计算机科学中,也引用了副作用的概念,表示在执行一个函数时,除了返回函数值之外,还对调用函数产生了附加的影响,比如修改了全局变量修改参数或者改变外部的存储

纯函数在执行的过程中就是不能产生这样的副作用:

  • 副作用往往是产生bug的 “温床”。

纯函数的案例

我们来看一个对数组操作的两个函数:

  • slice:slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组;
  • splice:splice截取数组, 会返回一个新的数组, 也会对原数组进行修改
  • slice就是一个纯函数,不会修改传入的参数;
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

纯函数的优势

为什么纯函数在函数式编程中非常重要呢?

  • 因为你可以安心的编写和安心的使用;
  • 你在写的时候保证了函数的纯度,只是单纯实现自己的业务逻辑即可,不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改;
  • 你在用的时候,你确定你的输入内容不会被任意篡改,并且自己确定的输入,一定会有确定的输出;

React中就要求我们无论是函数还是class声明一个组件,这个组件都必须像纯函数一样,保护它们的props不被修改:
在这里插入图片描述

二、JavaScript柯里化

柯里化也是属于函数式编程里面一个非常重要的概念。

柯里化定义总结:

  • 只传递给函数一部分参数来调用它,让它返回一个函数去处理剩余的参数;
  • 这个过程就称之为柯里化;

柯里化的结构

那么柯里化到底是怎么样的表现呢?
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

为什么需要有柯里化呢?

  1. 让函数的职责单一
  2. 复用参数逻辑
让函数的职责单一:
  • 在函数式编程中,我们其实往往希望一个函数处理的问题尽可能的单一,而不是将一大堆的处理过程交给一个函数来处理;
  • 那么我们就可以将每次传入的参数在单一的函数中进行处理,处理完后在下一个函数中再使用处理后的结果;

比如上面的案例我们进行一个修改:传入的函数需要分别被进行如下处理

  • 第一个参数 + 2
  • 第二个参数 * 2
  • 第三个参数 ** 2

在这里插入图片描述

在这里插入图片描述

复用参数逻辑:
  • makeAdder函数要求我们传入一个count(并且如果我们需要的话,可以在这里对count进行一些修改);
  • 在之后使用返回的函数时,我们不需要再继续传入count了
    在这里插入图片描述
    这里我们在演示一个案例,需求是打印一些日志:
  • 日志包括时间、类型、信息;
    在这里插入图片描述

三、手写自动柯里化函数

在这里插入图片描述

调用myCurrying函数即可将普通的函数,转成柯里化后的函数:
在这里插入图片描述

function sum(num1, num2, num3) {return num1 + num2 + num3
}
const res = sum(10, 20, 30)
console.log(res)// function sum(num1) {
//     return function (num2) {
//         return function (num3) {
//             return num1 + num2 + num3
//         }
//     }
// }
// console.log(sum(10)(20)(30))function myCurrying(fn) {return function curried(...args) {if (args.length >= fn.length) {// 如果当前curried函数传递的参数个数(args.length)>=需要变成柯里化函数(fn)的参数的个数// 符合:currySum(10, 20, 30), 则直接调用fn执行函数即可return fn.apply(this, args)} else {// 如果当前curried函数传递的参数个数<需要变成柯里化函数(sum)的参数的个数// 则需要继续返回一个函数来继续接收剩余的参数return function (...args2) {// 接收道参数后,需要递归调用curried来检查当前传入的参数个数是否达到原始函数fn的参数个数return curried.apply(this, [...args, ...args2])}}}
}const currySum = myCurrying(sum)
console.log(currySum(10, 20, 30))
console.log(currySum(10, 20)(30))
console.log(currySum(10)(20, 30))
console.log(currySum(10)(20)(30))

四、理解组合函数

组合(Compose)函数是在JavaScript开发过程中一种对函数的使用技巧、模式:

  • 比如我们现在需要对某一个数据进行函数的调用,执行两个函数fn1和fn2,这两个函数是依次执行的;
  • 那么如果每次我们都需要进行两个函数的调用,操作上就会显得重复;
  • 那么是否可以将这两个函数组合起来,自动依次调用呢?
  • 这个过程就是对函数的组合,我们称之为 组合函数(Compose Function);

在这里插入图片描述

手写自动组合函数:

刚才我们实现的compose函数比较简单,我们需要考虑更加复杂的情况:比如传入了更多的函数,在调用compose函数时,传入了更多的参数:
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(五)uboot移植补基础之shell

1、shell介绍&#xff1a;shell是操作系统的终端命令行 (1)shell可以理解为软件系统提供给用户操作的命令行界面&#xff0c;可以说它是人机交互的一种方式。(2)我们可以使用shell和操作系统、uboot等软件系统进行交互。具体来说就是我们通过shell给软件系统输入命令然后回车执…

三包围结构的字是什么样的_拼音带kun的字大全_50个拼音含kun的字组词

原标题&#xff1a;拼音带kun的字大全_50个拼音含kun的字组词1、昆(kūn)&#xff0c;8画&#xff0c;上下结构&#xff0c;部首&#xff1a;曰(日)组词&#xff1a;昆虫(kūn chng) | 昆曲(kūn qǔ) | 昆山(kūn shān) | 昆仲(kūn zhng) | 昆吾(kūn w) | 昆仑(kūn ln) |2…

JS高级——with语句、eval函数、严格模式

一、with语句 with语句的作用&#xff1a;扩展一个语句的作用域链。 不建议使用with语句&#xff0c;因为它可能是混淆错误和兼容性问题的根源。并且&#xff0c;在浏览器开启严格模式下&#xff0c;使用with会报错&#xff1a; 二、eval函数 eval是一个特殊的函数&#x…

写 一个PHP脚本遇到的问题总结

在项目中&#xff0c;因为之前的人员&#xff0c;基础数据没有处理好&#xff0c;后面需要写一个脚本来处理这个问题&#xff0c;经验少&#xff0c;总结如下&#xff1a;1.在linux下直接连接跑处理MySQL数据的脚本&#xff0c;要用PDO的方式连接数据库&#xff0c;长时间在框架…

nts包如何下周 php_windows下PHP7安装方法(ts版和nts版)

1.首先到官网下载PHP的Zip安装包http://windows.php.net/download/(1)VC14 x64 Non Thread Safe (2015-Dec-17 00:17:18)(2)VC14 x64Thread Safe (2015-Dec-17 00:17:17)下载的是这两个版本&#xff0c;可以分别解压到C盘根目录目录存放如下NTS: C:/phpTS:C:/php-tsVC14 需要自…

JS面向对象——Object.defineProperty

一、JavaScript的面向对象 JavaScript其实支持多种编程范式的&#xff0c;包括函数式编程和面向对象编程&#xff1a; JavaScript中的对象被设计成一组属性的无序集合&#xff0c;像是一个哈希表&#xff0c;有key和value组成&#xff1b;key是一个标识符名称&#xff0c;val…

Oracle Minus关键字

Oracle Minus关键字  SQL中的MINUS关键字  SQL中有一个MINUS关键字&#xff0c;它运用在两个SQL语句上&#xff0c;它先找出第一条SQL语句所产生的结果&#xff0c;然后看这些结果有没有在第二个SQL语句的结果 中。如果有的话&#xff0c;那这一笔记录就被去除&#xff0c;…

极大似然函数求解_极大似然估计法的理解指南

原标题&#xff1a;极大似然估计法的理解指南今天讲一个在机器学习中重要的方法——极大似然估计。这是一个&#xff0c;能够让你拥有拟合最大盈利函数模型的估计方法。01什么是极大似然估计法极大似然估计是 1821 年由高斯提出&#xff0c;1912 年由费希尔完善的一种点估计方法…

json字符串和字典类型的相互转换(转载)

转自&#xff1a;http://www.cnblogs.com/YUTOUYUWEI/p/5585863.html 在开发过程中&#xff0c;有时候需要将json字符串转为字典类型&#xff0c;反之亦然&#xff0c;通常采用.Net的开源类库Newtonsoft.Json进行序列化&#xff0c;这里我也是采用这个&#xff0c;不过我更喜欢…

JS高级——对象的原型__proto__、函数的原型prototype、构造函数

一、认识构造函数 我们先理解什么是构造函数&#xff1f; 构造函数也称之为构造器&#xff08;constructor&#xff09;&#xff0c;通常是我们在创建对象时会调用的函数&#xff1b;在其他面向的编程语言里面&#xff0c;构造函数是存在于类中的一个方法&#xff0c;称之为构造…

python各种数据类型的常用方法_Python之数据类型的常用方法

常用方法汇总1. int类方法汇总&#xff1a;变量名.to_bytes(数字&#xff0c;"little"\"big") # (把数字转换成bytes)# 数字表示转换后几个字节表示 little在前面&#xff0c;big在后面(大小端)int.from_bytes("要转换的东西","little"…

JS面向对象——原型链、通过原型链实现继承、借用构造函数实现继承

一、JavaScript原型链 在真正实现继承之前&#xff0c;我们先来理解一个非常重要的概念&#xff1a;原型链。 我们知道&#xff0c;从一个对象上获取属性&#xff0c;如果在当前对象中没有获取到就会去它的原型&#xff08;__proto__&#xff09;上面获取&#xff1a; 二、…

echart自定义动画_echarts动画效果

最近工作中碰到一个需求&#xff0c;要求动态展示柱状图&#xff0c;大概效果如下&#xff1a;图片是我用操作宽度模拟的效果&#xff0c;但是echarts以前没接触过&#xff0c;今天看了下文档&#xff0c;梯形也没做出来&#xff0c;想请教下大家echarts能否完成图中效果&#…

基于bootstrap框架在ie8以下,兼容媒体查询[css样式]

1 <style type"text/css">2 /*基于bootstrap框架在ie8以下&#xff0c;兼容媒体查询*/3 .row [class^"col-"] {4 float: left \9;5 }6 7 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1 {8 width: 8.33333333% \9;9 …

JS面向对象——原型式继承函数、寄生式继承函数、寄生组合式继承

一、原型式继承函数 回顾一下JavaScript想实现继承的目的&#xff1a;重复利用另外一个对象的属性和方法. 最终的目的&#xff1a;student对象的原型指向了person对象&#xff1b; 二、寄生式继承函数 寄生式(Parasitic)继承是与原型式继承紧密相关的一种思想, 并且同样由道格…

k8s pod内部容器_第三章 pod:运行于kubernetes中的容器

本章内容涵盖创建、 启动和停止 pod使用标签组织 pod 和其他资源使用特定标签对所有 pod 执行操作使用命名空间将多个 pod 分到不重叠的组中调度 pod 到指定类型的工作节点上一章 已经大致介绍了在 Kubemetes 中创建的基本组件&#xff0c;包括它们的基本功 能概述。 那么接下来…

JS面向对象——Object对象的方法补充、原型继承关系图

一、Object.create() 这个方法用于创建一个新对象。被创建的对象的__proto__指向create函数第一个参数的原型对象prototype&#xff0c;在创建新对象时可以通过create函数第二个参数指定一些属性。 二、Object.hasOwnProperty() 对象是否有某一个属于自己的属性&#xff08…

Could not obtain connection metadata

用hibernate连接数据库出现错误2010-3-16 17:23:39, 093 [main] WARN [org.hibernate.cfg.SettingsFactory] - Could not obtain connection metadata java.sql.SQLException: 不支持的特性 at oracle.jdbc.dbaccess.DBError.throwSqlException(DBError.java:134 ) at …

JS面向对象——class定义类、类的构造函数、实例方法、访问器方法、静态方法、继承、super、多态

一、认识class定义类 我们会发现&#xff0c;按照前面的构造函数形式创建 类&#xff0c;不仅仅和编写普通的函数过于相似&#xff0c;而且代码并不容易理解。 在ES6&#xff08;ECMAScript2015&#xff09;新的标准中使用了class关键字来直接定义类&#xff1b;但是类本质上依…

ES6(一)——字面量的增强、解构、let/const、块级作用域、暂时性死区

一、字面量的增强 ES6中对 对象字面量 进行了增强&#xff0c;称之为 Enhanced object literals&#xff08;增强对象字面量&#xff09;。 字面量的增强主要包括下面几部分&#xff1a; 属性的简写&#xff1a;Property Shorthand方法的简写&#xff1a;Method Shorthand计算…