JavaScript代码简化技巧实例解析

2023-07-17 00:28:03 75

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

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

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

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

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

何时需要更改值呢？首先，您可以拥有一个数组：

constfruits=['apple','orange','banana']

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

constallFruits=[...fruits,'pineapple']

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

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

摆脱循环

考虑以下循环：

varlist=[];
vari=0;
while(i
函数编程方法去掉了while循环，并使用map将行处理为一个列表。
constlist=rows.map(r=>({
childAddress:r[1],
action:'switchToBackupNode2',
role:'edge'
}))
除了摆脱循环之外，这段代码还删除了临时变量row和message以及循环变量i。
结果更具可读性，非常清晰。
为了公平起见，要获得此信任级别，您需要首先了解map函数。map函数在函数式编程中无处不在，因此学习它是过渡到FP的重要步骤。
map是程序员用于列表处理的函数之一。处理列表中的数据是FP的重要组成部分，您还应该学习其他列表处理功能：最重要的是reduce和filter函数。
删除if..else


在我的简化代码的实践中，删除if是一个有用的策略。有几种策略可以用于从代码中删除if语句，并且应用其中任何一种通常都会得到更清晰、更容易理解的结构。
让我们看一下删除if语句的一些策略。
三元运算符
三元运算符是我从变量赋值中去掉if语句的主要工具。
考虑以下：
letmessage;
if(person!==null){
message=`hello,${person}!`
}else{
message='heythere!'
}
上面的代码中有两个问题：
我必须使用非const变量message，因为对于if结构，我无法在变量声明中立即给message赋值。

考虑到它只完成了声明变量和有条件地为变量赋值的简单任务，代码相当冗长和复杂。

使用三元运算符?可以在一行中完成相同的工作：
constmessage=person!==null?`hello,${person}!`:'heythere!'
布尔运算符&&和||


布尔运算符&&和||为if语句提供有效的替代方法。
不要这样做：

if(value){

doStuff(value)

}else{

doStuff(1)

}



改进：
doStuff(value||1)


这里的逻辑或操作符||提供了向函数传递默认值的快速方法。每次不知道或不确定变量是否具有值时，都可以使用相同的技巧：使用||作为前缀提供默认值。
这是一个如何使用逻辑与运算符&&的示例。首先，使用if的版本：

if(data){

sendData(data.value);

}



然后我们使用&&删除if：
data&&sendData(data.value)


在这里，我们使用&&来首先检查数据变量是否包含值。如果没有这个检查，当没有值时代码就会崩溃(换句话说，值为null或undefined)。
在这里使用这些运算符时，我们依赖布尔表达式的短路求值。&&和||运算符，当第一部分错误时，JavaScript不会计算表达式的后半部分。
Map和查找
使用map作为查找list是替换一系列if语句的有效方法。考虑以下：
letlanguage;
if(country==='FI'){
	language='Finnish'
}elseif(country==='SE'){
	language='Swedish'
}elseif(country==='USA'){
language='English(American)'
}elseif(country==='UK'){
language='English(UK)'
}//etc...
更简洁的方法是使用国家/语言对的Map。
constlanguages=newMap([
['FI','Finnish'],
['SE','Swedish'],
['USA','English(American)'],
['UK','English(UK)'],
])
constlanguage=languages.get('SE')
console.log(language)//Swedish
第二种实现要简单得多。该代码立即显示出它的意图。另外，它将language变量转换为使用const。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JavaScript代码简化技巧实例解析

热门推荐

随机推荐