在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

microsoft/Web-Dev-For-Beginners

菜单

条件判断

相关源文件

本技术文档涵盖了 JavaScript 的决策制定能力和控制流结构。JavaScript 提供了多种方法来控制基于指定条件执行的代码块。理解这些机制对于编写健壮、高效且可维护的代码至关重要。

有关 JavaScript 数组和循环（它们经常与决策制定结构结合使用）的更多信息，请参阅 数组和循环。

目的与基础

JavaScript 中的决策制定允许您的代码根据不同的输入或状态执行不同的操作。这使得

  • 基于用户输入的动态行为
  • 错误处理和验证
  • 条件渲染和数据处理
  • 基于状态的逻辑

JavaScript 中所有决策制定的基础是布尔（Boolean）数据类型，它只能有两个值：true 或 false。

来源： 2-js-basics/3-making-decisions/README.md19-27

布尔值

布尔值对于 JavaScript 中的决策制定至关重要，因为它们代表了任何条件可能发生的两种结果：true 或 false。

布尔值是以英格兰数学家、哲学家和逻辑学家乔治·布尔（George Boole，1815-1864）的名字命名的，他发展了布尔代数。

来源： 2-js-basics/3-making-decisions/README.md19-27

比较运算符和布尔值

运算符用于通过比较值并返回布尔结果来评估条件。这些运算符构成了 JavaScript 中决策制定语法的基石。

符号描述示例
<小于：如果左侧的值小于右侧的值，则返回 true5 < 6 // true
<=小于或等于：如果左侧的值小于或等于右侧的值，则返回 true5 <= 6 // true
>大于：如果左侧的值大于右侧的值，则返回 true5 > 6 // false
>=大于或等于：如果左侧的值大于或等于右侧的值，则返回 true5 >= 6 // false
===严格相等：如果两个值相等且数据类型相同，则返回 true5 === 6 // false
!==不相等：返回与严格相等运算符相反的布尔值5 !== 6 // true

来源： 2-js-basics/3-making-decisions/README.md30-42

JavaScript 中的决策制定流程

来源： 2-js-basics/3-making-decisions/README.md44-80 2-js-basics/3-making-decisions/README.md162-186

If 语句

The if 语句是 JavaScript 中最基本的条件执行形式。它会检查一个条件是否为真，如果为真则执行代码块。

实际上，您通常会使用比较运算符来构成条件。

来源： 2-js-basics/3-making-decisions/README.md44-65

If...Else 语句

The else 语句通过提供条件为 false 时的替代代码路径来扩展基本的 if 语句。

带变量的示例

这种模式通常用于应用程序中的二元决策路径。

来源： 2-js-basics/3-making-decisions/README.md67-84

逻辑运算符

为了创建更复杂的条件，JavaScript 提供了逻辑运算符，它们可以组合多个布尔表达式。

符号描述示例
&&逻辑与：仅当两边都为真时返回 true(5 > 6) && (5 < 6) // 一边为 false，另一边为 true。返回 false
||逻辑或：只要至少有一边为真，就返回 true(5 > 6) || (5 < 6) // 一边为 false，另一边为 true。返回 true
!逻辑非：返回相反的布尔值!(5 > 6) // 5 不大于 6，但 "!" 会返回 true

这些运算符对于创建复杂的决策制定结构至关重要。

来源： 2-js-basics/3-making-decisions/README.md123-149

逻辑运算符的求值

来源： 2-js-basics/3-making-decisions/README.md123-149

否定运算符

否定运算符（!）会反转布尔值或表达式。这提供了一种检查条件反面的便捷方式。

这在检查值是否存在或不满足特定条件时特别有用。

来源： 2-js-basics/3-making-decisions/README.md151-161

三元表达式

三元运算符为简单的 if-else 语句提供了更简洁的语法。它在有条件地赋值时特别有用。

例如

这等同于以下 if-else 语句。

来源： 2-js-basics/3-making-decisions/README.md163-196

决策制定方法之间的比较

来源： 2-js-basics/3-making-decisions/README.md44-196

实际应用

决策制定结构广泛用于 JavaScript 应用程序，包括：

  1. 表单验证：检查用户输入是否满足特定标准

  2. UI 渲染：决定显示哪些 UI 组件

  3. API 响应处理：处理不同的 API 响应类型

  4. 游戏逻辑：在打字游戏示例中，决策控制着游戏流程

来源： 4-typing-game/typing-game/README.md264-291

最佳实践

在 JavaScript 中实现决策制定结构时：

  1. 使用有意义的条件：使条件可读且清晰。
  2. 优先使用严格相等（===）：避免使用松散相等（==）时可能发生的类型强制转换问题。
  3. 对于简单条件，考虑使用三元运算符：它们使代码更简洁。
  4. 避免深度嵌套的条件：将复杂逻辑提取到函数中。
  5. 适当使用逻辑运算符：理解短路求值以获得最佳性能。
  6. 处理所有可能的代码路径：确保您的逻辑能够处理所有可能的结果。
  7. 考虑尽早返回：对于复杂的函数，当满足条件时尽早返回，以避免嵌套。

来源： 2-js-basics/3-making-decisions/README.md44-196

有关 JavaScript 中决策制定的更多信息，请探索这些资源：

  1. MDN Web Docs 关于 运算符
  2. JavaScript 运算符优先级和关联性
  3. 高级模式，如 switch 语句（在其他课程部分介绍）
  4. 理解 JavaScript 中的真值和假值

来源： 2-js-basics/3-making-decisions/README.md211-213