避免 JS/TS 中不精确布尔计算的陷阱

在 web 开发领域，我们经常面临乍一看很简单的挑战，但很快就会变成复杂的难题。最近，我在 angular 项目中经历了一次有趣的经历，它提醒我在 typescript 中评估布尔条件时精确度的重要性。我想与您分享这个教训，希望它能帮助您避免同样的陷阱。

问题的背景

初步情况

在我的 angular 项目中，我遇到了涉及四个布尔变量的情况。在这四个中，两个依赖于通过可观察的来自后端的异步数据。目标很简单：只有当这两个特定变量为假时，条件才应该为真。

最初的方法及其局限性

最初，我选择了一种对我来说似乎合乎逻辑且简洁的方法：

if (terrainpret && arbitrearrive && 
    !equipelocaleabsente && !equipevisiteuseabsente) {
  // commencer le match
}

这种方法看起来很优雅：使用感叹号（！）来确保异步变量为 false。然而，我很快发现这个方法隐藏着一个微妙的陷阱。

布尔求值陷阱

启示录

当我意识到我的代码没有按预期运行时，问题就出现了。经过调查，我意识到我忽略了 typescript 中布尔求值的一个关键方面。

技术说明

在 typescript 中，有几个值被认为是“falsy”，也就是说，它们在布尔上下文中被评估为 false。这些值包括：

• 假
• 0
• “”（空字符串）
• 空
• 未定义
• nan

就我而言，在从后端接收值之前，异步变量可能是未定义的。因此，例如，条件 !equipelocaleabsente 不仅在变量为 false 时为 true，而且在变量未定义时也为 true。

解决方案：明确

纠正的方法

为了解决这个问题，我必须更明确地表达我的情况：

if (terrainPret && arbitreArrive && 
    equipeLocaleAbsente === false && equipeVisiteuseAbsente === false) {
  // Commencer le match
}

这种方法确保异步变量特别为假，而不仅仅是“假”值。

精度的好处

这个解决方案有几个优点：

1. 它消除了评估条件时的歧义。
2. 它使代码更具可读性并且其意图更明确。
3. 它可以防止与“虚假”值评估相关的意外行为。

结论

这次经历提醒我代码精确和清晰的重要性，尤其是在处理异步操作和布尔求值时。它还强调需要充分理解我们使用的语言的细微差别。