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

John Au-Yeung 来源：medium 译者：前端小智

点赞再看，养成习惯

本文 GitHub github.com/qq449245884… 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

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语句。

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：levelup.gitconnected.com/javascript-…

---

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub github.com/qq449245884… 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。