永嘉网站制作,private messages for wordpress,微信公众号可以做网站嘛,江夏区建设局网站一、理解JavaScript纯函数
函数式编程中有一个非常重要的概念叫纯函数#xff0c;JavaScript符合函数式编程的范式#xff0c;所以也有纯函数的概念#xff1b;
在react开发中纯函数是被多次提及的#xff1b;比如react中组件就被要求像是一个纯函数#xff08;为什么是…一、理解JavaScript纯函数
函数式编程中有一个非常重要的概念叫纯函数JavaScript符合函数式编程的范式所以也有纯函数的概念
在react开发中纯函数是被多次提及的比如react中组件就被要求像是一个纯函数为什么是像因为还有class组件redux中有一个reducer的概念也是要求必须是一个纯函数所以掌握纯函数对于理解很多框架的设计是非常有帮助的
简单总结一下纯函数的定义
确定的输入一定会产生确定的输出函数在执行过程中不能产生副作用
副作用的理解
副作用side effect其实本身是医学的一个概念比如我们经常说吃什么药本来是为了治病可能会产生一些其他的副作用在计算机科学中也引用了副作用的概念表示在执行一个函数时除了返回函数值之外还对调用函数产生了附加的影响比如修改了全局变量修改参数或者改变外部的存储
纯函数在执行的过程中就是不能产生这样的副作用
副作用往往是产生bug的 “温床”。
纯函数的案例
我们来看一个对数组操作的两个函数
sliceslice截取数组时不会对原数组进行任何操作,而是生成一个新的数组splicesplice截取数组, 会返回一个新的数组, 也会对原数组进行修改slice就是一个纯函数不会修改传入的参数
纯函数的优势
为什么纯函数在函数式编程中非常重要呢
因为你可以安心的编写和安心的使用你在写的时候保证了函数的纯度只是单纯实现自己的业务逻辑即可不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改你在用的时候你确定你的输入内容不会被任意篡改并且自己确定的输入一定会有确定的输出
React中就要求我们无论是函数还是class声明一个组件这个组件都必须像纯函数一样保护它们的props不被修改
二、JavaScript柯里化 柯里化也是属于函数式编程里面一个非常重要的概念。 柯里化定义总结
只传递给函数一部分参数来调用它让它返回一个函数去处理剩余的参数这个过程就称之为柯里化
柯里化的结构
那么柯里化到底是怎么样的表现呢
为什么需要有柯里化呢
让函数的职责单一复用参数逻辑
让函数的职责单一
在函数式编程中我们其实往往希望一个函数处理的问题尽可能的单一而不是将一大堆的处理过程交给一个函数来处理那么我们就可以将每次传入的参数在单一的函数中进行处理处理完后在下一个函数中再使用处理后的结果
比如上面的案例我们进行一个修改传入的函数需要分别被进行如下处理
第一个参数 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函数时传入了更多的参数
