DevTips：使用早期返回来避免嵌套条件

作为一名开发人员，你会遇到一些应该被识别为代码异味的模式。其中大多数都有众所周知的解决方案。今天我想谈谈如何使用早期返回来避免 else 语句和嵌套条件。

举个例子。我需要调用服务器来查询数据库中是否存在某个用户。调用该函数的函数还会返回一个正在加载的指示符，以便我通知用户。

render() {
  const personToLookFor = 'Thierry'
  const [result, loading] = doesPersonExists(personToLookFor)

  if (!loading) {
    let message
    if (result) {
      message = `${personToLookFor} already exists.` 
    } else {
      message = `${personToLookFor} doesn't exist.`
    }
    return message
  } else {
    return 'Loading...'
  }
}

正如你所见，嵌套的条件和 if/else 语句很难阅读。乍一看，你根本看不懂这段代码到底是什么意思。我敢打赌你以前肯定遇到过这种模式。让我们稍微重构一下，让它更易于维护！

如果呼叫仍处于挂起状态，我们可以直接退出该功能并显示加载指示器。

render() {
  const personToLookFor = 'Thierry'
  const [result, loading] = doesPersonExists(personToLookFor)

  if (loading) return 'Loading...'

  let message
  if (result) {
    message = `${personToLookFor} already exists.` 
  } else {
    message = `${personToLookFor} doesn't exist.`
  }
  return message
}

是不是更清晰一些？我们还可以去掉 else 语句，直接返回 if 语句中的消息。

render() {
  const personToLookFor = 'Thierry'
  const [result, loading] = doesPersonExists(personToLookFor)

  if (loading) return 'Loading...'

  if (result) {
    return `${personToLookFor} already exists.` 
  }
  return `${personToLookFor} doesn't exist.`
}

它也消除了使用消息变量的必要性。一切就绪了🙌

希望它能对你有帮助！

欢迎反馈🙏如果您有任何问题，请发推文给我@YvonnickFrin！

文章来源：https://dev.to/yvonnickfrin/devtips-use-early-returns-to-avoid-nested-conditions-4i51