避免在JavaScript代码中使用if语句的方式方法

英文 | https://medium.com/javascript-in-plain-english/avoiding-if-statements-in-our-javascript-code-29406677268e

翻译 | web前端开发（ID：web_qdkf)

在JavaScript代码中使用if语句，会让人有时候觉得很痛苦。 其实，在很多地方，我们可以不需要它们。

我们可以将if语句替换为其他类型的代码，以使我们的代码更短，更清晰。

在本文中，我们将探讨可以在JavaScript代码中替换if语句的地方。

三元运算符

如果我们要返回具有一个条件的一个事件，否则返回其他东西，则三元运算符很有用。

例如，我们可以这样写：

const bar = foo ? 'foo' : 'bar';

在上面的代码中，如果foo为true，则返回'foo'。否则，我们返回'bar'。

然后，如果foo为true，则bar为'foo'。否则，bar为'bar'。

上面代码比以下简短得多：

const bar = ((foo) => {  
if (foo) {    
return 'foo'  
}  
return 'bar'
})(foo);

使用三元运算符，我们不必使用内部if语句定义一个匿名函数，如果foo为true，则返回“ foo”，否则返回“ bar”。

另外，定义后，我们不必立即使用foo调用它。因此，它更容易读写。

但是，我们不应该通过嵌套它们来滥用三元运算符：

const foo = a ? b ? c ? 'foo' : 'bar' : 'baz' : 'qux';

上面的代码很难阅读，因为我们必须在括号内加括号以在我们自己的脑海中划定界限。

这在我们的大脑上很难解决，因此我们不应该采用上述表达。

短路表达式

我们将使用&&或|| 的操作员称为短路操作员。

如果第一个操作数为真，则&&运算符对于在第二个操作数中运行代码很有用。|| 如果第一个操作数为false，则运算符对于在第二个操作数中运行代码很有用。

例如，我们可以按以下方式使用它：

const isOnline = true;
const makeRequest = () => {  
//...
}
isOnline && makeRequest();

在上面的代码中，如果isOnline为true，则调用makeRequest。因此，由于isOnline为true，所以我们调用makeRequest函数。

这将替换以下if语句：

if (isOnline) {  makeRequest();}

如我们所见，在使用相同的isOnline和makeRequest值的情况下，使用if语句需要3行代码来完成相同的操作。

与|| 运算符，如果第一个操作数为false，则可以使用它来设置默认值。

例如，我们可以编写以下代码：

const foo = null;
const bar = foo || 'abc';

在上面的代码中，我们将foo设置为null，这是false。因此，在第二行，|| 运算符将计算foo常量，该常量为null，因此也为false。

然后，由于它是false，它将继续评估第二个操作数，然后将其返回。

因此，bar的值为'abc'。编码：

const bar = foo || 'abc';

替换以下代码：

const bar = ((foo) => {
  if (!foo) {
    return 'abc'
  }
  return foo;
})(foo)

如我们所见，我们必须定义一个匿名函数，然后调用它。

该函数将foo作为参数，然后在其内部检查foo是否虚假。如果是虚假的，那么我们返回'abc'。否则，我们返回foo。

||的替代品 运算符更长，更复杂。

避免使用switch语句

switch语句的许多用法可以用更简单的方法代替。例如，代替编写以下switch语句：

const getDescription = (breed) => {
  switch (breed) {
    case 'border':
      return 'kind dog';
    case 'pitbull':
      return 'angry dog';
    case 'german':
      return 'smart dog';
    default:
      return ''
  }
}
const desc = getDescription('border');

我们可以将值放在对象中，如下所示：

const descs = {  
'border': 'kind dog',  
'pitbull': 'angry dog',  
'german': 'smart dog',
}
const desc = descs['border']

在上面的代码中，我们将case值作为属性，将返回值作为属性的值。

然后，我们可以像在最后一行中一样获取值，而不用调用longyswitch语句。

如果要获取默认情况，可以使用||。如下：

const desc = descs['foo'] || '';

现在，我们将一个长的switch语句缩小为一个小对象。

结论

在许多情况下，我们可以减少if并将语句切换为较短的代码。我们应该记住要使用三元运算符，短路运算和将switch语句更改为字典对象的快捷方式，以使我们的代码更短，更清晰。