JavaScript流程控制语句

代码块：

JS中，可以通过代码块来为代码进行分组，

在同一个代码块中的代码就属于一组代码

这组代码要么全都执行，要么都不执行

JS的代码块比较奇葩。

通常情况下，代码块对于外部来说应该是隔离的，

在代码块外部是不能看到代码块内容的

在JS中，使用var声明的变量，是没有块级作用域的，

在{ }中声明的变量，在{ }外部依然可以访问！

{ var a = 10;}

console.log(a);

为了解决该问题，在后来的JS版本中，引入新的声明变量的方式 let，

使用let声明的变量，就具有块级作用域

除了let，在js中还提供了一种声明常量的方式 const

{let a = 33; // let 是js中提供的新的声明变量的方式}

const b = 100; // const 用于声明常量，常量一旦声明，就不能进行重新赋值

// b = 11; 常量不能再重新赋值

console.log(b);

if流程控制语句:

通过流程控制语句，可以改变代码的执行的顺序，

或者可以让指定的代码反复执行多次

流程控制语句的分类：

条件判断语句

条件分支语句

循环语句

条件判断语句

if语句

- 语法：

if(条件表达式){

语句...

}

- 执行流程：

if语句在执行时，会先对if后的条件表达式进行求值判断，

如果是true，则执行if后的语句

如果是false，则不执行

if只会影响到紧随它后边的那条语句，如果希望if语句可以控制多条语句，

可以将多条语句统一放到一个代码块中

一般情况下，为了结构清晰，即使if后只有一条语句，也应该放入到一个代码块中

var a = 30;

if(a > 20){

console.log('a比20大');

}

1.2 if-else语句:

语法：

if(条件表达式){

语句...

}else{

语句...

}

- 执行流程：

if-else语句在执行时，会先对if后的条件表达式进行求值判断，

如果结果为true，则执行if后的语句

如果结果为false，则执行else后的语句

if-else if-else

- 语法：

if(条件表达式){

语句...

}else if(条件表达式){

语句...

}else if(条件表达式){

语句...

}else if(条件表达式){

语句...

}else{

语句...

}

- 执行流程：

if-else if-else执行时，会自上向下依次对if后的条件表达式进行求值判断，

如果条件表达式结果为true，则执行if后的语句，执行完毕语句结束

如果条件表达式结果为false，则继续向下判断，以此类推

知道找到为true的为止，如果所有的条件表达式都为false，

则执行else后的语句

if-else if-else 语句中只会有一个代码块执行，

一旦有满足条件的代码块执行了，则语句会立即退出，其他的代码块不会执行

案例：//prompt()函数可以用来获取用户输入的内容

// 创建一个变量，来存储一个人的年龄

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

if(age > 200){

alert('活着可真累~~');

}else if(age > 80){

alert('你也老大不小了~~~');

}else if(age > 59){

alert('你已经退休了~~~');

}else if(age > 30){

alert('你已经步入中年了~~~~');

}else if(age > 17){

alert('你已经成年了~~~');

}else{

alert('你还是个小孩~~~');

}

1.3 if-else语句的问题案例:

// 创建一个变量，来存储一个人的年龄

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

// 以下代码是否存在问题？怎么修改？

//问题在于>17写在最前面，一旦大于17就直接返回，后面的代码就成了死代码。

// if(age > 17 && age <= 30){

// alert('你已经成年了~~');

// }else if(age > 30 && age <= 59){

// alert('你已经中年了~~~');

// }else if(age > 59){

// alert('你已经退休了~~~')

// }

---//以下是正确方式：

if( age >= 60){

alert('你已经退休了！');

}else if(age >= 30){

alert('你已经中年了！');

}else if(age >= 18){

alert('你已经成年了');

}

1.4：if的5个>练习：

1---练习1： 编写一个程序，获取一个用户输入的整数。

然后通过程序显示这个数是奇数还是偶数。

// 获取用户输入的整数

var num = prompt('请输入一个整数：');

//检查数字是否是偶数

if(num % 2 == 0){

alert(num+' 是偶数！');

}else if(num % 2 == 1 || num % 2 == -1){

alert(num+' 是奇数！');

}else{

alert('输入有误，请重新输入！');

}

2—练习2：编写一个程序，检查任意一个年份是否是闰年。

如果一个年份可以被4整除不能被100整除，或者可以被400整除，这个年份就是闰年

//获取一个年份

var year = prompt('请输入一个年份：');

// 检查year是否是闰年

if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0){

alert(year + '年是闰年！');

}else{

alert(year + '年是平年！');

}

练习3： 我家的狗5岁了，5岁的狗相当于多大年龄的人呢？

其实非常简单，狗的前两年每一年相当于人类的10.5岁，然后每增加一年就增加四岁。

