浅析 FP:JavaScript 中的纯函数
2020/3/30 14:02:18
本文主要是介绍浅析 FP:JavaScript 中的纯函数,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
纯函数 是一个常见的概念,在日常工作中也经常会遇到,它其实非常简单,今天我们来了解一下它的好处以及为什么要使用它。
两个特点
一个函数,如果符合以下两个特点,那么它就可以称之为 纯函数:
- 对于相同的输入,永远得到相同的输出
- 没有任何可观察到的副作用
相同输入得到相同输出
我们先来看一个不纯的反面典型:
let greeting = 'Hello' function greet (name) { return greeting + ' ' + name } console.log(greet('World')) // Hello World
上面的代码中,greet('World')
,是不是永远返回 Hello World
? 显然不是,假如我们修改 greeting
的值,就会影响 greet
函数的输出。即函数 greet
其实是 依赖外部状态 的。
那我们做以下修改:
function greet (greeting, name) { return greeting + ' ' + name } console.log(greet('Hi', 'Savo')) // Hi Savo
将 greeting
参数也传入,这样对于任何输入参数,都有与之对应的唯一的输出参数了,该函数就符合了第一个特点。
没有副作用
副作用的意思是,这个函数的运行,不会修改外部的状态。
下面再看反面典型:
const user = { username: 'savokiss' } let isValid = false function validate (user) { if (user.username.length > 4) { isValid = true } }
可见,执行函数的时候会修改到 isValid
的值(注意:如果你的函数没有任何返回值,那么它很可能就具有副作用!)
那么我们如何移除这个副作用呢?其实不需要修改外部的 isValid
变量,我们只需要在函数中将验证的结果 return
出来:
const user = { username: 'savokiss' } function validate (user) { return user.username.length > 4; } const isValid = validate(user)
这样 validate
函数就不会修改任何外部的状态了~
为什么要用纯函数?
你可能听过 纯函数
有不少优点,如果你经手过各种难维护的函数,你就更应该考虑使用 纯函数
。
可测试性(Testable)
让我们先用不纯的 greet
方法来做单元测试:
// jest 语法 describe('greet', function() { it('shows a greeting', function() { expect(greet('Savo')).toEqual('Hello Savo') }); });
如果我们修改了 greeting
变量为 Hi
,上面的测试就会失败了,这本质上不应该发生。
那我们如果换成纯函数版本的 greet
,所有都是那么自然~ 只需要修改单元测试中传入的参数即可!
可缓存性(Cacheable)
纯函数可以根据输入来做缓存。实现缓存的是一种叫作 memorize
的技术。
下面的代码来自 Vue 源码:
/** * Create a cached version of a pure function. * 只适用于缓存 接收一个字符串为参数的 fn */ export function cached (fn) { const cache = Object.create(null) return function cachedFn (str) { const hit = cache[str] return hit || (cache[str] = fn(str)) } } /** * Capitalize a string. */ export const capitalize = cached((str) => { return str.charAt(0).toUpperCase() + str.slice(1) })
capitalize
即为缓存后的函数,如果多次调用就会返回缓存后的值,从而节省计算资源,而这一切的前提都建立在传入 cached
中的那个函数为纯函数的基础上。
可移植性 / 自文档化(Portable / Self-Documenting)
由于纯函数是自给自足的,它需要的东西都在输入参数中已经声明,所以它可以任意移植到任何地方。
并且纯函数对于自己的依赖是 诚实的,这一点你看它的 形参 就知道啦~正所谓 形参起的好,注释不用搞~(双押!)纯函数就是这么个正直的小可爱~
总结
好啦,我们已经大概了解了纯函数,它对于我们写出良好代码有着重要的意义,同时也是函数式编程中的精髓。本来本篇是想单纯介绍纯函数的,但是想起来了柯里化 (curry) 也没有讲过,那么下次有机会就讲一讲柯里化吧~
We'll see!
参考链接
本文首发于公众号:码力全开(codingonfire)
本文随意转载哈,注明原文链接即可,公号文章转载联系我开白名单就好~
这篇关于浅析 FP:JavaScript 中的纯函数的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程