21-函数式编程(概念)

定义

🍕🍔🍕一种"编程范式",一种编写程序的方法论

主要的编程范式有三种:命令式编程,声明式编程和函数式编程

强调程序执行的结果而非执行的过程,倡导利用若干简单的执行单元让计算结果不断渐进,逐层推导复杂的运算,而非设计一个复杂的执行过程

例如:

将数组每个元素进行平方操作,命令式编程与函数式编程如下

// 命令式编程
var array = [0,1,2,3]
for(let i = 0;i < array.length;i++){
	array[i] = Math.pow(array[i],2)
}
// 函数式方式
[0,1,2,3].map(num => Math.pow(num,2))

就是要把过程逻辑写成函数,定义好输入参数,只关心它的输出结果

一种描述集合和集合之间的转换关系,输入通过函数都会返回有且只有一个输出值

纯函数

函数式编程旨在尽可能的提高代码的无状态性和不变性。要做到这一点,就要学会使用无副作用的函数,也就是纯函数

纯函数是对给定的输入返还相同输出的函数,并且要求你所有的数据都是不可变的,即纯函数=无状态+数据不可变

例如:

let double = value=>value *2

特性:

  • 函数内部传入指定的值,就会返回确定唯一的值
  • 不会造成超出作用域的变化,例如 修改全局变量或引用传递的参数

优势:

  • 使用纯函数,可以产生可测试的代码
test('double(2)等于4',()=>{
	expect(double(2)).toBe(4);
])
  • 不依赖外部环境计算,不会产生副作用,提高函数的复用性
  • 可读性更强 ,函数不管是否是纯函数 都会有一个语义化的名称,更便于阅读
  • 可以组装成复杂任务的可能性。符合模块化概念及单一职责原则

高阶函数

在我们的编程世界中,我们需要处理的其实也只有“数据”和“关系”,而关系就是函数

在这里,就是高阶函数的作用。高级函数,就是以函数作为输入或者输出的函数被称为高阶函数

const forEach = function(arr,fn){
	for(let i = 0;i<arr.length;i++){
		fn(arr[i])	
	}
}
let arr = [1,2,3]
forEach(arr,(item)=>{
	console.log(item);
})

上面通过高阶函数 forEach来抽象循环如何做的逻辑,直接关注做了什么

高阶函数存在缓存的特性,主要是利用闭包作用

const once = (fn)=>{
	let done = false;
	return function(){
		if(!done){
			fn.apply(this,fn);
			}else{
				console.log("已经执行")
				}
				done = true;
		}
}

柯里化

是把一个多参数函数转化成一个嵌套的一元函数的过程

一个二元函数如下:

let fn = (x,y)=>x + y
const test = function(fn){
	return function(x){
		return function(y){
				return fn(x,y);
			}
		}
}
let customFn = test(fn);
console.log(customFn(1)(2));

test 函数只能处理二元情况,下面再来实现一个实现多参数的情况

// 参数柯里化
const test = function(fn){
	return function curriedFn(...args){
		if(args.length<fn.length){
			return function(){
				return curriedFn(...args.concat([...arguments]))
				}
			}
			return fn(...args);
		}
}
const fn = (x,y,z,a)=>x+y+z+a;
const myfn = test(fn);
console.log(myfn()()())

意义:

  • 让纯函数更纯,每次接受一个参数,松散解耦
  • 惰性执行

组合与管道

组合函数,目的是将多个函数组合成一个函数

举个简单的例子

function afn(a){
    return a*2;
}
function bfn(b){
    return b*3;
}
const compose = (a,b)=>c=>a(b(c));
let myfn =  compose(afn,bfn);
console.log( myfn(2));

可以看到compose实现一个简单的功能:形成了一个新的函数,而这个函数就是一条从 bfn -> afn 的流水线

下面再来看看如何实现一个多函数组合

const compose = (...fns)=>val=>fns.reverse().reduce((acc,fn)=>{fn(acc),val})

组合函数与管道函数的意义在于:可以把很多小函数组合起来完成更复杂的逻辑

优缺点:

优点:

  • 更好的管理状态:因为它的宗旨是无状态,或者说更少的状态,能最大化的减少这些未知、优化代码、减少出错情况
  • 更简单的复用:
  • 更优雅的组合
  • 减少代码量,提高维护性
    缺点:
  • 性能:函数式编程相对于指令式编程,性能绝对是一个短板,因为它往往会对一个方法进行过度包装,从而产生上下文切换的性能开销
  • 资源占用:在 JS 中为了实现对象状态的不可变,往往会创建新的对象,因此,它对垃圾回收所产生的压力远远超过其他编程方式
  • 递归陷阱:在函数式编程中,为了实现迭代,通常会采用递归操作
  • 0
    点赞
  • 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、付费专栏及课程。

余额充值