JavaScript 流程控制语句(if和switch)

代码块

  • 用{ }包围起来的代码,就是代码块。
  • 在ES5语法中,代码块,只具有分组的作用,没有其他的用途,代码块中的内容在外部是完全可见的
    {
        var a = 2;
        alert('qianguyihao');
        console.log('永不止步');
    }
    
    console.log('a = ' + a);

    打印结果:(可以看出,虽然变量a是定义在代码块中的,但是在外部也是可以访问的)

  • 永不止步
    a = 2

 流程控制语句

在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的,所有,我们必须清楚每条语句的执行流程,而且,很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能。

流程控制语句分类

顺序结构

选择结构:if语句、switch语句

循环结构:while语句。for语句

顺序结构:

按照代码的先后顺序,依次执行。开始>语句A>语句B>结束

if语句

1、条件判断语句(条件成立执行,条件不成立,就什么都不做)

if(条件表达式) {

//条件为真时,做的事情

}

2、条件分支语句

格式1:

 if(条件表达式) {
        // 条件为真时,做的事情
       } else {
        // 条件为假时,做的事情
       }

格式2:多分支的if语句

if(条件表达式1) {
        // 条件1为真时,做的事情
       } else if (条件表达式2){
        // 条件1不满足,条件2满足时做的事情
       } else if (条件表达式3) {
        // 条件12不满足,条件3满足时做的事情
       }else {
        // 条件123都不满足时,做的事情
       }

练习:

根据BMI(身体质量指数)显示一个人的体型。
BMI指数,就是体重、身高的一个计算公式。公式是:
BMI =体重÷身高的平方

比如,老师的体重是81.6公斤,身高是1.71米。
那么老师的BMI就是  81.6 ÷ 1.712     等于 27.906022365856163

过轻:低于18.5
正常:18.5-24.99999999
过重:25-27.9999999
肥胖:28-32
非常肥胖, 高于32

用JavaScript开发一个程序,让用户先输入自己的体重,然后输入自己的身高(弹出两次prompt框)。
计算它的BMI,根据上表,弹出用户的身体情况。比如“过轻” 、 “正常” 、“过重” 、 “肥胖” 、“非常肥胖”。

 

// 第一步,输入身高体重
			let height = parseFloat(prompt('请输入身高,单位是米'));
			let weight = parseFloat(prompt('请输入体重,单位是公斤'));
			// 计算BMI
			let BMI = weight / Math.pow(height,2)
			// if语句来判断,注意跳楼现象(就是下一个楼层已经暗含之上的楼层都不满足。)
			if (BMI < 18.5) {
				alert('偏瘦');
			}else if(BMI<25) {
				alert('正常');
			}else if(BMI< 28) {
				alert('过重');
			}else if (BMI<=32) {
				alert('肥胖');
			}else {
				alert('非常肥胖');
			}

if语句的嵌套

我通过在网上找到一个例子来了解什么是if语句的镶嵌。

一个加油站为了鼓励车主多加油,所以加的多有优惠。
92号汽油,每升6元;如果大于等于20升,那么每升5.9;
97号汽油,每升7元;如果大于等于30升,那么每升6.95
编写JS程序,用户输入自己的汽油编号,然后输入自己加多少升,弹出价格。

 

<script>
			//第一步,输入
			var bianhao = parseInt(prompt('您想加什么油?填写92或者97'));
			var sheng = parseFloat(prompt('您想加多少升?'));
			
			//第二步,判断
			if (bianhao == 92) {
			    //编号是92的时候做的事情
			    if (sheng >= 20) {
			        var price = sheng * 5.9;
			    } else {
			        var price = sheng * 6;
			    }
			} else if (bianhao == 97) {
			    //编号是97的时候做的事情
			    if (sheng >= 30) {
			        var price = sheng * 6.95;
			    } else {
			        var price = sheng * 7;
			    }
			} else {
			    alert('不好意思,没有这个编号的汽油!');
			}
			
			alert('价格是' + price);
		</script>

 swich语句(条件分支语句)

格式:

switch(表达式) {
	case 值1:
		语句体1;
		break;

	case 值2:
		语句体2;
		break;

	...
	...

	default:
		语句体 n+1;
		break;
}

 执行流程:

