小白学js第四天

流程控制

目录

• 表达式和语句
• 流程控制的三大结构
• 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: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。