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

更新日期: 2020-04-27阅读: 1.7k标签: 重构

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语句可以用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语句。

原文:https://levelup.gitconnected.com/

链接: https://fly63.com/article/detial/9192

web页面的重构和回流【转载】

在了解什么是重构和回流之前,我们应该先看看浏览器是怎么渲染的?浏览器的渲染过程;什么是重构和回流;什么操作会引起重绘、回流;浏览器对回流的优化;如何减少回流、重绘

web页面重构和前端性能优化

在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为;你有用过哪些前端性能优化的方法?减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适

代码重构!你敢吗?

我从基础架构部门,转调到业务部门。技术负责人想让我搞定业务系统的稳定性问题。当时的业务系统确实存在不少问题,不过我初来乍到,对整体系统不熟悉,就想在熟悉一段时间后再动手。

代码重构的基本认知

代码不可能在第一次就写得完美,这是一个持续修改的过程,那么应该怎么来进行呢?好代码的检验标准就是人们是否能轻而易举地修改它。

前端项目重构要点总结

项目是公司主打业务产品之一的可视化子项目,与其他子项目几乎没有耦合,所以可以单独拎出来重构。具体业务不作描述。技术主要用的是Vue2系列和JavaScript,还有一个自研的可视化工具库。第一个重构原因就是没有引入静态类型

重构保持函数的单一职责

单一职责的定义可以理解为:一个对象或者方法,只做一件事。遵守单一职责的实例太多了,下面简单列举一下。说是这样说,但是大家看着可能会有点懵,看不出来遵守单一原则有什么好处,下面看一个实例。

指尖前端重构(React)技术调研分析

React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。Angular出现最早,但其在原理上并没有React创新的性能优化,且自身相对来说显得笨重。Vue出现最晚,其核心原理学习了React

web前端代码重构

1. 整理一套vscode中格式化配置,在页面保存时自动格式化,团队成员格式统一(搭配eslint)。2. 整理项目中的命名(不要嫌长,但也不能过于冗长,尽量能让人一眼看明白)

代码重构的实战经验和那些坑

我在一家创业公司的小团队里搞软件开发。彼时我们有一位真实的企业客户,且软件的第一版也已发布。开发按进度完工,在发布时我欣喜若狂

前端的自动化重构

过去,我一直想着抽时间写一个小的前端工具,以对代码进行自动化的重构。但是呢,经过我再三的考虑,我暂时取消了这个打算 —— 主要是没时间

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!