首先,计算出表达式的值,和case依次比较,一旦有对应的值,就会执行相应的语句,在执行过程中,遇到braeak就会结束。

然后,如果所有的case都和表达式的值不匹配,就会执行default语句。

举例:

<script>
			let msg = 'notice';
			
			switch (msg) {
				case 'notice':
				console.log('提示');
				break;
				case 'warning':
				console.log('警告');
				break;
				case 'error':
				console.log('错误');
				break;
				default:
				console.log('默认');
				break;
			}
		</script>

 switch语句的结束条件

 情况1 遇到break就结束,而不是遇到default结束

情况2 执行到程序的末尾就结尾

我在百度switch语句时遇到新的概念:

case穿透:

举例1:case穿透的情况

<script>
			var num = 4;
			switch(num) {
				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;
				case 7:
				console.log('星期日');
				break;
				default:
				console.log('你输入的数据有误');
				break;
			}
		</script>

结果:

星期四
星期五
星期六

 举例2

var number = 5;

switch (number) {
    default:
        console.log('我是defaul语句');
    // break;
    case 2:
        console.log('第二个呵呵:' + number);
    //break;
    case 3:
        console.log('第三个呵呵:' + number);
        break;
    case 4:
        console.log('第四个呵呵:' + number);
        break;
}

switch语句的实战举例:替换if语句

我们在项目开发中,经常会根据接口的返回码retCode,来让前端做不同的展示。

写法1(这种写法太挫了,我就被同学大佬嘲讽半天)

<script>
			let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
			
			if (retCode == 0) {
			    alert('接口联调成功');
			} else if (retCode == 101) {
			    alert('活动不存在');
			} else if (retCode == 103) {
			    alert('活动未开始');
			} else if (retCode == 104) {
			    alert('活动已结束');
			} else if (retCode == 1001) {
			    alert('参数错误');
			} else if (retCode == 1002) {
			    alert('接口频率限制');
			} else if (retCode == 1003) {
			    alert('未登录');
			} else if (retCode == 1004) {
			    alert('(风控用户)提示 活动太火爆啦~军万马都在挤,请稍后再试');
			} else {
			    // 其他异常返回码
			    alert('系统君失联了,请稍候再试');
			}
		</script>

 写法2:通过return 的方法,这个方法是我目前掌握的方法,但是没有真正的在项目开发实践过。

	let retCode = 1003; // 返回码 retCode 的值可能有很多种情况
			handleRetCode(retCode);
			
			// 方法:根据接口不同的返回码,处理前端不同的显示状态
			function handleRetCode(retCode) {
			    if (retCode == 0) {
			        alert('接口联调成功');
			        return;
			    }
			    if (retCode == 101) {
			        alert('活动不存在');
			        return;
			    }
			    if (retCode == 102) {
			        alert('活动未开始');
			        return;
			    }
			
			    if (retCode == 104) {
			        alert('活动已结束');
			        return;
			    }
			
			    if (retCode == 1001) {
			        alert('参数错误');
			        return;
			    }
			
			    if (retCode == 1002) {
			        alert('接口频率限制');
			        return;
			    }
			
			    if (retCode == 1003) {
			        alert('未登录');
			        return;
			    }
			
			    if (retCode == 1004) {
			        alert('(风控用户)提示 活动太火爆啦~军万马都在挤,请稍后再试');
			        return;
			    }
			
			    // 其他异常返回码
			    alert('系统君失联了,请稍候再试');
			    return;
			}

写法3:这个方法是百度出来的方法,具体在项目开发中的应用程度我就不知道了。

let retCode = 1003; // 返回码 retCode 的值可能有很多种情况

switch (retCode) {
    case 0:
        alert('接口联调成功');
        break;
    case 101:
        alert('活动不存在');
        break;

    case 103:
        alert('活动未开始');
        break;

    case 104:
        alert('活动已结束');
        break;

    case 1001:
        alert('参数错误');
        break;

    case 1002:
        alert('接口频率限制');
        break;

    case 1003:
        alert('未登录');
        break;

    case 1004:
        alert('(风控用户)提示 活动太火爆啦~军万马都在挤,请稍后再试');
        break;

    // 其他异常返回码
    default:
        alert('系统君失联了,请稍候再试');
        break;
}
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值