php中文网

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

php中文网

在 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. 它可以防止与“虚假”值评估相关的意外行为。

结论

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

以上就是避免 JS/TS 中不精确布尔计算的陷阱的详细内容,更多请关注php中文网其它相关文章!