专栏首页终身学习者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;
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语句很长,这样容易出错。 因此,如果可以的话,我们应该用较短的代码代替它们。许多switch语句可以用mapobject替换。例如,如果我们有下面的switch语句:

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

我们可以将其替换为objectmap,如下所示:

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作为键。

总结

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

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

最后,应该尽可能用MapObject替换switch语句。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 增强型的 <input type=number>

    input 标签的 number 类型提供了一种处理数字的好方法。 我们可以使用min和max属性设置界限,并且可以通过向上和向下键来添加或减少1,如果设置st...

    前端小智@大迁世界
  • 这三个精巧且很棒 JS 库,值得你亲手试试

    在本文中,介绍3个鲜为人知,但功能非常强大且体积很小的 JavaScript 库,这些可以帮助提高开发效率,减轻开发难度,让你加班少少的,请收纳。

    前端小智@大迁世界
  • Web 性能优化:理解及使用 JavaScript 缓存

    随着我们的应用程序的不断增长并开始进行复杂的计算时,对速度的需求越来越高(?),所以流程的优化变得必不可少。 当我们忽略这个问题时,我们最终的程序需要花费大量时...

    前端小智@大迁世界
  • 科大讯飞胡郁演讲实录:人工智能是这个时代最伟大的魔法师

    唯物按:9月份锤子的发布会结束后,科大讯飞股票应声上涨,成为罗永浩相声专场的最大赢家。 这其中有一些运气的成分,但在这种运气之前,讯飞已经做了很多铺垫工作。科大...

    AI研习社
  • 【译】用于肺部CT肺结节分类的深度特征学习摘要

    zhwhong
  • 《从0到1学习Flink》—— Flink 项目如何运行?

    之前写了不少 Flink 文章了,也有不少 demo,但是文章写的时候都是在本地直接运行 Main 类的 main 方法,其实 Flink 是支持在 UI 上上...

    zhisheng
  • Metasploitable 2系列教程:漏洞利用之Unreal IRCd 3.2.8.1

    这篇文章中,将会介绍如何利用 Metasploitable 2 上 Unreal IRCd service 存在的漏洞;学习如何对网络服务进行枚举,及如何定义和...

    FB客服
  • 任正非最新讲话:失败了就涨工资,成功了就涨级

    没有基础研究,对未来就没有感知,没有感知就做不到领先。早些年华为开始在全球的研究布局,这十多年,欧洲、日本、加拿大都是我们的重点。华为在欧洲的研究投入取得了很大...

    钱塘数据
  • JavaScript面向对象之对象的声明、遍历和存储

    Leophen
  • 浅谈FPGA与音频处理器的结合

    FPGA通常是面向通信行业,尽管其主要开发者仍然专注于通信应用, 但他们越来越关注存储和服务器市场。

    半吊子全栈工匠

扫码关注云+社区

领取腾讯云代金券