JavaScript基础——流程控制

JavaScript基础——流程控制

一、概念

什么是流程控制

程序执行的过程中，通常就是按顺序从上到下执行代码，我们需要通过控制代码的执行顺序来实现我们要完成的功能

• 流程控制分为三种结构：顺序结构、分支结构、循环结构

二、结构用法

1.顺序结构

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

2.分支结构

根据不同的的条件，执行不同的路径代码，从而得到不同的结果

2.1 if语句

结构：

//小括号里只判断真假，为真就进入大括号，反之为假就不执行大括号的代码。
if(条件表达式){
	//需要执行的代码
}

案例：

let year = prompt('请输入你的练习时长')
//如果输入为2则是坤粉
if(year == 2){
    alert('恭喜你通过ikun考验！')
}

2.2 if…else双分支语句

结构：

//条件成立，执行if大括号的代码，否则执行else里面的代码
if(条件表达式){
    //条件成立时执行的代码
}else{
    //条件不成立时执行的代码
}

案例：

let year = prompt('请输入你的练习时长')
//如果输入为2则是坤粉
if(year == 2){
    alert('恭喜你通过ikun考验！')
}else{
    alert('你不是ikun！')
}

典型案例：判断闰年

接收用户输入的年份，如果是闰年就弹出闰年，否则就弹出平年

let year = prompt('请输入年份')
//能被4整除且不能被100整除的为闰年或者能够被400整除的就是闰年
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
    alert('闰年')
}else{
    alert('平年')
}

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

结构：

/*
当条件1满足，则执行语句1，如果条件1不满足则进行条件2判断，条件2满足则执行语句2，并且其他分支不会继续进行判断和执行了，如果条件2不满足，则进入条件3判断，依次类推。所有条件都不成立就进入else
*/
if(条件表达式1){
	//执行语句1
}else if(条件表达式2){
	//执行语句2
}else if(条件表达式3){
	//执行语句3
}else{
	//执行语句4
}

案例：判断成绩

/*
90分（含）以上，输出A

80分（含）-90分（不含），输出B

70分（含）-80分（不含），输出C

70分（不含）以下，输出D
*/
let score = prompt("请输入你的分数")

if(score >= 90){
	alert("你的成绩为：A")
}else if(score >= 80){
	alert("你的成绩为：B")
}else if(score >= 70){
	alert("你的成绩为：C")
}else{
	alert("你的成绩为：D")
}

2.4 switch语句

结构：

/*
根据表达式的值进入到相匹配的value分支然后执行该分支的代码，最后一定要通过break结束语句否则会继续执行该分支以下的所有分支包括default，如果表达式的值跟case的所有分支匹配不是就会进入default分支
*/
	switch(表达式) {
        case value1:
            执行语句1; // 等于 value1 时要执行的代码
            break;
        case value2:
            执行语句2; // 等于 value2 时要执行的代码
            break;
        ... // 可设置多个分支
        default:
            执行最后的语句; // 不等于 value 时要执行的代码
    }

案例：姓名查询

let name = prompt('请你输入查询的姓名')
switch (name) {
     case '张三':
         alert('你好！我是张三');
         break;
     case '李四':
         alert('你好！我是李四');
         break;
     case '翠花':
         alert('你好！我是翠花');
         break;
     default:
         alert('我们村可没这个人！')
}

switch和if…else…if区别：

1. 一般情况下，两者可以相互替换
2. switch也叫开关语句，一般用于有确定的值来执行不同的代码，而if…else…if一般用于范围判断
3. 当分支较多，switch比if…else…if效率更高
4. 当分支较少，if…else…if比switch效率更高

3.循环结构

在执行一些语句的时候可能会重复执行同一个操作，每一个操作都写一遍就会很麻烦，所有这时就需要用到循环语句

主要有三种类型的循环语句：for循环、while循环、do…while循环

3.1 for循环：

结构：

/*
1.初始变量：声明一个普通变量并赋值，或者已经赋值的变量
2.条件表达式：判断是否继续执行循环
3.操作表达式：每次循环体执行完后执行的代码
*/
for(初始变量;条件表达式;操作表达式){
	//循环体
}

案例：

    let arr = [1,2,3,4,5]
	for (var i = 0; i < arr.length; i++){	//arr.lenght是数组的长度，这里为5
        console.log('现在的i为:' + i,arr[i])
    }
	console.log(i)

双重for循环：

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

3.2 while循环

//当表达式成立则执行循环体直到表达式不成立
while(条件表达式){
	//循环体
}

案例：1-100累加

let sum = 0
let i = 1
while(i <= 100){
    sum += i
    i++
}
console.log(sum) //5050

3.3 do while循环

/*
跟while不同的地方在于do while先执行一次循环体，再判断条件。如果条件表达式结果为真，则继续执行循环体，否则退出循环
*/
do{
	//循环体
}while(条件表达式)

案例：1-100求和

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

补充：

continue	跳出本次循环，然后执行下次循环。比如要循环7次的，中间达到某个要求使用了continue，立即跳出循环体，继续执行下个循环
break	立即跳出整个循环（循环结束）