JavaScript--黑马程序员pink老师笔记-- P55-P95 JavaScript流程控制分支、循环

JavaScript流程控制-分支

流程控制

流程控制就是来控制我们的代码按照上面结构顺序来执行

主要有三种结构：顺序结构、分支结构、循环结构

顺序流程控制

按照代码的先后顺序，依次执行

分支流程控制->if语句

根据不同的条件，执行不同的路径代码（多选一）

//条件成立执行代码，否则什么也不做
if(条件表达式){
                //执行语句
            }

执行思路：

1.如果if里面的条件表达式结果为真，则执行大括号里面的执行语句

2.如果if 条件表达式 为假，则执行if语句后面的代码

进入网吧案例

1. 弹出prompt输入框，用户输入年龄，程序把这个值取过来保存到变量中
2. 使用if语句来判断年龄，如果年龄大于18就执行大括号里面的输出语句

		var age = prompt('请输入你的年龄：');

        if (age >= 18) {
            alert('可以进入网吧');//执行语句
        }

if else 双分支语句

//条件成立执行代码，否则执行语句2
if(条件表达式){
                //执行语句
           }
 else{
 				//执行语句2
 }

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

利用多个条件来选择不同的语句来执行，得到不同的结果（多选一）

if(条件表达式1){
                //执行语句1；
    } else if (条件表达式2){
 				//执行语句2；
 	} else if(条件表达式3){
 	   			//执行语句3；
 	} else{
 				//最后的语句；
 	}

三元表达式

条件表达式： ? 表达式1：表达式2

如果条件表达式结果为真，则返回表达式1的值，假则返回2的值

分支流程控制 switch语句

用于基于不同的条件来执行不同的代码，当要针对变量设置一系列的特定值的选项时，就可以使用switch

switch(表达式){
            case value1:
                执行语句1;
                break;
            case value2:
                执行语句2;
                break;
            ...
            default:
                执行最后的语句；
        }

执行思路：

利用表达式的值 和case 后面的选项值相匹配，

如果匹配上，就执行该case里面的语句，

如果都没有匹配上，执行default里面语句。

1. 表达式经常写成变量

2. 必须值和数据类型一致才可以 ===

3. 如果当前的case里没有beak，则不会退出switch，而是继续执行下一个case

switch和if else if语句的区别

1. 一般情况下，他们俩语句可以互相替换

2. switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，常用于范围判断（大于等于某个范围）

3. switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else语句有几种条件，就得判断多少次

4. 当分支比较少时，if…else语句的执行效率比switch语句高

5. 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰

JavaScript流程控制-循环

for循环

1. for 重复执行某些代码，通常和计数有关系
2. 初始化变量 就是用var声明的一个普通变量，通常用于作为计数器使用
3. 条件表达式 就是用来决定每一次循环是否继续执行，就是终止的条件
4. 操作表达式 是每次循环最后执行的代码，经常用于我们技术器变量进行更新（递增或递减0

for(初始化变量;条件表达式;操作表达式){
     // 循环体
   }

for (var i = 1; i <= 100; i++) {
            console.log('你好');// 循环体
        }

1. 首先执行里面的计数器变量 var= i=1.但是这句话在for里面只执行一次。index

2. 去 i<=100 来判断是否满足条件，

   如果满足条件，就去执行循环体；不满足条件就退出循环。

3. 最后去执行 i++，i++是单独写的代码，递增。第一轮结束

4. 接着去执行i<=100，

   如果满足条件，就去执行循环体；不满足就退出循环。开始第二轮

断点调试

浏览器中按F12–>source–>找到需要调试的文件–>在程序的某一行设置断点

Watch：监视，通过watch可以监视变量的值的变化，非常的常用

F11：程序单步执行，让程序一行一行的执行，这个时候观察watch中变量的值的变化

for 循环可以执行相同的代码

可以让用户控制输出的次数

 var num = prompt('请输入次数');
        for (var i = 1; i <= num; i++) {
            console.log('媳妇我错了');
        }

for循环重复执行不相同的代码

for (var i = 1; i <= 100; i++) {
            console.log('这个人今年' + i + '岁啦');
        }

