流程控制-分支结构

在一个程序执行的过程中, 各条代码顺序对程序的结果是有直接影响的. 很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能.

顺序流程控制

按顺序写就行

分支流程控制语句

if类语句

if语句

语法结构

if (条件表达式) {
            //执行语句
        }

执行思路—if的条件表达式结果:

true 执行里面的 执行语句

false 跳过此处的if语句 / 执行if语句后面的代码

if else语句

如果表达式为真 则执行语句1 否则执行else里面的语句2

var age = prompt('请输入你的年龄');
if (age >= 18) {
    alert('你可以取网吧偷耳机啦!');
} else {
    alert('你不可以去网吧上网');
}

注意: else后面直接跟大括号

案例: 判断闰年 平年

算法: 能被4整除且不能整除100的为闰年(2004年是闰年, 1901年不是闰年) 或者能够被400整除的就是闰年

实施

var year = prompt('请输入年份');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    alert('这是闰年');
} else {
    alert('这是平年');
}

注意:

且 && 或者 || 的写法
同时注意判断整除的方法 取余为0

三元表达式(简化版的if else)

由三元运算符组成的式子称为三元表达式

语法结构:

条件表达式? 表达式1 : 表达式2 ;

执行思路:

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

代码体验:

var num = 3;
var result = num > 5 ?  '是的' : '不是的'
console.log(result);  //不是的

练习: 数字补0

要求:用户输入数字, 如果数字小于10, 则在前面补0, 比如01, 09, 如果数字大于10, 则不需要补, 比如20

分析:

用户输入0-59之间的一个数字
如果数字小于10, 则在这个数字前面补0, (加0), 否则不做操作
用一个变量接收这个返回值, 输出

实施:

var time = prompt('请你输入一个0~59之间的数字:');
// 三元表达式
var result = time < 10 ? '0' + time : time; //把返回值赋值给一个变量
alert(result);

if else if语句(多分支语句)

语法规范:

if (条件表达式1) {
   //语句1;
} else if(条件表达式2) {
   // 语句2;
} else if (条件表达式3) {
    //语句3;
} else {
    //语句4;
}

作用: 适合检查多重条件

注意:

​ 多分支语句还是多选一, 最后只能有一个语句执行

​ else if 中间有空格

案例: 接受用户输入分数, 根据分数输出对应的等级字母A B C D E;

其中 :

​ | score>=90 | A |
​ | 80<=score<90 | B |
​ | 70<=score<80 | C |
​ | 60<=score<70 | D |
​ | score<60 | E |

思路:

按照从大到小判断的思路
弹出prompt输入框, 让用户输入分数, 把这个值取过来保存到变量当中
使用多分支if else语句来分别判断输出不同的值

实施:

var score = prompt('请输入你的分数');
if (score >= 90) {
    alert('你是我的骄傲');
} else if (score >= 80) {
    alert('你的分数 80<=score<90');
} else if (score >= 70) {
    alert('你的分数70<=score<80');
} else if (score >= 60) {
    alert('你的分数60<=score<70');
} else {
    alert('你应该重修了');
}

switch语句

switch语句也是多分支语句, 它用于基于不同的条件来执行不同的代码. 当要针对变量设置一系列的特定值的选项时, 就可以使用switch

所以:

判断特定值 用switch更好做
判断值范围的 用if else 更好做一些

语法结构: switch 转换, 开关 ; case小例子或者选项的意思

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

执行思路:

利用表达式的值 与 case 后面的值相匹配 匹配就执行case里面的语句 不匹配就往下走;
都没有匹配上就执行default里面的语句.

实例:

switch (2) {
    case 1:
        console.log('这是1');
        break;
    case 2:
        console.log('这是2');  // 执行
        break;
    case 3: 
        console.log('这是3');
        break;
    default:
        console.log('没有匹配结果');
}
var num = 3;
switch (num) {
    case 1:
        console.log('这是1');
        break;
    case 3:
        console.log(3);
        break;
    default:
        break;
}

注意事项:

  1. 开发里面 表达式经常写成变量

  2. 我们num的值 与case里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1;

  3. **break是必要性: ** 如果当前case没有break, 则不会退出switch 而是会再继续多执行一个下面的case

案例: 查询水果的价格

要求:

用户在弹出框里面输入一个水果, 如果有就弹出该水果价格, 如果没有该水果就弹出”没有此水果.”

