JavaScript 03-12条件语句与while循环

if 语句

语法

1. if( 表达式 ){执行程序}

当表达式的结果为true，执行程序，当表达式的结果为false，没有执行程序。

实例

// 当月薪超过 10W , 可以获得 零花钱 100 元
// 当月薪小于 10W , 就没有零花钱
var pay = 50000;
if(pay > 100000){
console.log('恭喜我自己,获得 100 元零花钱');
}

2. if(表达式){程序1}else{程序2}

当表达式结果为 true，执行程序1，当表达式结果为 false，执行程序2。

实例

月薪超过 10W , 可以获得 零花钱 100 元
当月薪小于 10W , 可以获得 零花钱 50 元
var pay = 150000;
if(pay > 100000){
    console.log('恭喜我自己,获得 100 元零花钱');
}
else{
    console.log('恭喜我自己,获得 50 元零花钱');
}

3. if(条件1){程序1}else if(条件2){程序2}else if(条件3){程序3}…

当满足条件1，执行程序1，当满足条件2，执行程序2… 满足哪个条件就执行哪个条件的程序 判断的顺序是从上至下，如果满足了第一个条件，之后的条件都不会再判断和执行，最终只会执行一个程序，如果所有的条件都不满足，是没有执行内容的。

实例

var pay = 50000;
if(pay > 100000){
    console.log('恭喜我自己,获得 100 元零花钱');
}
else if(pay > 90000 && pay < 100000){
    console.log('恭喜我自己,获得 90 元零花钱');
}
else if(pay > 80000 && pay < 90000){
    console.log('恭喜我自己,获得 80 元零花钱');
}
else if(pay > 70000 && pay < 80000){
    console.log('恭喜我自己,获得 70 元零花钱');
}

4. if(条件1){程序1}else if(条件2){程序2}else if(条件3){程序3}…else{}

从第一个条件开始判断，满足哪个条件就执行对应的程序。 满足当前条件之后，执行对应的当前程序，之后的else if()，else 不会执行。 如果所有的条件都不满足，会执行 else 中的程序。

实例

if(pay >= 100000){
    console.log('恭喜我自己,获得 100 元零花钱');
}
else if(pay >= 90000 && pay < 100000){
    console.log('恭喜我自己,获得 90 元零花钱');
}
else if(pay >= 80000 && pay < 90000){
    console.log('恭喜我自己,获得 80 元零花钱');
}
else if(pay >= 70000 && pay < 80000){
    console.log('恭喜我自己,获得 70 元零花钱');
}
else{
    console.log('工资少于7W,我只能跪搓衣板');
}  // 一般else 做容错处理，else 之后没有(),没有条件,不要多加内容

注意：if语句，写判断条件时，要注意边界值的设定。

if 语句的嵌套

简单if语句，指的是没有嵌套的if语句，只是就简单的if…else语句，实际中if语句往往是可以嵌套的。

实例

// 如果是偶数,判断是否在20-50之间,如果在输出 这个数是偶数,在20-50之间
//                          如果不在,输出, 这个数是偶数,不在20-50之间
// 如果是奇数,判断是否在60-80之间,如果在输出 这个数是奇数,在60-80之间
//                          如果不在,输出, 这个数是奇数,不在60-80之间
var int = 55;
// 判断如果是奇数
if(int % 2 != 0){   
    // 奇数的情况,再做判断,范围 60-80
    if(int >= 60 && int <= 80 ){
        console.log(int + '是奇数,在60-80范围内');
    }else{
        console.log(int + '是奇数,不在60-80范围内');
    }
}else{
    // 偶数情况,再做判断,范围 20-50
    if(int >= 20 && int <= 50 ){
        console.log(int + '是偶数,在20-50范围内');
    }else{
        console.log(int + '是偶数,不在20-50范围内');
    }
}

注意：这样的if嵌套，就不要写成三元运算符的形式。

switch 语句

switch语句也是判断语句形式的一种，功能与if判断基本相同，只是使用环境不同。

语法

switch(n) { 
    case 1: 
        执行代码块 1;
        break; 
    case 2: 
        执行代码块 2;
        break; 
    default: 
        与 case 1 和 case 2 不同时执行的代码;
}

case 关键词

是变量对应的数值，要执行的对应程序。对于数值的判断，执行的是 === 严格比较 / 全等判断。

default 关键词

对应的是 if语句中的 else，也就是当变量的数值不满足所有的 case 时，执行的程序。

break 关键词

终止语句。
switch 默认会从定位的位置开始，执行之后所有的程序，除非遇到 break 关键词，才会终止程序的执行。
因此，每一个case的定位，每一种执行情况，都要配合一个break 做终止，防止程序执行的冲突。 最后一个程序，可以不加 break加不加看个人习惯。

if 语句和 switch 语句的区别