for (var i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('这个人今年1岁了');
            } else if (i == 100) {
                console.log('这个人今年100岁了');
            } else if (1 < i < 100) {
                console.log('这个人今年' + i + '岁啦');
            }
        }

for循环重复某些运算

求1~100之间的整数累加和

1. 需要循环100次，需要一个计数器i

2. 需要一个存储结果的变量sum，但是初始值一定是0

3. 核心算法：1+2+3…+100,sum=sum+i;

var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum = sum + i;//sum+=i;
        }
        console.log(sum);

求1~100之间所有数的平均值

        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum = sum + i;//sum+=i;
            averge = sum / i;
        }
        console.log(averge);

var sum = 0;
        var averge = 0;
        for (var i = 1; i <= 100; i++) {
            sum = sum + i;
        }
        averge = sum / 100;
        console.log(averge);

求1~100的偶数、奇数

 var even = 0, odd = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even = even + i;
            } else {
                odd = odd + i;
            }
        }
        console.log(even);
        console.log(odd);

1~100之间能够被3整除的数字的和

 var result = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                result = result + i;
            }
        }
        console.log(result);

var a = prompt('请输入学生的人数：');
        var sum = 0;
        var average = 0;
        for (var i = 1; i <= a; i++) {
            var score = prompt('请输入第' + i + '个学生成绩：');
            sum = sum + parseFloat(score);
            average = sum / i;
        }
        alert('总成绩为：' + sum);
        alert('平均成绩为：' + average);

采用追加字符串的方式，这样可以打印到控制台上

		str = ''
        for (var i = 1; i <= 5; i++) {
            str = str + '*';
        }
        console.log(str);

var num = prompt('请输入星星的个数');
        var str = '';
        for (var i = 1; i <= num; i++) {
            str = str + '*'
        }
        console.log(str);

双重for循环

 for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
            for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
                    //执行语句；
            }
        }

1. 可以把里面的循环看做是外层循环的语句
2. 外层循环，循环一次，里面的循环执行全部

for (var i = 1; i <= 3; i++) {
            console.log('这是外层循环' + i + '次');
            for (var j = 1; j <= 3; j++) {
                console.log('这是里层的循环第' + j + '次');
            }
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3IEXMdSD-1615981952640)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20210317105645205.png)]

1. 先执行i=1，它<3，执行里面第一句

   console.log(‘这是外层循环’ + i + ‘次’);

2. 再执行j=1，它<3，执行里面第一句

   console.log(‘这是里层的循环第’ + j + ‘次’);

3. 再j++，j=2，j<3，执行里面第一句

   console.log(‘这是里层的循环第’ + j + ‘次’);

4. 再j++，j=3，j=3，执行里面第一句

   console.log(‘这是里层的循环第’ + j + ‘次’);

5. 再j++，j=4，j>3，跳出第二层for循环，执行第一层for循环的最后一步i++

6. 开始i=2的循环

7. 由此三层循环

打印五行星星

外层循环控制行数，里层循环控制列数

 var str = ''
        for (var i = 1; i <= 5; i++) {
            for (var j = 1; j <= 5; j++) {
                str = str + '&';
            }
            str = str + '\n';
        }
        console.log(str);

var rows = prompt('请您输入行数');
        var clos = prompt('请您输入列数');
        var str = '';
        for (var i = 1; i <= rows; i++) {
            for (var j = 1; j <= clos; j++) {
                str = str + '*';
            }
            str += '\n';
        }
        console.log(str);

打印倒三角案例

1. 用户输入行数，第一列列数

2. 外层的for控制行数i，里层控制个数

3. 核心算法：j = i; j <= clos; j++

   j从i开始，根据用户输入的第一行的列数，例如我输入10；

   第一次j从1开始，一直输出到10；执行换行；一共10个

   第一次j从2开始，一直输出到10；执行换行；一共9个

   以此类推；直到j=10，输出0个；

var str = '';
        var rows = prompt('请输入行数');
        var clos = prompt('请输入第一行列数');
        for (var i = 1; i <= rows; i++) {
            for (var j = i; j <= clos; j++) {
                str = str + '*';
            }
            str = str + '\n';
        }
        console.log(str);

九九乘法表

每一行的列数永远小于行数

var str = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                str = str + '*'
            }
            str = str + '\n';
        }
        console.log(str);

