首页 > 其他分享 >流程控制

流程控制

时间：2024-09-07 16:24:25浏览次数：3  
标签：控制 流程 write while 循环 break var document

流程控制

在任何一门程序设计语言中，都需要支持满足程序结构 化所需要的三种流程控制:

  • 顺序控制

  • 分支控制（条件控制）

  • 循环控制

顺序控制：在程序流程控制中，最基本的就是顺序控制。程序会按照自上而下的顺序执行。

分支流程控制

  • if语句

  • switch语句

if语句【重要】

分类：单分支，双分支，多分支，分支嵌套

// 单分支
if (条件表达式){
   代码段
}
// 双分支
if (条件表达式) {
    代码段1 
}else {
   代码段2
}
// 多分支
if (条件表达式1){
    代码段1
} else if (条件表达式2){
   代码段2
} else if (条件表达式3){
   代码段3
}else{
    代码段4
}

()中可以是一个值，也可以是一个表达式

// 判断成绩是否及格
// 单分支
var score = 78;
if(score>=60 && score<=100){
  console.log('及格');
}
// 双分支
if(score>=60 && score<=100){
  console.log('及格');
}else{
  console.log('不及格');
}
// 双分支 改写 三元运算符
var res = score>=60&& score<=100?'及格':'不及格';
console.log(res);
// 多分支
var score = 59;
if(score>=60 && score<=100){
  console.log('及格');
}else if(score>=0 && score<=59){
  console.log('不及格');
}else{
  console.log('输入错误！');
}
// 分支嵌套
var score = 59;
if(score>=60 && score<=100){
  if(score>=85){
    console.log('优秀');
  }else if(score>=75){
    console.log('良好');
  }else{
    console.log('中等');
  }
}else if(score>=0 && score<=59){
  console.log('不及格');
}else{
  console.log('输入错误！');
}
2.2 Switch【掌握】
switch (变量){
  case 值1:
  代码段;
       break;
  case 值2:
  代码段;
       break;
  ...
  default:
  代码段;
}

（）只能是变量或值，不能是表达式

var d = new Date();
console.log(d); // 获取日期时间对象
var week = d.getDay(); // 获取星期几
switch (week) {
  case 0:
    console.log('星期天');
    break;
  case 1:
    console.log('星期一');
    break;
  case 2:
    console.log('星期二');
    break;
  case 3:
    console.log('星期三');
    break;
  case 4:
    console.log('星期四');
    break;
  case 5:
    console.log('星期五');
    break;
  case 6:
    console.log('星期六');
    break;
}

对比（区别）：什么时候用if，什么时候用switch

if：条件是一个范围 或者 是具体的值

switch：条件是一个具体的值

能够使用switch实现的判断，都可以使用if来实现 但是，能够使用if语句实现的判断，不一定能使用switch实现

案例：小游戏

    <button id='btn1'>唱歌</button>
    <button id='btn2'>讲故事</button>
    <button id='btn3'>说英语</button>
</body>
<script>
    var btn = document.getElementsByTagName('button');
    for(var i=0;i<btn.length;i++){
        // console.log(btn[i]);
        btn[i].onclick = function(){
            // this 点击的是谁，获取的就是谁
            // console.log(this);
            // if(this.innerText=='唱歌'){
            //     console.log('两只老虎。。。。');
            // }else if(this.innerText=='说英语'){
            //     console.log('ABCDEFG。。。。');
            // }else if(this.innerText=='讲故事'){
            //     console.log('从前有个山。。。。');
            // }
            switch(this.innerText){
                case '唱歌':
                    console.log('两只老虎。。。。');
                    break;
                case '说英语':
                    console.log('ABCDEFG。。。。');
                    break;
                case '讲故事':
                    console.log('从前有个山。。。。');
                    break;
            }
        }
    }
</script>

循环控制语句

一般来说，在循环结构中动态改变循环变量的值时，建议使用 while 结构，而对于静态的循环变量，则可以考虑使用 for 结构。

  • 运算本质上没什么区别，while变量声明在外面。
  • for 三个条件写在一起，语法更加紧凑。
  • for循环是while的语法糖
3.1 while语句【掌握】

While 循环会在指定条件为真时循环执行代码块。 While循环，先进行条件判断，再执行循环体的代码

while (条件表达式){ 
    循环体 
}





格式：
	while(条件){
		执行条件
	}

	（while不是条件判断，不转换布尔值，只条件判断）
	while循环遵循的规则：只有条件成立时，循环才会执行
特别注意：在循环中，设定条件时，一定要注意别设置死循环（没有终点）

注意：当前循环中，如果不满足条件，一次都不会执行

var i= 1;
while(i<=10){
  console.log(i);
  i++;
}
3.2 do......while【了解】

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。 do while循环，先执行循环体代码，再进行条件判断。至少执行一次循环体的代码。

do {
    代码段
} while (条件表达式)






