js回调函数例子_【第 232 期】JavaScript重构技巧让函数简单明了-CSDN博客

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

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

原文：https://levelup.gitconnected.com/javascript-refactoring-tips-making-functions-clearer-and-cleaner-c568c299cbb2

相关热门推荐 CSS 中你需要知道 auto 的一切！【第 231 期】CSS 中关于 Overflow ，你需要了解的这些知识点！CSS中的混合模式，制作高级特效的必备技巧CSS 伪元素的一些罕见用例我发现了7个关于 CSS backgroundImage 好用的技巧Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点Vue 中，如何将函数作为 props 传递给组件如何写出优雅的 JS 代码，变量和函数的正确写法「前端编程挑战 24」HTML+CSS3 实现粘性导航特效5个很棒的 React.js 库，值得你亲手试试！2020年面向前端开发人员的10个很棒的 JS 库通过几个事例，就可以说明 for...of 循环在 JS 是不可或缺