1. 用1X2=2代替*号
2. 最后加上’\t’键，生成空格

var str = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                str += j + '×' + i + '=' + i * j + '\t';
            }
            str += '\n';
        }
        console.log(str);

while循环

执行思路：当条件表达式结果为true，则执行循环体；否则退出循环。

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

• while里面应该也有计数器，即初始化变量num=1

• 还要有操作表达式num++，来完成计数器的更新num++，防止死循环

var num=1;
        while(num<=100){
            console.log('helllo');
            num++;
        }

课堂案例

1. 打印人的一生，从1岁到100岁

2. 计算从1~100之间所有的整数和

        var num = 1;
        var sum = 0;
        while (num <= 100) {
            console.log(num + '岁');
            sum += num;
            num++;
        }
        console.log(sum);

蛮不讲理系列

1. 弹出输入框，要求用户输入
2. 判断条件比较复杂就使用while循环
3. while循环语句中的条件表达式，只要输入的不是我爱你，就一直循环

var message = prompt('你爱我吗？');
        while (message !== '我爱你') {
            message = prompt('你爱我吗？');
        }
alert('我也爱你呀！');

do while循环

执行思路：

1. 跟while不同的地方在于do while先执行一次循环体，再判断条件
2. 如果条件表达式结果为真，则继续执行循环体；否则退出循环

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

• do while循环体至少执行一次循环体代码

1. 打印人的一生，从1岁到100岁

2. 计算从1~100之间所有的整数和

		var num = 1;
        var sum = 0;
        do {
            console.log(num + '岁');
            sum += num;
            num++;
        } while (num <= 100)
        console.log(sum);

1. 弹出输入框，要求用户输入
2. 判断条件比较复杂就使用while循环
3. while循环语句中的条件表达式，只要输入的不是我爱你，就一直循环

		do {
            var message = prompt('你爱我吗？');
        } while (message !== '我爱你')
        alert('我也爱你呀');

循环小结

• 如果是用来计数的，跟数字相关的，三者使用基本相同，但我们更喜欢用for
• while和do…while可以做更复杂的判断条件，比for循环灵活一些
• while和do…while执行顺序不一样，while先判断后执行，do…while先执行一次，再判断执行
• while和do…while执行次数不一样，do…while至少会执行一次循环体，二while可能一次也不执行
• 实际中更常用for循环

continue

continue关键字用于->立即跳出本次循环，继续下一次循环(执行下面的代码)

	for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                continue;
            }
            console.log('我正在吃第' + i + '个包子');
        }

求1~100之间，除了能被7整除之外的整数和

        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            }
            sum += i;
        }
        console.log(sum);

break

break关键字用于->立即跳出整个循环（循环结束）

 for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                break;
            }
            console.log('我正在吃第' + i + '个包子');
        }

简易ATM机

1. 里面现存有100元
2. 如果存钱，就用输入的钱数加上以前存的钱数，之后弹出显示余额提示框
3. 如果取钱，就减去取的钱数，之后弹出此案是月提示框
4. 如果显示月，就输出余额
5. 如果退出，弹出退出信息提示框

       var money = 100;
        for (var i = 1; i <= 100; i++) {
        }
        do {
            var num = parseInt(prompt('请输入您需要的操作' + '\n' + '1.存钱' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出'));
            switch (num) {
                case 1:
                    var cun = parseInt(prompt('请输入您要存的钱：'));
                    money += cun;
                    alert('您现在的钱为' + money + '元');
                    break;

                case 2:
                    var qu = parseInt(prompt('请输入您要取的钱：'));
                    money -= qu;
                    alert('您现在的钱为' + money + '元');
                    break;

                case 3:
                    alert('您现在的余额为' + money + '元');
                    break;
                case 4:
                    alert('您现在正在退出');
                    break;
                default: alert('输入有误，请重新输入');
            }
        } while (num)

命名规范以及语法格式

标识符命名规范

1. 变量、函数名必须要有意义
2. 变量的名称一般用名词
3. 函数的名称一般用动词

操作符规范

1. 操作符的左右两侧各保留一个空格

单行注释规范

单行注释前面有个空格

其他规范

右侧括号和if、for对齐