gpt4 book ai didi

JavaScript代码简化技巧实例解析

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JavaScript代码简化技巧实例解析由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

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

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

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

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

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

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

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

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

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

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

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

摆脱循环 。

考虑以下循环:

?
1
2
3
4
5
6
7
8
9
10
11
12
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将行处理为一个列表.

?
1
2
3
4
5
const list = 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 语句的主要工具.

考虑以下:

?
1
2
3
4
5
6
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) 。

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

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

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

然后我们使用 && 删除 if :

data && sendData(data.value) 。

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

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

Map 和 查找 。

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

?
1
2
3
4
5
6
7
8
9
10
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.

?
1
2
3
4
5
6
7
8
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.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.

原文链接:https://www.cnblogs.com/jiangweichen88/p/13528164.html 。

最后此篇关于JavaScript代码简化技巧实例解析的文章就讲到这里了,如果你想了解更多关于JavaScript代码简化技巧实例解析的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com