JavaScript 条件语句

JavaScript 程序逻辑结构包括 3 种,顺序、选择和循环。大部分控制语句都属于顺序结构,而条件语句则属于选择结构。

JavaScript 条件语句主要包括if else 和 swtich 语句两种。


条件语句

在代码时,经常会需要基于不同判断执行不同的动作。这时在代码中需要使用条件语句来实现这一点。

在 JavaScript 中,我们可使用如下条件语句:

  • 使用 if 来规定要执行的代码块,如果指定条件为 true
  • 使用 else 来规定要执行的代码块,如果相同的条件为 false
  • 使用 else if 来规定要测试的新条件,如果第一个条件为 false
  • 使用 switch 来规定多个被执行的备选代码块

if 语句

请使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。

  1. if (条件) {
  2. 如果条件为 true 时执行的代码
  3. }

注释:if 使用小写字母。大学字母(IF 或 If)会产生 JavaScript 错误。

如果时间早于 18:00,则发出 "Good day" 的问候:

  1. if (hour < 18) {
  2. greeting = "Good day";
  3. }

如果时间早于 18 点,则 greeting 的结果将是:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>如果小时小于18:00,显示“美好的一天!”:</p>
  5. <p id="demo">晚安</p>
  6. <script>
  7. if (new Date().getHours() < 18) {
  8. document.getElementById("demo").innerHTML = "美好的一天!";
  9. }
  10. </script>
  11. </body>
  12. </html>

else 语句

请使用 else 语句来规定假如条件为 false 时的代码块。

  1. if (条件) {
  2. 条件为 true 时执行的代码块
  3. } else {
  4. 条件为 false 时执行的代码块
  5. }

如果 hour 小于 18,创建 "Good day" 问候,否则 "Good evening":

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>单击按钮以显示基于时间的问候语:</p>
  5. <button onclick="myFunction()">试一试</button>
  6. <p id="demo"></p>
  7. <script>
  8. function myFunction() {
  9. var hour = new Date().getHours();
  10. var greeting;
  11. if (hour < 18) {
  12. greeting = "日安";
  13. } else {
  14. greeting = "晚安";
  15. }
  16. document.getElementById("demo").innerHTML = greeting;
  17. }
  18. </script>
  19. </body>
  20. </html>

else if 语句

请使用 else if 来规定当首个条件为 false 时的新条件。

  1. if (条件 1) {
  2. 条件 1 true 时执行的代码块
  3. } else if (条件 2) {
  4. 条件 1 false 而条件 2 true 时执行的代码块
  5. } else {
  6. 条件 1 和条件 2 同时为 false 时执行的代码块
  7. }

如果时间早于 10:00,则创建 "Good morning" 问候,

如果不是,但时间早于 18:00,则创建 "Good day" 问候,

否则创建 "Good evening":

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>单击按钮以显示基于时间的问候语:</p>
  5. <button onclick="myFunction()">试一试</button>
  6. <p id="demo"></p>
  7. <script>
  8. function myFunction() {
  9. var greeting;
  10. var time = new Date().getHours();
  11. if (time < 10) {
  12. greeting = "早安";
  13. } else if (time < 20) {
  14. greeting = "日安";
  15. } else {
  16. greeting = "晚安";
  17. }
  18. document.getElementById("demo").innerHTML = greeting;
  19. }
  20. </script>
  21. </body>
  22. </html>