函数或变量 rtenslearn_c 无法识别_用于简化和改进代码的函数式编程技巧

函数式编程可以使您的代码更简单。简单意味着代码易于阅读和理解,可测试和可维护。

在本文中,我描述了一些函数式编程(FP)技巧,您可以使用它们来简化代码,从而使代码更好。

63ebeef80ae2433433bdb54a3988aa03.png

摆脱临时变量和不变性原则

函数式编程倾向于不变性,这种不变性原则意味着在初始化变量之后不会更改它们的值。同样,创建对象或字符串后,您也无需对其进行突变。

如果使用JavaScript编程,则所有变量定义都应使用 const。对于正在阅读您的代码的任何人,常量定义都可以让您高枕无忧:它保证永远不会重新分配变量,因为重新分配是不可能的,所以读者的大脑从跟踪和识别代码中重新分配的负担中解脱出来。

何时需要更改值呢?首先,您可以拥有一个数组:

const fruits = ['apple', 'orange', 'banana']

要将新水果添加到此列表中,该怎么办?解决方案是用新的或更新的值初始化一个新的常量变量,我们可以使用点扩展符复制现有的 fruits 值:

const allFruits = [...fruits, 'pineapple']

您应该在代码的任何地方都遵循不变性原则,因为如果这样做,您的代码将变得更干净。

您知道 fruits 变量的值永远不会改变,并且您第一次看到变量的声明时就知道这一事实,初始化后,在任何可见的 fruits 变量处,您都知道。

663e395cbc55a29b94438e69a2c0a357.png

摆脱循环

考虑以下循环:

var list = [];var i = 0;while (i < rows.length) {    var row = rows[i];    var message = {        childAddress: row[1],        action: 'switchToBackupNode2',        role: 'edge'    };    list.push(message);    i += 1;}

函数编程方法去掉了while循环,并使用map将行处理为一个列表。

const list = rows.map(r => ({     childAddress: r[1],    action: 'switchToBackupNode2',    role: 'edge' }))

除了摆脱循环之外,这段代码还删除了临时变量 rowmessage 以及循环变量 i

结果更具可读性,非常清晰。

为了公平起见,要获得此信任级别,您需要首先了解map函数。map函数在函数式编程中无处不在,因此学习它是过渡到FP的重要步骤。

map是程序员用于列表处理的函数之一。处理列表中的数据是FP的重要组成部分,您还应该学习其他列表处理功能:最重要的是 reducefilter 函数。

ae4886ae70184acd65835dcf97e65530.png

删除if..else

在我的简化代码的实践中,删除 if 是一个有用的策略。有几种策略可以用于从代码中删除 if 语句,并且应用其中任何一种通常都会得到更清晰、更容易理解的结构。

让我们看一下删除 if 语句的一些策略。

三元运算符

三元运算符是我从变量赋值中去掉 if 语句的主要工具。

考虑以下:

let message;if (person !== null) {  message = `hello, ${person}!`} else {  message = 'hey there!'}

上面的代码中有两个问题:

  • 我必须使用非 const 变量 message,因为对于 if 结构,我无法在变量声明中立即给 message 赋值。
  • 考虑到它只完成了声明变量和有条件地为变量赋值的简单任务,代码相当冗长和复杂。

使用三元运算符? 可以在一行中完成相同的工作:

const message = person !== null ? `hello, ${person}!` : 'hey there!'

布尔运算符 && 和 ||

布尔运算符 &&||if 语句提供有效的替代方法。

不要这样做:

if (value) {  doStuff(value)} else {  doStuff(1)}

改进:

doStuff(value || 1)

这里的逻辑或操作符 || 提供了向函数传递默认值的快速方法。每次不知道或不确定变量是否具有值时,都可以使用相同的技巧:使用 || 作为前缀提供默认值。

这是一个如何使用逻辑与运算符 && 的示例。首先,使用 if 的版本:

if (data) {  sendData(data.value);}

然后我们使用 && 删除 if

data && sendData(data.value)

在这里,我们使用 && 来首先检查数据变量是否包含值。如果没有这个检查,当没有值时代码就会崩溃(换句话说,值为 nullundefined)。

在这里使用这些运算符时,我们依赖布尔表达式的短路求值。&&|| 运算符,当第一部分错误时,JavaScript不会计算表达式的后半部分。

Map 和 查找

使用 map 作为查找 list 是替换一系列if语句的有效方法。考虑以下:

let language;if (country === 'FI') {language = 'Finnish'} else if (country === 'SE') {language = 'Swedish'} else if (country === 'USA') {  language = 'English (American)'} else if (country === 'UK') {  language = 'English (UK)'} // etc...

更简洁的方法是使用国家/语言对的Map。

const languages = new Map([  ['FI', 'Finnish'],  ['SE', 'Swedish'],  ['USA', 'English (American)'],  ['UK', 'English (UK)'],])const language = languages.get('SE')console.log(language) // Swedish

第二种实现要简单得多。该代码立即显示出它的意图。另外,它将 language 变量转换为使用 const

小函数

函数式编程与函数有关,最好编写许多小函数,而不要写一些长函数。将代码分解成更小的模块的主要原因是更小(更短)的代码块更容易独立理解,更小的部件也更容易测试和维护。

借助我在此处显示的技巧,您的代码可以更紧凑。这是一个重要的目标,也是学习这些技巧的绝佳理由,更重要的是,学习函数式编程。


如果对你有所启发和帮助,可以点个关注、收藏,也可以留言讨论,这是对作者的最大鼓励。

作者简介:Web前端工程师,全栈开发工程师、持续学习者。

现在关注《前端外文精选》微信公众号,还送某网精品视频课程网盘资料啊,准能为你节省不少钱!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值