do...while循环
    格式： do{
             执行程序
           }while(条件)
  
    do...while循环遵循的规则：           
     不管条件是否成立，都会先执行一次程序
     执行完后，再判断条件是否循环

注意：当前循环中，代码至少执行一次

var i=1;
    do{
        i++; // 2
        console.log(i);
    }while(i<=10)
3.3 for【重要】
for (循环变量初始化表达式; 循环条件表达式; 更新循环变量表达式) {
    循环体
}




格式： for(var 初始化变量;循环执行条件;变量如何变化){
              执行程序
      }

 for循环遵循的规则：  
       只有条件成立时，循环才会执行
       for循环是while循环的语法糖
       他们两的功能完全一样。

注意：

  1. 循环变量可以定义在for 循环结构体外

  2. 没有更新循环变量会变成死循环

  3. 循环条件中的‘；’不能省略

  4. for循环只能来循环数组

基础案例：循环输出5个div标签

for(var i=0;i<5;i++){
  document.write('<div>1</div>')
}

基础案例：循环输出1-100

for(var i=1;i<=100;i++){
  document.write(i);
}

案例：计算1+2+...100=5050的和

var sum=0
for(var i=1;i<=100;i++){
  sum += i
    if(i<100){
      document.write(i+'+');
    }else{
    document.write(i+'='+sum)
  }
}
console.log(sum)

案例二：循环输出table表格，创建四行5列的表格

document.write('<table border="1">')
      for(var j=1;j<=4;j++){
        document.write('<tr>')
          for(var i=0;i<=3;i++){
            document.write('<td>@</td>');
          }
        document.write('</tr>')
      }
document.write('</table>')

案例三：打印一个八行三列的表格（隔行换色）

<!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>
        document.write('<table border="1" width="500">');
            for(var i=1;i<9;i++){
                if(i%2 == 1){
                    document.write('<tr bgcolor="red">');
                        document.write('<td>1</td><td>1</td><td>1</td>')
                    document.write('</tr>');
                }else{
                    document.write('<tr bgcolor="green">');
                        document.write('<td>1</td><td>1</td><td>1</td>')
                    document.write('</tr>');
                }  
            }
        document.write('</table>');
    </script>
</body>
</html>

案例四：点击显示一张图片，点击显示多张图片

案例五：判断数组中值哪些是数字类型 var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, document, [], true, '200px'-30,'23.45元', 5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];

  var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, document, [], true, '200px'-30,'23.45元', 5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];
        for(i=0;i<arr.length;i++){
            // console.log(le);
            // console.log(typeof arr[i]);
            // console.log(isNaN(arr[i]));
            // console.log(Number(arr[i]));
            if(typeof arr[i] == "number" && !isNaN(arr[i])){
                // console.log(number);  
                console.log(arr[i]);
                
            }
        }

