编写精炼的JavaScript代码:避免多余的Else, 尽早Return

658 阅读2分钟

译者:aztack

原文链接

[Me](/ ""I'm watching you read."")

Avoid Else, Return Early

如果你懒得读全文,看这些就够了

  • 一旦发现方法(或函数)无法继续执行则立即返回。

  • 通过用 if/return 替换 if/else来减少过多的缩进

  • 尽量减少方法(或函数)中“干或”代码的缩进。

  • 错误处理是“噪音”。(译者:会影响代码的易读性)


程序员一直被教导:“每个函数只能有一个退出点” 比如,“只从一个地方return”:

 function () {
  var result;

  if () {
    result = x
  } else {
    if () {
      result = y
    } else {
      result = z
    }
  }

  return result // this return is single and lonely
}

我认为这个编程指导意见不够详尽:

  • “给同一个result变量赋值”无法说名你的应真正的意图其实是:“这是最后要返回的变量,到此为止,后面不再做其他处理了”

  • 没有回答这个问题:“对这个result对象的处理结束了么?以后还能修改么?谁会修改?”

  • (result变量)可能会被错误地修改

  • (间接)鼓励了一个或多个if/else

示例: if/else 重构

我们来看一下下面这段典型的node回调代码:

 function(err, results) {
  if (!err) {
    doOtherStuff()
    doMoreStuff()
    // ... etc
    // ... etc
  } else {
    handleError(err)
  }
}

第一个问题:错误处理被放在else里,并放还在方法的最后面。当if后面的""happy path""(代码)很长的时候,读者就不知道到底处理的是什么错误了。

那我们尝试重构一下:将函数要做的“正经”事情放在后面。将处理各种特殊情况的代码集中放在最前面:

 function(err, results) {
  if (err) {
    handleError(err)
  } else {
    doOtherStuff()
    doMoreStuff()
    // ... etc
    // ... etc

  }
}

写JavaScript代码很容出现过多的缩进,我们应该极力避免。 像上面这种情况就可以重构为如下代码:去掉else, 减少一层缩进。在if里直接return

 function(err, results) {
  if (err) {
    handleError(err)
    return
  }

  doOtherStuff()
  doMoreStuff()
  // ... etc
  // ... etc
}

这样做不仅仅是将一坨代码向前缩进。更重要的是,函数的主要功能被提到了level 0。(这一点很重要)

在JavaScript中我们不太关心方法(或函数)返回值。所以我们可以将if部分代码缩减为一行,从而移除多余的花括号: (译者:由于浏览器已经支持一行代码中的多步调试,这样做不会给代码调试带来不便)

 function(err, results) {
  if (err) return handleError(err)

  doOtherStuff()
  doMoreStuff()
  // ... etc
  // ... etc
}

通过将错误处理放在一行,同样遵守“每行一个逻辑语句”的编程指导原则。

这样写的另一个好处是:return关键字会被高亮。与多个result = something相比,这样做return一目了然。

综上,最终代码:

  • 方法(或函数)处于最低的缩进等级

  • 没有不必要的缩进

  • 代码更短小精炼

以上