那么5岁的狗相等于人类的年龄就应该是10.5+10.5+4+4+4 = 33岁

编写一个程序，获取用户输入的狗的年龄，然后通过程序显示其相当于人类的年龄。

如果用户输入负数，请显示一个提示信息

//先获取用户输入的够的年龄

var dogAge = prompt('你家狗多大了：');

//检查用户的输入是否合法

// 如果isNaN()返回true，证明用户输入的是一个非法的数字

if(isNaN(dogAge) || dogAge < 0){

//如果进入判断，证明用户输入的是一个非法数字，显示错误信息

alert('你输入的信息有误！');

}else{

//在外部声明一个变量，用来存储狗相当于人的年龄

var likePersonAge;

//判断狗的年龄是否超过两岁

if(dogAge <= 2){

likePersonAge = dogAge * 10.5;

}else{

// 进入else，表示狗的年龄超过了2岁

likePersonAge = 2 * 10.5 + (dogAge - 2) * 4;

}

alert(dogAge+'岁的狗相当于'+likePersonAge+'岁的人!');

}

练习4： 从键盘输入小明的期末成绩:

当成绩为100时，'奖励一辆BMW'

当成绩为[80-99]时，'奖励一台iphone'

当成绩为[60-79]时，'奖励一本参考书'

其他时，什么奖励也没有

if(score >= 0 && score <= 100){

//进入判断，证明用户输入的合法

// 当成绩为100时，'奖励一辆BMW'

if(score == 100){

alert('送你一台大宝马，拿去开~~');

}else if(score >= 80){

// 当成绩为[80-99]时，'奖励一台huawei'

alert('奖励一台HUAWEI Mate 10000pro');

}else if(score >= 60){

// 当成绩为[60-79]时，'奖励一本参考书'

alert('送你一本《JavaScript编程精解》');

}else{

alert('送你加特林自裁~');

}

}else{

//进入else，证明用户输入的内容有问题

alert('您输入的值有问题，哒哒哒哒哒，枪毙！');

}

练习5： 大家都知道，男大当婚，女大当嫁。

那么女方家长要嫁女儿，当然要提出一定的条件：

高：180cm以上;

富:1000万以上;

帅:500以上;

如果这三个条件同时满足，则:'我一定要嫁给他'

如果三个条件有为真的情况，则:'嫁吧，比上不足，比下有余。'

如果三个条件都不满足，则:'不嫁！'

// 获取男方的信息-- 身高

var height = prompt('请输入您的身高（CM）');

// 财富

var money = prompt('请输入您的总资产（万元）');

// 颜值

var face = prompt('请输入您的颜值（PX）');

// 判断嫁不嫁给他

if(height > 180 && money > 1000 && face > 500){

// 如果这三个条件同时满足，则:'我一定要嫁给他'

alert('我一定要嫁给他~');

}else if(height > 180 || money > 1000 || face > 500){

// 如果三个条件有为真的情况，则:'嫁吧，比上不足，比下有余。'

alert('嫁吧，比上不足，比下有余。');

}else{

// 如果三个条件都不满足，则:'不嫁！'

alert('不嫁！');

}

1.5--条件表达式不需要必须是布尔值:

{

let a = 10;

const b = 20;

}

// console.log(b);

// 条件表达式不需要必须是布尔值，也可以是其他类型的值

// 其他类型的值会被转换为布尔值，然后判断

if(NaN){

alert('我会执行吗！');

}

 条件分支语句（switch-case）:

switch(表达式){

case 表达式:

语句....

break;

case 表达式:

语句...

break;

case 表达式:

语句...

break;

default:

语句....

break;

}

执行的流程：

switch-case语句在执行时，

会自上向下将case后的表达式和switch后()中的表达式进行全等比较

如果比较结果为true，则自当前case处开始执行代码

如果比较结果为false，则继续向下比较，直到找到true为止。

如果所有的比较结果都false，则自default处开始执行代码

注意，当case后的表达式和switch后的表达式全等比较结果为true时，

会从当前case处开始向下执行代码，此时它下边的所有代码都会执行，

哪怕是其他case后的代码，如果不希望执行其他case后的代码，

可以在语句的最后使用break关键字。

switch-case被称为条件分支语句，它的作用和if-else基本上是一样的，

换句话说，可以通过if-else来实现switch-case的功能

同样也可以通过switch-case来实现if-else的功能

在开发中还是会以if-else为主

当你判断的条件都是这种 xxx === yyy，比较适合使用switch-case

练习：根据用户输入的数字，打印星期几。

num = prompt("请输入一个数字:");

switch (num) {

case '1':

alert('壹');

break;

case '2':

alert('贰');

break;

case '3':

alert('叁');

break;

default:

alert('你输错了！');

break;

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！