likes
comments
collection
share

纯函数大解密!为什么它会成为JavaScript开发者的最佳伙伴?

作者站长头像
站长
· 阅读数 22

大家好,我是梦兽编程会经常在网上分享一些编程经验与项目经验。如果你正缺一些项目经验不凡关注一下梦兽编程,UP主会不定时在B站写代码和网络聊天或者改出一点指导刚毕业的你有一个编程的风向。

梦兽编程的个人空间-梦兽编程个人主页-哔哩哔哩视频

纯函数的好处

首先我们要了解一个概念什么是纯函数,并不是所有函数都是纯函数。有很多人写一个函数可能会和面向对象一样出现属性(参数)串改的情况。这个放到最后面讲。希望你们可以看到最后

纯函数是指在相同的输入下,总是能够得到相同的输出,并且没有任何副作用的函数。简单来说,它就像是一个黑箱子,只要给它相同的东西,它就会始终如一地给出同样的结果。这让我们的代码更加可预测和可靠!🎯💡

我们要如何理解这句话呢? 这里我举两个javascript中用的比较多切容易混淆的方法slicesplice,这两个方法都能对数据进行删除元素的操作。但设计他们两产生的副作用却大不同。

比如一下例子,在浏览器控制台中输入

const xs = [1,2,3,4,5];

//我们两项操作
xs.slice(0,3);
// [1,2,3]
xs.slice(0,3);
// [1,2,3]
xs.slice(0,3);
// [1,2,3]

// 但是
xs.splice(0,3);
//=> [1,2,3]
xs.splice(0,3);
//=> [4,5]
xs.splice(0,3);
//=> []

我们追求的是那种可靠的,每次都能返回同样结果的函数,而不是像 splice 这样每次调用后都把数据弄得一团糟的函数,这不是我们想要的。

我们在举一个例子,这里需要用到我之前分享过的闭包概念。

var minimum = 21;

var checkAge = function(age) {
  return age >= minimum;
};

在这个例子中,我们可以看到这个函数依赖的minimum是一个全局变量。全局函数很有可能因为某些行为的修改而导致我们输出的结果改变从而导致不可靠。如果我们想让艺术的函数变得可控;可以吧代码修改成:


var checkAge = function(minimum){
  return function(age) {
    return age >= minimum;
  };
}

var check21Age = checkAge(21);
console.log(check21Age(22))

追求“纯”的理由

可缓存性:纯函数对于相同的输入会有缓存机制,这意味着我们可以在需要时快速地获取已经计算过的结果,提高性能。 3️⃣ 可组合性:纯函数可以灵活地组合在一起,形成更复杂的逻辑,而不会引入任何意外的行为。这大大提高了我们代码的可维护性和可扩展性。 纯函数总能够根据输入来做缓存。实现缓存的一种典型方式是 memoize 技术:

var memoize = function(f) {
  var cache = {};

  return function() {
    var arg_str = JSON.stringify(arguments);
    cache[arg_str] = cache[arg_str] || f.apply(f, arguments);
    return cache[arg_str];
  };
};

var squareNumber  = memoize(function(x){ return x*x; });
squareNumber(4);
// 16
squareNumber(4); // 从缓存中读取输入值为 4 的结果

可移植性 与 单元测试

可测试性:因为纯函数不依赖外部状态,所以我们可以轻松地写出可测试的代码,只需关注输入和输出,不需要担心环境的复杂性。不用想面向对象那种情况因为里面依赖某个对象,放心对代码进行 c v

可组合性

可组合性:纯函数可以灵活地组合在一起,形成更复杂的逻辑,而不会引入任何意外的行为。这大大提高了我们代码的可维护性和可扩展性。

和面向对象对比,函数范式编程的纯函数为什么可以有效的把控代码质量?

这里我举一个大家日常生活中搭电梯的例子。上一楼和下一楼,如果我们用面向对象的思维去思考这个场景很容易写出一下代码。

class 电梯 {
  
  楼层 = 0;
  
  上升一楼(){
    this.楼层 = this.楼层 + 1;
  }
  
  下降一楼(){
    this.楼层 = this.楼层 - 1;
  }
  
  // .... 更多

}

const 电梯时例 = new 电梯();
电梯时例.上升一楼();
电梯时例.下降一楼();
电梯时例.上升一楼();
conosole.log(电梯时例.楼层)

可以看出我们楼层是一个可变的参数,后面随着业务的增加,从而导致类里面的方法增加。很多人有时候会在别的方法中操作了楼层的操作,随着系统的代码量越来越大这样的问题就越来越多,更多的地方操作了楼层的属性,到后面你会发现这个数据在系统中会编程一个定时炸弹虽然不是什么大问题。这也是面向对象经常出先小问题的一个前提吧。

如果我们使用纯函数的方式去做会怎么做呢?


var 电梯信息 = {
  楼层:0
}

func 上升一楼(电梯信息){
  return {
    ...电梯信息,
    楼层: 电梯信息.楼层 + 1
  }
}  

func 下降一楼(电梯信息){
  return {
    ...电梯信息,
    楼层: 电梯信息.楼层 - 1
  }
}  

const 当前电梯信息 = 上升一楼(下降一楼(上升一楼(电梯信息)))
conosole.log(当前电梯信息.楼层)

在上面的例子中,我们可以看到电梯信息在输入到输出的过程中,它的值并没有进行修改。如果我们在打印

console.log(电梯信息.楼层) //=> 0

好了今天的分享到这里就已经结束了,如果对你的学习和编码有帮助。不凡给up主连三,你的三连是我创作的最大动力。

这里是我的QQ交流群,扫码即可加入QQ群和梦兽编程进行交流。有问必答。

纯函数大解密!为什么它会成为JavaScript开发者的最佳伙伴?

截屏2023-08-17 23.44.00.png

纯函数大解密!为什么它会成为JavaScript开发者的最佳伙伴?

截屏2023-08-18 00.02.24.png

我真的深深爱上了纯函数编程!它让我的代码变得简洁、可读性更强,而且维护起来也轻松多了!在实际项目中,用纯函数编程解决问题的时候,我真的感觉自己是个天才!🌟

总结一下,纯函数编程是一种很酷的编程范式,它让代码更加优雅和可靠。大家不妨试试看,相信你们也会爱上它的!💪

#纯函数编程 #函数式编程 #代码优化 #编程技巧