JavaScript重构技巧-让函数简单明了

  发布时间:2025-11-05 15:22:59   作者:玩站小弟   我要评论
本文转载自微信公众号「大迁世界」,转载本文请联系大迁世界公众号。JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很 。

本文转载自微信公众号「大迁世界」,重构转载本文请联系大迁世界公众号。技巧

JavaScript 是让函一种易于学习的编程语言,编写运行并执行某些操作的数简程序很容易。然而,单明要编写一段干净的重构JavaScript 代码是很困难的。

在本文中,技巧我们将研究如何让我们的让函函数更清晰明了。

对对象参数使用解构

如果我们希望函数接收很多参数,数简那么应该使用对象。单明在此基础上,重构我们就可以使用解构语法提取我们需要的技巧参数。

例如,让函对于对象参数,数简我们可能会这样使用:

const greet = (obj) => {   return `${obj.greeting},单明 ${obj.firstName}${obj.lastName}`; } 

上面的语法,我们可以使用解构方式会更优雅:

const greet = ({   greeting,   firstName,   lastName }) => {   return `${greeting}, ${firstName}${lastName}`; } 

这样我们可以少写很多重复的东西,命名也会更加清晰。

命名回调函数

好的命名会使阅读代码更容易,回调函数的命名也是一样的,例如下面不好的亿华云计算命名方式:

const arr = [1, 2, 3].map(a => a * 2); 

我们可以这样分开命名:

const double = a => a * 2; if (score === 100 ||   remainingPlayers === 1 ||   remainingPlayers === 0) {   quitGame(); }  const arr = [1, 2, 3].map(double); 

现在我们知道我们的回调函数实际上是用来加倍原始数组的每个元素的。

让条件句具有描述性

通过在自己的函数的条件语句中编写条件表达式,可以使条件语句更具描述性。

对于复杂的条件判断, 我们可以单独使用函数来表示,会让条件语句更具描述性,例如下面代码:

if (score === 100 ||   remainingPlayers === 1 ||   remainingPlayers === 0) {   quitGame(); } 

当条件多时,我们可以用函数来表示:

const winnerExists = () => {   return score === 100 ||     remainingPlayers === 1 ||     remainingPlayers === 0 } if (winnerExists()) {   quitGame(); } 

这样,我们就知道这些条件是检查游戏代码中是否存在赢家的条件。

在第一个例子中,我们有一个很长的表达式在括号里,大多数人可能不知道它在判断什么。但在第二个例子中,一旦我们把它放到一个命名函数中,我们就知道它大概在判断什么了。

在条件语句中拥有一个命名函数比在拥有一堆布尔表达式要清晰得多。

用 Map 或 Object替换 switch 语句

由于 switch语句很长,这样容易出错。因此,如果可以的话,我们应该用较短的WordPress模板代码代替它们。许多switch语句可以用map或object替换。例如,如果我们有下面的switch语句:

const getValue = (prop) => {   switch (prop) {     case a: {       return 1;     }     case b: {       return 2;     }     case c: {       return 3;     }   } } const val = getValue(a); 

我们可以将其替换为object或map,如下所示:

const obj = {   a: 1,   b: 2,   c: 3 } const val = obj[a]; 

如我们所见,switch 语法很长。我们需要嵌套多个带有多个return语句的块,只是为了获得给定prop值的返回值。

相反使用对象,我们仅仅需要一个对象就可以了:

const obj = {   a: 1,   b: 2,   c: 3 } 

使用对象还有一个好处,就是对于键不必是有效的标识符号,这样这增加了更多的灵活性。

我们还可以使用map替换对象,如下所示:

const map = new Map([[a, 1], [b, 2], [c, 3]]) const val = map.get(a) 

如我们所见,使用Map时,代码也短很多。我们通过传递一个数组,数组中的每项包含键和值。然后,我们仅使用Map实例的get方法从键中获取值。

Map优于对象的一个好处是,源码下载我们可以将数字,布尔值或对象等其他值用作键。而对象只能将字符串或symbol作为键。

总结

使用解构语法可以使对象参数更清楚,更短。这样,可以选择性地将属性作为变量进行访问。

通过将条件表达式放在它自己的命名函数中,可以使条件表达式更具描述性。同样,我们应该为回调函数命名,以便更容易地读取代码。

最后,应该尽可能用Map和Object替换switch语句。

  • Tag:

相关文章

  • 将MX3变成U盘(MX3U盘模式的设置和使用技巧)

    摘要:MX3是一款功能强大的智能手机,除了出色的拍照和流畅的操作系统外,它还具备了将手机作为U盘使用的功能。通过将MX3设置为U盘模式,您可以将手机中的文件快速传输到其他设备上,极大地方...
    2025-11-05
  • 最佳实践|如何使用c++开发redis module

    来源:阿里云开发者阿里妹导读本文将试着总结Tair用c++开发redis module中遇到的一些问题并沉淀为最佳实践,希望对redis module的使用者和开发者带来一些帮助部分最佳实践也适用于c
    2025-11-05
  • 域名对网站的优化有什么影响?如何选择域名进行优化?

    域名对网站的优化有什么影响?如何选择域名进行优化?域名+空间+系统内容组成了一个网站整体,所以每一步环节对网站的发展都有着不可忽视的意义,特别是网站域名对网站的推广意义很大,只要是接触过网站的站长都知
    2025-11-05
  • ink域名怎么样?ink域名有什么价值?

    ink域名怎么样?ink域名有什么价值?目前,域名市场上新诞生了数千个顶级域名,但拥有独特优雅的专属创作者的域名却寥寥无几,中国工业和信息化部批准的创意后缀ink也是独一无二的。下面聚名网就带大家看看
    2025-11-05
  • 金立S9分辨率如何?(金立S9分辨率性能和体验一览)

    摘要:随着智能手机的快速发展,分辨率成为了消费者选择手机的一个重要指标之一。本文将深入探讨金立S9的分辨率性能和体验,为大家提供一个全面的了解。文章目录:1.高清+显示效果出...
    2025-11-05
  • 持续部署:提高敏捷加速软件交付(内含教程)

    在当今快节奏的数字化环境中,企业不断寻求更快地交付软件、增强客户体验并在竞争中保持领先的方法。持续部署Continuous Deployment, CD)已成为一种改变游戏规则的方法,使企业能够简化软
    2025-11-05

最新评论