分析:

  1. 弹出警示框 用户输入 将值存入变量
  2. switch括号里面的表达式
  3. case后面的值写几个不同的水果名称 要加引号, 因为必须全等匹配.

实施:

var fruit = prompt('你的水果是:🍎/榴莲/🍌');
switch (fruit) {
    case '苹果':
        alert('苹果的价格是3.5/斤');
        break;
    case '榴莲':
        alert('榴莲的价格是35/斤');
        break;
    case '香蕉':
        alert('香蕉的价格是225元/斤');
        break;
    default:
        alert('没有此水果');
}

水果 记得加引号

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

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

作业之一 

var weekday = prompt('请输入数字1-7中的任意一个整数字');
switch (weekday) {
    case '1':
        weekday = '一';
        alert('今天是星期' + weekday +'!');
        break;
    case '1':
        weekday = '二'
        alert('今天是星期' + weekday +'!');
        break;
    case '3':
        weekday = '三'
        alert('今天是星期' + weekday +'!');
        break;
    case '4':
        weekday = '四'
        alert('今天是星期' + weekday +'!');
        break;
    case '5':
        weekday = '五'
        alert('今天是星期' + weekday +'!');
        break;
    case '6':
        weekday = '六'
        alert('今天是星期' + weekday +'!');
        break;
    case '7':
        weekday = '天'
        alert('今天是星期' + weekday +'!');
        break;
        default:
        alert('没按要求输入哦');
}

循环流程控制语句

for循环

语法:

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

  • 初始化变量

    就是用var声明的一个普通变量, 通常用于作为计数器使用

  • 条件表达式

    用来决定每一次循环是否继续执行   不满足条件则退出循环

  • 操作表达式

    ​ 每次循环最后执行的代码, 经常用于我们计数器变量进行更新(递增或者递减)

代码体验:

for (var i = 1; i <= 1000; i++) { console.log('你好吗'); }

断点调试

执行相同的代码:

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

执行不同的代码: 计数器的作用

for (var i = 1; i <= 100; i++) {
    console.log('这个人今年'+ i +'岁了');
}
for (var i = 1; i <= 100; i++) {
    if (i == 1) {
        console.log('这个人今年一岁了, 刚出生');
    } else if (i == 100) {
        console.log('这个人今年一百岁了, 刚死了');
    } else {
        console.log('这个人今年' + i + '岁了');
    }
}

重复某些相同的操作:

案例: 求1-100之间所有整数的累加和

分析:

需要将储存结果的变量sum, 初始值是0

sum=sum+i

var sum = 0; //求和的变量
for (var i = 1; i<=100; i++) {
    // sum= sum +i;
    sum += i;
}
console.log(sum);

案例: 求1-100之间所有能被3整除的数字的和

var result = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 3 == 0) {
        result += i;
    }
}
console.log('1-100之间能被3整除的数的和' + result);

案例: 用户输入班级人数, 之后依次输入每个学生的成绩, 最后打印出该班级总的成绩以及班级成绩

分析:

  • 输入总人数

  • 一次输入学生的成绩(用score保存起来), 此时我么你需要用到for循环, 弹出的次数跟班级人数有关系, 关系表达式 i<= num

  • 进行业务处理: 计算成绩.

    ​ 先求总成绩(sum), 之后求平均成绩(average)

  • 弹出结果

var num = prompt('请输入班级的总人数');
var sum = 0;//求和的变量
var average = 0; //求平均值的变量
for (var i = 1; i <= num; i++) {
    var score = prompt('请你输入第' + i + '个学生成绩'); // prompt取过来的数据是字符型;
    sum = sum + parseFloat(score);// score需要转换为数值型
}
average = sum / num;
alert('班级总的成绩是' + sum);
alert('班级平均分是' + average);

案例: 写一行5个星星

<div></div>
<script>
    var str = '';
    for (var i = 1; i <= 5; i++) {
        str = str + '⭐'
    }
    var div = document.querySelector('div')
    div.innerHTML = str;
</script>

任意个数的星星

<div></div>
<script>
    var str = '';
    var str1 = '';
    var num = prompt('请输入星星的个数')
    for (var i = 1; i <= num; i++) {
        if (i % 5 == 0) {
            str = str + '⭐<br>'
        } else {
            str = str + '⭐'
        }
    }
    console.log(str);
    var div =document.querySelector('div')
    div.innerHTML = str;
