小白学js第四天

时间:2022-12-15 14:07:49

流程控制

目录

  • 表达式和语句
  • 流程控制的三大结构
  • debug

流程控制脑图请戳☟[http://naotu.baidu.com/file/30ab2cfa33a855fb631c04f849b4a2e3?token=d497f04ccc07ad7b]

1 表达式和语句

1.1 表达式

  • 可以产生一个值,有可能是个运算、函数、字面量
  • 可以放在任何需要值的地方

1.2 语句

  • 可以理解为一个行为,用;结束一个语句

2 流程控制的三大结构

2.1 顺序结构

  • 由上到下依次执行
  • 程序默认都是由上到下依次执行

2.2 分支结构

根据不同的情况执行相应的代码

2.2.1 if 语句
//语法 

//第一种
 if(条件表达式) {
     执行语句
 }
 
//第二种: 
 if(条件表达式) {
     语句1   //如果条件表达式为true,则执行语句1
 } else {
     语句2   //如果条件表达式为false,则执行语句2
 }
 
 // 第三种
 if(条件表达式){ //如果条件表达式为true,则执行语句1,//如果条件表达式为false,则判断else if内的条件表达式是否成立,成立则执行相应花括号内的代码,否则一直直接跳到下一个else if,反复判断,直到执行到else结束
     语句1      
 } else if (条件表达式){
     语句2
 }else if (条件表达式){
    语句 3
 }else if (条件表达式){
     语句4
 }else if (条件表达式){
     语句5
 }else if(条件表达式) {
     语句6
 }else {
     语句7
 }
 
 // 案例
// 判断一个数是偶数还是奇数
        // 
            // var num1 = 5;
            // if( num1 % 2 === 0) {
            //  console.log('num1是偶数');
            // }else {
            //  console.log('num1是奇数');
            // }

        // 分数转换,把百分制转换成ABCDE   <60  E  60-70 D  70-80 C  80-90 B  90 - 100 A
        var score = 55;
        if (score >= 90){
            console.log('A');
        }else if(score >= 80){
            console.log('B');
        }else if(score >= 70){
            console.log('c');
        }else if(score >= 60){
            console.log('D');
        }else {
            console.log('E');
        }
2.2.2 三元运算符
  • 表达式1 ? 表达式2 : 表达式3
  • 如果表达式1成立则返回表达式2的值否则返回表达式3的值
  • 是对if……else语句的一种简化写法
//案例 
//是否年满18岁
        var age = 18;
        console.log(age >= 18 ? '成年' : '未成年' );
        
        
// 从两个数中找最大值
         var num1 = 5 ;
         var num2 = 3;
         console.log(num1 > num2 ? num1 : num2);
2.2.3 swith 语句

语法格式

    
        switch (expression) {
            case 常量1:
                 语句;
                 break;
            case 常量2:
                 语句;
                 break;
            case 常量3:
                    语句;
                    break;
                …
            case 常量n:
                 语句;
                    break;
            default:
                    语句;
                    break;
                }
  • break可以省略,如果省略,代码会继续执行下一个case
  • switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换(例如,字符串'10' 不等于数值 10)

案例
```
//显示星期几
var day = 1;
switch(day) {
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;
default:
console.log("星期日");
}

            //素质教育(把分数变成ABCDE)千万不要写100个case哟
    


    var score = 100;
    var num = parseInt(score / 10);
    switch(num) {
        case 10 :
        case 9 :
            console.log('A');
            break;
        case 8 :
            console.log('B');
            break;
        case 7 :
            console.log('C');
            break;
        case 6 :
            console.log('D');
            break;
        default :
            console.log('E');
    }
#### 2.4 Boolean的隐式转换结构
- 流程控制语句会把后面的值隐式转换成布尔类型
- 转换为true   非空字符串  非0数字  true 任何对象
- 转换成false  空字符串  0  false  null  undefined



案例

var a = !!'123'; // true

#### 2.3 循环结构
- 重复做一件事
- 注意事项:避免死循环

##### 2.3.1 while 循环

语法
    // 当循环条件为true时,执行循环体,
    // 当循环条件为false时,结束循环。
    while(循环条件) {
        //循环体
    }
案例
    //打印100以内的奇数
    
    
    var i = 0;
    while(i < 101){
        if(i % 2 !== 0) {
            console.log(i);
        }
        i++;
    }
    //打印100以内的奇数的和
    //
    //
    var oddNum = 1;
    var sum = 0;
    while(oddNum < 101){
        if( oddNum % 2 !== 0){
            sum += oddNum;
        }
        oddNum++;
    }
    console.log(sum);
##### 2.3.2 do-while 循环
>do..while循环和while循环非常像,二者经常可以相互替代,但是do..while的特点是不管条件成不成立,都会执行一次。

语法

do {
// 循环体;
} while (循环条件);

案例
//求100以内所有3的倍数的和
    var num = 1;
    var sum = 0;
    do {
        if(num % 3 === 0){
            sum += num;
        }
        num++;
    }while(num < 101);
    console.log(sum);
    
    
    
//使用do-while循环:输出询问“我爱你,嫁给我吧?”,选择“你喜欢我吗?(y/n):",如果输入为y则打印”我们形影不离“,若输入为n,则继续询问" 

 do {
     var msg = prompt('你爱我吗?','请输入yes or no');
 } while(msg !== 'yes');
 console.log('萨拉黑哟');
</script>
//prompt('参数1', '参数2'); 参数1是提示的内容,参数2是输入文本框内提示的内容。
##### 2.3.3 for循环

和whil以及 do-while的区别
- 一般在循环次数确定的时候使用
- while和do-while一半在循环次数不确定的时候使用

语法:

// for循环的表达式之间用的是;号分隔的,千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}

执行顺序:1243  ----  243   -----243(直到循环条件变成false)
1. 初始化表达式
2. 判断表达式
3. 自增表达式
4. 循环体

案例

//打印1-100之间所有数
//
for(var i = 0; i <= 100; i++){
console.log(i);
}
//求1-100之间所有数的和
//
//
var sum = 0;
for( var i = 1; i <= 100; i++){
sum += i;
}
console.log(sum);
//同时求1-100之间所有偶数和奇数的和
var oddSum = 0;
var evenSum = 0;
for( var i = 1; i <= 100; i++){
if(i % 2 == 0){
evenSum += i;
}else {
oddSum += i;
}
}
console.log(evenSum);
console.log(oddSum);
// 打印正方形'
var str = '';
//控制行的输出
for(var i = 0; i < 10; i++){
//控制一行输出几个
for(var j = 0; j < 10; j++){
str += '* ';
}
str += '\n';
}
console.log(str);

// 打印直角三角形
var str = '';
//控制行的输出
for(var i = 0; i < 10; i++){
//控制一行输出几个
for(var j = i; j < 10; j++ ){
str += '* ';
}
// 换行
str += '\n';
}
console.log(str);
// // 打印9*9乘法表

    var str = '';
    for( var i = 1; i <= 9; i++){
        for(var j = i; j <= 9; j++){
            str += i + '*' + j + '=' + i * j + '\t';
        }
        str += '\n';
    }
    console.log(str);
##### 2.3.4 continue 和 break
> break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)
>
> continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)
案例
   // 求整数1~ 100 的累加值, 但要求碰到个位为3的数则停止累加
    var sum = 0;
    for (var i = 0; i <= 100; i++) {
        if (i % 10 !== 3) {
            sum += i;
        } else {
            break;
        }
    }
    console.log(sum);
//求整数1~ 100 的累加值, 但要求跳过所有个位为3的数
    var sum = 0;
    for (var i = 0; i <= 100; i++) {
        if (i % 10 === 3) {
            continue;
        }
        sum += i;
    }
    console.log(sum);

```

debug

  • 过去调试JavaScript的方式
    • alert()
    • console.log()
  • 断点调试

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

  • 调试步骤
浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点--> f5 --> f11
  • 调试中的相关操作
Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
F10: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
F8:跳到下一个断点处,如果后面没有断点了,则程序执行结束。

tips: 监视变量,不要监视表达式,因为监视了表达式,那么这个表达式也会执行。