案例六：循环实现金字塔效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            margin: 0 5px 5px;
            display: inline-block;
        }
        .red{
            background-color: #fff;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
    <script>

        for(i=0;i<6;i++){
           for(j=0;j<6-i;j++){
             document.write("<div class='red'></div>")
           }
           for(g=0;g<2*i+1;g++){
            document.write("<div class='green'></div>")
           }
           document.write("<br/>")
        }
        // document.write("<br/>")

    </script>
</body>
</html>

案例七：循环实现九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 20px;
            background-color: red;
            margin: 2px;
            display: inline-block;
            color: #fff;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <script>
        // 循环得行
        for(var i=1;i<=9;i++){
            // 循环列
            for(var j=1;j<=i;j++){
                document.write("<div>"+i+"*"+j + "=" + (i*j) +"</div>")
            }
            document.write('<br>');
        }
    </script>
</body>
</html>

案例八：循环实现阶梯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: green;
            margin: 5px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <script>
        // for(i=6;i>0;i--){
        //     for(j=0;j<i;j++){
        //         document.write("<div></div>")
        //     }
        //     document.write("<br/>")
        // }

        for(i=0;i<6;i++){
           for(j=0;j<6-i;j++){
             document.write("<div class='red'></div>")
           }
           document.write("<br/>")
        }   


    </script>
</body>
</html>
3.4 for...in【掌握】
for (变量 in 对象) {
   代码段
}

for/in 语句循环遍历对象的属性。

循环内的代码块将为每个属性执行一次。

  • for...in 语句用来遍历对象的每一个属性。每次都将属性名作为字符串保存在变量里

  • 在无法预知对象的任何信息，和循环次数的时候使用

  • for...in 循环专门用来循环数组和对象的

var arr = [
  {
    "name":"Java编程思想",
    "price":78.9
  },
  {
    "name":"python入门宝典",
    "price":59
  },
  {
    "name":"JavaScript程序设计",
    "price":69
  }
];
for(var i=0;i<arr.length;i++){
  // console.log(arr[i]);
  // json - {"name":"Java编程思想","price":78.9}
  for(key in arr[i]){
    console.log(arr[i][key]);
  }
}

跳转语句

4.1 continue【掌握】

continue语句只能应用在循环中（while、do......while、for）语句中 用于中止本次循环，根据控制表达式还允许继续进行下一次循环。

var iNum = 0; 
for (var i=1; i<10; i++) {
  if (i % 5 == 0) {
    document.write(i);

    continue;
  }
  iNum++;
}
alert(iNum);
4.2 break【掌握】

break语句只能应用在循环（while、do......while、for）或switch语句中 break语句用于退出循环，阻止再次反复执行任何代码或者退出一个switch语句

for (var i=1; i<10; i++) {
  if (i % 5 == 0) {
    break;
  }
  iNum++;
}
alert(iNum);

区别：

      break 和 continue关键字都可以用在 for 和 while 循环结构中，表示跳出循环；

      break：退出整个循环；

      continue：退出当前这一次循环，继续下一次循环；

标签：控制,流程,write,while,循环,break,var,document
From： https://blog.csdn.net/weixin_71949204/article/details/141968719

相关文章

  • Android BLE scan流程及源码分析
    在Android系统中，startScan 方法用于启动蓝牙扫描，本文针对较新的Android版本14进行BLE扫描源码分析。一、AndroidBle scan的一般流程概述1.权限和蓝牙适配器检查应用需要确保具有适当的蓝牙和位置权限（从Android6.0开始，蓝牙扫描通常需要位置权限）。应用还需要检查......
  • 模板化-上线文件的流程步骤
    1.服务和分支，避免上线服务遗漏，及定义上线的优先级先后顺序。2.apollo配置，检查上线的pro环境的apollo配置，否则项目启动因为缺少配置会启动报错。3.SQLDMS，上线之前先执行脚本，否则会因为缺少字段而导致系统报错。flow系统加上客户和商户的会员号字段需求，上线之前忘记了。ALTERTA......
  • JS流程控制
    流程控制在任何一门程序设计语言中，都需要支持满足程序结构化所需要的三种流程控制:顺序控制分支控制（条件控制）循环控制顺序控制：在程序流程控制中，最基本的就是顺序控制。程序会按照自上而下的顺序执行。if语句【重要】分类：单分支，双分支，多分支，分支嵌套（）只能是变量或值......
  • Shell脚本流程控制（Linux篇）
    1.流程控制流程控制是改变程序运行顺序的指令。1.1.条件判断1.1.1.文件类型判断参数说明-d判断指定的目录是否存在-e判断文件是否存在，存在即为真-f判断普通文件是否存在-L判断文件是否存在且为连接文件示例一：#判断文件是否存在，存在为0，不存在为1root@zking:~#test-ea......
  • 【教程】在 Termux 中部署 MYScrcpy， 实现手机局域网WEB投屏控制
    在Termux中部署MYScrcpy实现局域网Web访问有关MYScrcpy，访问GithubGitee1.安装termux2.安装python环境#换源termux-change-repopkgupgrade#installpythonpkginstallpython#确认是否安装成功python-V3.安装MYScrcpy所需环境#基础环......
  • 【保姆级教程】使用 PyTorch 自定义卷积神经网络（CNN） 实现图像分类、训练验证、预测全
    《博主简介》小伙伴们好，我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。......
  • 配置免安装版的apache-tomcat环境，jdk11版本以上。解决控制台环境配置显示成功，确打不开
    我这里下的是jdk22版，https://download.oracle.com/java/22/latest/jdk-22_windows-x64_bin.ziphttps://download.oracle.com/java/22/latest/jdk-22_windows-x64_bin.zip 解压后放在没有中文路径的地方。win+s搜env回车打开环境变量，新建一个变量名：JAVA_HOME，值：为你的jdk解压......
  • 行政组织理论-第十二章：政府再造流程
    章节章节汇总第一章：绪论第二章：行政组织的演变第三章：科层制行政组织理论第四章：人本主义组织理论第五章：网络型组织理论第六章：行政组织目标第七章：行政组织结构第八章：行政组织体制第九章：行政组织设置与自身管理第十章：组织激励第十一章：创建学习型组织第十二章：政府再造流程第十三......
  • 用“说”智能控制灯具开关语音识别芯片NRK3603
    用“说”智能控制灯具开关是一种基于语音识别技术的智能家居设备，它通过内置的语音识别芯片，利用离线识别算法，将用户的语音指令实现对灯具的控制，NRK3603语音识别芯片成为客户低成本的离线语音识别方案。功能特性：1.内核和存储高性能32bitRlsc内核，主频160MHZ，内置4MBSPIFLASH。2.AI算......
  • MYSQL的安装与配置流程
    MYSQL的安装与配置流程1.下载安装包mysql官方下载链接2.解压并配置文件用管理员身份打开命令提示符进入解压的地址中使用一下命令安装MySQL服务mysqldinstallMySQL80若显示下面失败的提示可以使用该指令卸载该服务后再重新安装mysqld-removeMySQL80//此处为直接修改的......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99