web前端学习（三十六）——JavaScript重要语句（if...else if...else、switch、for、while、break、continue）的相关设置

2022-06-15 164

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： web前端学习（三十六）——JavaScript重要语句（if...else if...else、switch、for、while、break、continue）的相关设置

1.JS条件语句

条件语句用于基于不同的条件来执行不同的动作。

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

· if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

· if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

· if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

· switch 语句 - 使用该语句来选择多个代码块之一来执行

1.1 if语句

只有当指定条件为 true 时，该语句才会执行代码。

  if(condition) {
      当条件为 true 时执行的代码
  }

1.2 if...else语句

使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

  if(condition) {
     当条件为 true 时执行的代码
  }else {
     当条件不为 true 时执行的代码
  }

1.3 if...else if...else语句

使用 if....else if...else 语句来选择多个代码块之一来执行。

if(condition1) {
    当条件 1 为 true 时执行的代码
}else if(condition2) {
    当条件 2 为 true 时执行的代码
}else {
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

1.4 小实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS简单学习</title>
  </head>
  <body>
    <p>如果时间的不同，会获得相应的问候。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        var x="";
        var time=new Date().getHours();
        if(time<12) {
          x="<b>早上好！！！</b>";
        }else if(time>=12 && time<18) {
          x="<b>下午好！！！</b>";
        }else{
          x="<b>晚上好！！！</b>";
        }
        document.getElementById("demo").innerHTML=x;
      }
    </script>
  </body>
</html>

1.5 switch语句

switch语句用于基于不同的条件来执行不同的动作。使用 default 关键词来规定匹配不存在时做的事情。

首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用break 来阻止代码自动地向下一个 case 运行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS简单学习</title>
  </head>
  <body>
    <p>点击下面的按钮来显示今天是周几：</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        var x;
        var d=new Date().getDay();
        switch(d) {
          case 1 :
            x="今天是星期一！！！";
            break;
          case 2 :
            x="今天是星期二！！！";
            break;
          case 3 :
            x="今天是星期三！！！";
            break;
          case 4 :
            x="今天是星期四！！！";
            break;
          case 5 :
            x="今天是星期五！！！";
            break;
          default :
            x="到周末啦！！！";
            break;
        }
        document.getElementById("demo").innerHTML=x;
      }
    </script>
  </body>
</html>

2.JS循环语句

JavaScript支持不同类型的循环：

· for - 循环代码块一定的次数

· for/in - 循环遍历对象的属性

· while - 当指定的条件为 true 时循环指定的代码块

· do/while - 同样当指定的条件为 true 时循环指定的代码块

2.1 for循环

for(语句 1; 语句 2; 语句 3) {
    被执行的代码块
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS简单学习</title>
  </head>
  <body>
    <script>
      mobiles=["huawei","oppo","mi","vivo"];
      for(var i=0;i<mobiles.length;i++) {
        document.write(mobiles[i] + "<br />");
      }
      /* 省略语句1的写法
        var i=0;
        for(;i<mobiles.length;i++) {
          document.write(mobiles[i] + "<br />");
        }
      */
      /* 省略语句2的写法
        for(var i=0;;i++) {
          if(i>=mobiles.length) {
            break;
          }
          document.write(mobiles[i] + "<br />");
        }
      */
      /* 省略语句3的写法
        for(var i=0;i<mobiles.length;) {
          document.write(mobiles[i] + "<br />");
          i++;
        }
      */
    </script>
  </body>
</html>

2.2 for/in循环

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS简单学习</title>
  </head>
  <body>
    <p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        var x;
        var str="";
        var person={姓名:"张三",性别:"男",年龄:30,爱好:"睡觉"};
        for(x in person) {
          str=str + person[x] + " ";
        }
        document.getElementById("demo").innerHTML=str;
      }
    </script>
  </body>
</html>

2.3 while循环

while(条件) {
    需要执行的代码
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS简单学习</title>
  </head>
  <body>
    <script>
      var i=0;
      mobiles=["huawei","oppo","mi","vivo"];
      while(mobiles[i]) {
        document.write(mobiles[i] + "<br />");
        i++;
      }
    </script>
  </body>
</html>

2.4 do-while循环

do {
    需要执行的代码
}while(条件);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS简单学习</title>
  </head>
  <body>
    <p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        var i=0,x="";
        while(i<5) {
          x=x + "该数字为 " + i + "<br />";
          i++;
        }
        /* 转为do-while循环如下：
          do{
            x=x + "该数字为 " + i + "<br />";
            i++;
          }while(i<5)
        */
        document.getElementById("demo").innerHTML=x;
      }
    </script>
  </body>
</html>

3.JS控制语句

break语句用于跳出循环。

continue用于跳过循环中的一个迭代。

3.1 break语句

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p>点击按钮，测试带有 break 语句的循环。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        var x="",i=0;
        for(i=0;i<10;i++) {
          if(i==5) {
            break;
          }
          x=x + "该数字为 " + i + "<br />";
        }
        document.getElementById("demo").innerHTML=x;
      }
    </script>
  </body>
</html>

3.2 continue语句

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p>点击下面的按钮来执行循环，该循环会跳过 i=3 的数字。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        var x="",i=0;
        for(i=0;i<10;i++) {
          if(i==3) {
            continue;
          }
          x=x + "该数字为 " + i + "<br />";
        }
        document.getElementById("demo").innerHTML=x;
      }
    </script>
  </body>
</html>

3.3 使用JS标签跳出循环

如需标记 JavaScript 语句，请在语句之前加上冒号：

label: statements

break和 continue 语句仅仅是能够跳出代码块的语句。

break labelname; 
continue labelname;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <script>
      colors=["red","green","blue","black","white"];
      list: {
        document.write(colors[0] + "<br />");
        document.write(colors[1] + "<br />");
        document.write(colors[2] + "<br />");
        break list;
        document.write(colors[3] + "<br />");
        document.write(colors[4] + "<br />");
      }
    </script>
  </body>
</html>

web前端学习（三十六）——JavaScript重要语句（if...else if...else、switch、for、while、break、continue）的相关设置

1.JS条件语句

2.JS循环语句

3.JS控制语句

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

web前端学习（三十六）——JavaScript重要语句（if...else if...else、switch、for、while、break、continue）的相关设置

1.JS条件语句

2.JS循环语句

3.JS控制语句

热门文章

最新文章

相关课程

相关电子书

相关实验场景