函数式编程-纯函数篇

在这里插入图片描述

概念:

相同的输入永远会得到相同的输出,且没有任何可观察的副作用
纯函数就类似数学中函数(用来描述输入和输出之间的关系)例如y=f(x)

举例

数组中的slice和splice分别是纯函数和不纯的函数

纯函数
console.log(arr1.slice(0, 3)); //[1,2,3]

console.log(arr1.slice(0, 3)); //[1,2,3]

console.log(arr1.slice(0, 3)); //[1,2,3]

function getSum(num1, num2) {

    return num1 + num2
    
}
console.log(getSum(1, 11)); //12

console.log(getSum(1, 11)); //12

console.log(getSum(1, 11)); //12

不纯的函数

console.log(arr1.splice(0, 3)); //[1,2,3]

console.log(arr1.splice(0, 3)); //[4,5]

console.log(arr1.splice(0, 3)); //[]

函数式编程中不会保留计算中间的结果,所以变量是不可变的(无状态的)
可以把一个函数的执行结果交给另一个函数去处理

纯函数的好处

可以缓存,因为纯函数对相同的输入始终有相同的结果,所以可以把函数的结果缓存起来
//记忆函数

let getAreaWidthMemory = _.memoize(getArea)

console.log(getAreaWidthMemory(4));

console.log(getAreaWidthMemory(4));

console.log(getAreaWidthMemory(4));

console.log(getAreaWidthMemory(4));

//结果

// 4

// 50.26548245743669

// 50.26548245743669

// 50.26548245743669

// 50.26548245743669

模拟momoize函数

function memoize(f) {
    let cache = {};
    return function(param) {
        let key = JSON.stringify(arguments);
        cache[key] = cache[key] || f.apply(f, arguments)
        return cache[key]
    }
}

let getAreaWidthMemory = memoize(getArea)

console.log(getAreaWidthMemory(4));

console.log(getAreaWidthMemory(4));

console.log(getAreaWidthMemory(4));

console.log(getAreaWidthMemory(4));

结果如下

4

50.26548245743669

50.26548245743669

50.26548245743669

50.26548245743669

纯函数的弊端

弊端指的是让函数变得不纯,纯函数的根据相同的输入返回相同的输出,
如果函数依赖于外部的状态就无法保证输出相同就会出现问题
外部的状态来源
1、配置文件
2、数据库
3、获取用户的输入


//不纯函数
let mini = 18

function checkAge(age) {
    return age >= mini
}

//纯函数(有硬编码)后续可以通过柯里化解决

function checkAge(age) {

    let mini = 18
    return age >= mini
}

所有的外部交互都有可能带来问题,这样也使得方法通用性、扩展性 和可重用性下降,
同时也会给程序带来安全隐患,给程序带来不确定性,
但是外部的状态不可避免,尽可能控制它们在可控范围内发生

谢谢观看

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React是一个用于构建用户界面的JavaScript库。它采用了组件化的开发方式,使得开发者可以将界面拆分成独立的、可复用的组件。在React中,函数式编程是一种常见的编程范式,它强调使用函数来构建应用。 函数式编程是一种编程范式,它将计算视为数学函数的求值过程。在函数式编程中,函数被视为一等公民,可以作为参数传递给其他函数,也可以作为返回值返回。函数式编程强调不可变性和无副作用,即函数的执行不会改变外部状态。 在React中,函数式编程被广泛应用于组件的开发。使用函数式编程的方式,我们可以将组件定义为函数,接收一些输入参数(称为props),并返回一个描述组件界面的React元素。这种方式使得组件的开发更加简洁、可测试和可维护。 函数式编程在React中的一些特点包括: 1. 函数:组件函数应该是函数,即相同的输入应该始终产生相同的输出,而且不应该有副作用。 2. 无状态组件:函数式组件通常是无状态的,即它们不会保存任何状态信息,只依赖于传入的props进行渲染。 3. 高阶组件:函数式编程可以使用高阶组件(Higher-Order Components)来增强组件的功能,例如添加共享的逻辑或状态管理。 总结一下,React中的函数式编程是一种将组件定义为函数的开发方式,它强调不可变性和无副作用,使得组件的开发更加简洁、可测试和可维护。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值