1. if 语句，往往做比较判断，判断是范围。逻辑运算符，使用 if 语句做判断。
2. switch 判断等于某个具体数值时，我们使用switch语句，switch的执行效率高于 if 判断。
3. switch一定能写成 if ，但是有些 if 不适合写成 switch。

实例

// 有商品编号 1-5 5种商品 , 根据不同的商品编号,输出商品信息
var num = parseInt(Math.random() * 5 + 1);
if (num == 1) {
    console.log(`随机数是${num},输出的是第一种商品的信息`);
} else if (num == 2) {
    console.log(`随机数是${num},输出的是第二种商品的信息`);
} else if (num == 3) {
    console.log(`随机数是${num},输出的是第三种商品的信息`);
} else if (num == 4) {
    console.log(`随机数是${num},输出的是第四种商品的信息`);
} else if (num == 5) {
    console.log(`随机数是${num},输出的是第五种商品的信息`);
} else {
    console.log('您输入的商品编号有误,无法查询对应的商品信息');
}

// 如果判断是否等于某个值,例如 5 
// 需要从第一个条件开始执行判断,执行到5,要多判断4次 false
// 如果判断较多,执行效率就会比较低
// 此时就推荐使用 switch 语法

// switch 是 根据变量的数值,来进行定位
// 如果 num 数值是5,直接定义到5,执行对应的程序内容
// 不会做过多的判断,效率就比if判断的效率高

switch (num) {
    case 1:
        console.log(`随机数是${num},输出的是第一种商品的信息`);
        break;
    case 2:
        console.log(`随机数是${num},输出的是第二种商品的信息`);
        break;
    case 3:
        console.log(`随机数是${num},输出的是第三种商品的信息`);
        break;
    case 4:
        console.log(`随机数是${num},输出的是第四种商品的信息`);
        break;
    case 5:
        console.log(`随机数是${num},输出的是第五种商品的信息`);
        break;
    default:
        console.log('您输入的商品编号有误,无法查询对应的商品信息');
        break;
}

随机数

在JavaScript中，有自己生成随机数的语法，与PHP、Python、Java都不同。

Math.random() 随机生成 0-1的小数,可以是0,永远不会是1。
例如：

console.log( Math.random() );    //输出一个0~1之间的随机小数

一般使用时,都是生成一个随机整数。

parseInt() 获取数值的整数部分。

有生成随机整数的公式，如果需要生成数值的范围是 a - b 那么公式是：

随机数*(b+1-a) + a

结合起来就是

parseInt( Math.random() * (b+1-a) + a )

实例

// 例如要 生成 10 - 20 之间的整数 , 可以 取到10 和 20
parseInt( Math.random() * ( 20+1-10) + 10 )  
console.log( parseInt( Math.random() * ( 20+1-10) + 10 ) )

while 循环

语法

循环语句的基本语法格式由 4 部分组成：

1. 设定循环变量的初始值
2. 判断进入循环的条件
3. 循环体
4. 步长

实例

var i = 1;       //设定循环变量的初始值
while(i <= 5){   //判断进入循环的条件
    console.log('老婆大人我错了,我下次不会再犯了'); //循环体
    i++;         //步长
}
console.log(i)

while 循环和 if 的配合

实例

// demo：输出 1 - 10 中 , 所有的偶数
// 思路1: 循环生成1-10的所有整数
//        然后判断 这个数值是否是 偶数,如果是,执行输出,如果不是没有操作
var i = 1;
while(i <= 10){
    // 嵌套在循环{ } 中的 if判断
    // 这个if判断,也是循环体的一部分
    // 每次循环,if判断也会执行
    // 如果这个循环变量 i 的数值 可以被 2整除,也就是 此时的i 是偶数
    // 就执行输出
    // 否则就直接执行 步长 i++ 没有输出内容
    if(i % 2 == 0){
        console.log(i + '是偶数');
    }
    i++;
}
// 总结,这种思路,会循环10次,执行10次判断,5次是true,有输出,5次是false没有输出内容

while 循环的优化

实例

//还是上面那个demo：
// 思路2:可以直接生成1-10的偶数,直接输出,循环次数少,并且还不用判断,效率会提高---程序优化
// 所谓的偶数,相邻的两个偶数相差是2,偶数之间,步长是2
// 只要找到第一个偶数,将步长设定为2,获取到的就都是偶数了
// 就不需要判断,可以直接输出
// 1-10之间,第一个偶数是2 , 步长是 2 也就是 i+=2
var i = 2;
while(i <= 10){
    console.log(i);
    i+=2;
}

死循环

定义

所谓的死循环指的是，循环会一直判断进入条件，判断结果一直是true。循环也就是会一直执行，不会停止，这样的循环称为死循环。

实例

var i = 1;
while(i <= 10){
    console.log(i);
    i--;
}

当然，你也可以把console.log改为window.alert试试，此时会弹窗输出，看看会发生啥…