JavaScript中的流程与循环

最新推荐文章于 2024-10-18 11:12:30 发布

渐悟离迷

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量549

点赞数 16

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_82060934/article/details/140858009

版权

1.流程语句

1）什么是流程语句

条件控制语句即根据我们实现设定好的条件来控制程序的执行方式

2）基本语法

2.语句1-if语句单分支

基本语法：if（条件）{

条件为真时，需要运行的代码

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var age = 61;
      if (age >= 60) {
        console.log("你的年龄满足退休");
      }
    </script>
  </body>
</html>

语句2-if else语句（双分支）

基本语法：if（条件）{

条件为真时，需要运行的代码

} else{

条件为假时，需要运行的代码

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var age = 21;
      if (age > 60) {
        console.log("年龄满足，可以退休");
      } else {
        console.log("年龄不够，不准退休");
      }
    </script>
  </body>
</html>

语句3-if else if语句（多分支）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var age = 21;
      if (age > 60) {
        console.log("年龄满足，可以退休");
      } else if (age >= 18) {
        console.log("年龄足够，可以开始工作了");
      }
    </script>
  </body>
</html>

语句4-if else if else 语句（多分支）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var age = 9;
      if (age > 60) {
        console.log("年龄满足，可以退休");
      } else if (age >= 18) {
        console.log("年龄足够，可以开始工作了");
      } else {
        console.log("年龄不够，不可以工作");
      }
    </script>
  </body>
</html>

2.循环语句

1）什么是循环语句

循环语句，故名思义，就是使一段控制程序重复执行若干次的语句。

想要搞明白for循环，我们必须理解三个要素：起始量、结束条件、变化量。

2）基本语法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //括号内写，起始值；结束条件；变化量
      // 此处即初始i=1，当i>10时就停止，i每次加1
      for (var i = 1; i <= 10; i++) {
        //这个大扩号内就是它要重复执行的程序
        //我们让它在控制台打印所有的i的值
        console.log(i);
      }
    </script>
  </body>
</html>

3.循环结束语句

1）break

当循环没有结束的时候，我们可以输入break使其从这里终止循环

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //括号内写，起始值；结束条件；变化量
      // 此处即初始i=1，当i>10时就停止，i每次加1
      for (var i = 1; i <= 10; i++) {
        //这个大扩号内就是它要重复执行的程序
        //我们让它在i==5时中断
        if (i == 5) {
          break;
        }
        //我们让它在控制台打印所有的i的值
        console.log(i);
      }
    </script>
  </body>
</html>

2.continue

同样，在循环还没有结束的时候，我们可以输入continue来跳过本次循环，直接进行下次循环。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //括号内写，起始值；结束条件；变化量
      // 此处即初始i=1，当i>10时就停止，i每次加1
      for (var i = 1; i <= 10; i++) {
        //这个大扩号内就是它要重复执行的程序
        //我们让它在i==5时跳过，直接执行i==6
        if (i == 5) {
          continue;
        }
        //我们让它在控制台打印所有的i的值
        console.log(i);
      }
    </script>
  </body>
</html>

4.双重循环

双重循环即嵌套循环，在一个循环之中再套上一个循环

逻辑为：外层循环循环一次，内层循环循环一遍。

例如：我们打印一个5×5的星号矩阵

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //外层循环
      for (var i = 1; i <= 5; i++) {
        //内层循环：外层循环每循环一次，内层循环一遍
        for (var j = 1; j <= 5; j++) {
          //故内层能打印5个*号
          document.write("*");
        }
        //内层循环一遍，外层即打印一个换行符
        document.write("<br>");
      }
    </script>
  </body>
</html>