web学习笔记(十三)

简介: web学习笔记(十三)

流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。

1.顺序结构

 顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行, 程序中大多数的代码都是这样执行的。

2.分支结构

2.1单分支(if 语句)

   格式:  if(判断条件){

                      条件成立,执行的语句

              }

注意:

  • 如果花括号{}中只有一句代码时,{}可以省略不写
if(6)console.log('真');else console.log('假');
  • ()中的判断条件 如果不是一个布尔值的话,隐式通过Boolean()转化后再判断(‘’ 、null、 undefined、 NaN、 false、 0 将会直接转换为false)

2.2双分支(if else 语句)

     格式: if(判断条件){  

                         条件成立,执行的语句

              }else{

               条件不成立,执行的语句

              }

 let a = +prompt('请输入一个年份');
        if (a % 4 == 0 && a % 100 != 0 || a % 400 == 0) {
            alert(`${a}是闰年`);
 
        } else {
            alert(`${a}是平年`);
        }

2.3多分支---if else if 语句

       格式:    if(判断条件1){


                                 如判断条件一成立,执行代码块1


                         }else if(判断条件2){


                               条件1不成 立,条件2成立,执行代码块2


                         }else if(判断条件3){


                               条件1不成立,条件2不成立,条件3成立,执行代码块3


                          }else{


                                所有条件都不成立,则执行此代码块


                         }

  let a=+prompt('请输入您的分数');
        if(a>=90){
            console.log('A');
        }else if(a>=80&&a<90){
            console.log('B');
 
        }else if(a>=70&&a<80){
            console.log('C');
 
        } else if(a>=60&&a<70){
            console.log('D');
 
        }else{
            console.log('E');
        }

2.4多分支---switch 语句

当要针对变量设置一系列的特定值的选项时,就可以使用 switch。

  1. switch :开关 转换 , case :小例子 选项
  2. 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量
  3. 关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号
  4. switch 表达式的值会与结构中的 case 的值做比较
  5. 如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束
  6. 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码(也可以不存在default)

注意: 执行case 里面的语句时,如果没有break,则继续执行下一个case里面的语句。

var fruit = prompt('请您输入查询的水果:'); 
switch (fruit) {
  case '苹果':
   alert('苹果的价格是 3.5/斤'); 
   break;
 case '榴莲':
   alert('榴莲的价格是 35/斤'); 
   break;
 default:
   alert('没有此水果');
}

switch 语句和 if else if 语句的区别

  • 一般情况下,它们两个语句可以相互替换
  • switch...case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)
  • switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而if…else 语句有几种条件,就得判断多少次。
  • 当分支比较少时,if… else语句的执行效率比 switch语句高。
  • 当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。
  • break 语句和 continue语句的区别(面试题)

break 语句和 continue语句的区别(面试题)

  1. break表示中断,主要用在switch...case语句中,用来结束条件语句,或者用在循环中,表示结束当前的循环,跳出执行循环外的代码。
  2. continue 只能用在循环中,表示结束当此轮循环,继续下次循环(循环迭代还在执行)。
  3. 只要执行到break和continue后面的语句都不会再执行了。
  4. 标签引用,break语句可用于跳出任何JavaScript代码块
  5. break不仅仅可以结束内层循环,也可以结束最外层的大循环,只需要给最外层的大循环起个名字就可以了。
xunhuan:
for(var i=0;i<5;i++){
    for(var j=0;j<3;j++){
        if(j==1){
           
            break xunhuan;
          
        }
        console.log('i='+i,'j='+j);
    }
}
console.log(i,j);

continue 后面加上循环的名字并不可以直接结束最外层的循环,他只能用来跳过当前循环的剩余部分,并进入下一次循环(有点像break的效果,但不推荐使用)。

xunhuan:
for(var i=0;i<5;i++){
    for(var j=0;j<3;j++){
        if(j==1){
           
            
           continue xunhuan;
        
          
        }
        console.log('i='+i,'j='+j);
    }
}
console.log(i,j);

3.循环结构:

3.1for循环

(1)格式:

 for(变量初始化;判断条件;循环迭代){

           循环体

       }

 for(let i=0;i<10;i++){
            循环体;
        }