</script>

双重for循环

语法结构:

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

我们可以把里面的循环看作外层循环的语句
外面的循环循环一次, 里面的循环 执行全部

代码验证:

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

案例:打印五行五列的星星

思路:

内层循环负责一行打印5个星星
外层循环负责打印五行

实施:

var str = ''; //定义一个字符串型的变量来储存星星
for (var i= 1; i<=5; i++) {
    for (var j= 1; j<= 5; j++) {
        str = str + '⭐'
    }
    str = str + '\n'  //如果一行5个星星打印完毕就要另起一行喽
}
console.log(str);

案例:打印倒三角形

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

作业:打印正三角形

var str = '';
for (var i = 1; i <= 10; i++) {
    for (var j = 11-i; j <= 10; j++) {
        str += '⭐';
    }
    str += '\n';
}
console.log(str);

打印九九乘法表

分析

  1. 一共9行, 但是每行的个数不一样, 因此需要用到双重for循环
  2. 外层的for循环控制行数i, 循环9次, 可以打印9行
  3. 内层的for循环控制每行公式j
  4. 核心算法:每一行 公式的个数正好和行数一致, j<=i

实施

for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        //1*2=2
    //str = str +'\n';
    str += j + 'x' + i + '=' + i * j +'\t';
    // str += '\t'
    }
    str += '\n'

}
console.log(str);

小结

  1. for循环可以重复执行某些相同的代码
  2. 循环可以执行写于不同的代码, 因为我们有计数器
  3. for循环可以重复执行某些操作, 比如算术运算父加法操作
  4. 随着需求增加, 双重for循环可以做更多,更好看的效果
  5. 双重for循环, 外层循环一次, 内层循环全部执行
  6. for循环是循环条件和数字直接相关的循环
  7. 分析要比写代码更重要
  8. 一些核心算法想不到, 但是要学会, 分析执行过程
  9. 举一反三, 经常总结,, 做一些相似的案例

while循环

应用环境:

​ 当条件较为复杂是 使用while
​ 比for更加灵活

语法结构:

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

执行思路:

​ 当条件表达式结果为true的时候 , 则执行循环体, 否则退出循环

代码验证:

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

注意:

​ 应该初始化变量

​ while循环里面应该也有计数器,

​ 完成计数器的更新, 防止死循环

案例:

要求
弹出一个提示框 你爱我吗? 如果输入我爱你, 就提示结束, 否则一直询问;
分析
弹出输入框, 判断条件比较复杂 我们使用while

实施

var message= prompt('你爱我吗?');
while (message !== '我爱你') {
    message =prompt('你爱我吗?');
}
alert('我也爱你啊')

do…while循环

语法:

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

执行思路:

  • 跟while不同的地方在于 do while先执行循环体, 再判断条件.

  • 如果条件表达式为真, 则继续执行循环体, 否则退出循环.

代码体验

var i = 1;
do {
    console.log('how are you');
    i++;
} while (i <= 100);

注意:

​ 我们的do while循环体至少循环一次

循环小结

  1. js中循环有for while do while
  2. 三个循环很多情况下可以相互代替
  3. 如果是用来计数, 跟数字相关, 三者使用基本相同, 但是我们更喜欢用for
  4. while和do..while执可以做更复杂的条件判断, 比for循环灵活一些
  5. while和do while执行顺序不一样, while先判断后执行, do…while先执行一次, 再判断执行
  6. while和do…while执行次数, do…while至少会执行一次循环体, 而while可能一次也不执行

continue和break关键字

continue

​ 用于立即跳出本次循环, 继续下一次循环(本次循环体中continue之后的代码就会少执行一次)

​ 继续执行剩余次数的循环

代码:

for (var i = 1; i<=5; i++) {
    if (i==3) {
        continue; // 退出第三次的循环 不执行下面的log语句
    }
    console.log('我正在吃第'+ i+'包子');
}

案例:

​ 求1-100之间 除了能被7整除之外的整数和

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

break

​ 退出整个循环

案例:

​ 吃到第三个包子时 发现有虫子, 不再吃包子了

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

JS命名规范以及语法格式

标识符命名规范

  1. ​ 变量, 函数的命名必须有意义
  2. ​ 变量用名词
  3. ​ 函数的名称用动词

操作符规范

​ 操作符左右两侧保留一个空格

单行注释规范

​ 单行注释//

其他规范

…