2)执行步骤:

       (1)变量初始化,在整个for循环中只执行一次 let i=0;


       (2)循环条件判断换,条件是真(true),执行循环体`


                         条件是假(false),结束循环,跳出循环执行循环外的代码


       (3)执行循环迭代 i++   回到第(2)步执行

(3)补充:

  • continue   表示跳过当此循环,继续下次循环。
  • break:结束整个循环
  • 循环次数明确的话,用for循环,循环次数不明确用while循环
  • {}中只有一句代码时,可以省略{}
  • (;;)三个条件全部都可以省略
      //条件一省略
       let i=0;
       for(;i<5;i++){
        console.log(i);
       }
 
       //条件二省略,相当于在判断条件的位置写了一个true,会形成一个死循环
       //解决死循环的办法:找到一个循环的出口,让循环强制结束
       //break; 结束当前循环,执行到break,后面的代码将不再被执行
       let a=0;
       for(;;a++){
        if(a>=5){
            break;
        }
        console.log(a);
       }
 
       //条件三省略
       let b=0;
       for(;;){
       
        if(b>=3){
            break;
        }
        b++;//迭代语句可以放在if前,也可以放在if后
        console.log(b);
       }

(4)例题,用for打印出一个等腰三角形

      for (let i = 1; i <= 5; i++) { //外层控制行数
            for (let k = 1; k <= 5 - i; k++) {//控制空格的个数
                document.write('&nbsp; ');
            }
 
            for (let j = 1; j <= (2 * i - 1); j++) { //内层空值个数 
                document.write('*')
            }
 
            document.write('<br>')
        }

3.2 while循环和do-while循环

(1)格式:

while循环:


 while(判断条件){


           如果判断条件是真(true),执行循环体,


           如果判断条件是假(false),结束循环,执行循环外的语句。


       }

do-while循环:

 do{

           执行循环体;

       }

        while(判断条件)

//计算100以内奇数的和
<script>
  var i=0,sum=0;
   while(i<=100){
       if(i%2!=0){
            sum+=i; 
        }
        i++;
     }
  console.log('100以内奇数的和'+sum);
</script>

补充断点调试:

       断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错语,停下。断点调试可以帮我们观察程序的运行过程。


浏览器按F12--->source--->找需调试的文件-- >单击,并在程序的某一行设置断点 (刷新)


Wacth监视,通过wach可以监视变量的值的变化,非常的常用。F11 程序一步一步执行


补充穷举法:

       遇到问题,找不到更好的解决办法(找不到数学公式或者规律)时,使用“最笨”的方法,利用计算机计算速度快的特点,将所有的可能性全部列出来,并将我们想要的结果记录下来。这就是穷举。

例题:穷举实现百钱买百鸡。

  <script>
        let count=0;
        for(let gj=0;gj<=33;gj++){
            for(let mj=0;mj<=50;mj++){
                for(let xj=0;xj<=200;xj++){
                    if(gj*3+mj*2+xj*0.5==100){
                        count++;
                        document.write('gj'+gj+'只,mj'+mj+'只,xj='+xj+'只<br>')
                    }
                }
            }
        }
        document.write('count'+count);
    </script>
相关文章
|
2月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
97 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
2月前
|
文件存储 Python
Flask学习笔记(一):Flask Web框架
本文介绍了Flask Web框架的基本概念、安装方法、初始化参数、程序编写、静态文件显示和配置信息加载等基础知识。
29 0
|
7月前
|
JavaScript
web学习笔记(二十)
web学习笔记(二十)
34 0
|
5月前
|
自然语言处理 运维 JavaScript
web-flash 学习笔记
web-flash 学习笔记
|
7月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
41 0
|
7月前
|
存储 JSON JavaScript
web学习笔记(二十八)
web学习笔记(二十八)
43 0
|
7月前
web学习笔记(二十七)PC端网页特效
web学习笔记(二十七)PC端网页特效
35 0
|
7月前
|
JavaScript 前端开发 Go
web学习笔记(二十六)
web学习笔记(二十六)
41 0
|
7月前
|
JavaScript 前端开发 内存技术
web学习笔记(二十五)BOM开始
web学习笔记(二十五)BOM开始
44 0
|
7月前
|
JavaScript
web学习笔记(二十四)
web学习笔记(二十四)
37 0