第一篇 JS 语言基础之判断与循环

可乐去冰
220 阅读4分钟

1.6 JS 中的操作语句: 判断语句 循环语句

1.6.1 判断语句

何为判断 : 条件成立做什么,不成立又做什么

常用的几种判断语句:

  • if / else if / else

  • 三元运算符

  • switch case

1.6.1.1 if / else

  1. 语法
       if(条件){
           条件成立执行
       }else if(条件 2){
           条件2成立执行
       }
       ...
       else{
           以上条件都不成立
       }
       // 注意 : 赋值的操作永远是恒成立的 比如说 if(a = 10)

     let a = 10;
       if (a <= 0) {
           console.log('哈哈');
       } else if (a > 0 && a < 10) {
           // A && B A 和 B 都成立才为 TRUE 
           // A || B A 或 B 任一成立就为 TRUE
           console.log('喝喝');
       } else if (a == 10) {
           console.log('嘿嘿');

       } else {
           console.log('嘻嘻');
       }
       最终输出'嘿嘿'


       let a = 10;
       if (a >= 0) {
           console.log('哈哈');
       } else if (a > 0 && a < 10) {
           // A && B A 和 B 都成立才为 TRUE 
           // A || B A 或 B 任一成立就为 TRUE
           console.log('喝喝');
       } else if (a == 10) {
           console.log('嘿嘿');

       } else {
           console.log('嘻嘻');
       }
       最终输出'哈哈'

对比以上可得结论: 只要有一个条件成立就执行,无论后续还有无成立的其他条件

  1. 条件可以多样性, 等于 小于 大于的比较 一个值 或者是取反等,最后都要计算出是 true 还是 false
条件可以多样性 :

        if(!a){}
        if(a){}
        ...

  1. 三元运算符

    适用于简单 if / else

    语法: 条件?条件成立执行的代码:条件不成立执行的代码,

    注意:

    1.如过处理的事情比较多,用小括号包括,每一件事用逗号分割

    2.如过不需要处理事情,可以用 null/ undefined 占位

    // 简易 if /else
     let a = 10;
     if (a <= 0) {
         console.log('哈哈');
     } else {
         console.log('嘻嘻');
     }
     
     转换为
     
     a <= 0 ? console.log('哈哈') : console.log('嘻嘻')
     
 // 多条件  占位
     
     if (a > 0 && a < 20) {
         a++;
         console.log(a);
     } 
转换为
a > 0 && a < 20 ?  a++ ,console.log(a)): null


// 三元套三元

     let a = 10;
     if (a > 0) {
         if (a < 10) {
             a++;
         } else {
             a--;
         }
     } else {
         if (a > -10) {
             a += 2;
         }
     }
     
// 改写
  a > 0 ?(a < 10 ? a++ :  a--) :(a > -10 ?  a += 2 : null )

1.6.1.2 switch case

适用于一个变量在不同值情况下的不同操作

语法:

switch(变量){

case(不同值):

条件成立要执行的代码;

break;

...

default:

以上条件都不成立要执行的代码;

}

  1. 每一种 case 情况结束后最好都加上 break

  2. default等价于 else,以上都不成立干的事情

  3. 如果不加 break,当前条件成立执行完成后,后面条件不论是否成立都要执行,直到遇到 break 或 default 为止

  4. 对不加 break 的应用,可以实现在不同值的情况下做相同的事.

  5. switch 的相等

    每一种 case 情况的比较用的都是 === '绝对相等'

  • == VS ===

== : 相等

  • 相等的运算方法是,如果左右两边数据值类型不同,想默认先转换为同样的类型,然后再进行比较

  • 除了对象和字符串,其余都要转换为 number 类型进行比较

  • 对象==对象的时候，如果引用地址相同，就相等，如果引用地址不同就不等

  • 对象==数字类型的时候，都先转换为数字，再比较

  • 对象==字符串类型的时候，把对象转换为字符串，再进行比较

  • 对象==布尔数据类型的时候，都先转换为数字，在比较

  • 数字==字符串，都先转换数字类型，再比较

  • 数字==布尔，都先转换为数字类型，再比较

  • 字符串==布尔，都先转换为数字类型，再比较

=== : 绝对相等

  • 绝对相等的运算 : 如果类型不一样,肯定不相等,不会默认转换数据类型

  • 绝对相等 : 类型和值都相等

  • 项目中为保证业务严谨,推荐使用 ===

//一个值在不同情况下的不同操作

        let a = 10;
        if (a == 1) {
            console.log(1);

        } else if (a == 5) { 
            console.log(2);

        } else if (a == 10) {
            console.log(3);

        } else {
            console.log(4);
        }
        // 最终打印 3
// 这种需求可以使用 switch case

        switch(a){
            case 1:
                console.log(1);
                break;
            case 5:
                console.log(2);
                break;
            case 10:
                console.log(3);
                break;
            default:
                console.log(4);                
        }
        // 最终打印 3
 =================================================
// 如果不加 break 
        switch(a){
            case 1:
                a++;
            case 5:
                a += 2;
                break;
            default:
                a-- ;
                    
        }
     // 最终输出 4
     
 =================================================
 // 不加 break 应用
      switch(a){
            case 1:
            case 5:
                a += 2;
                break;
            default:
                a-- ;      
        }
     //  输出 3
     
     

        let a = '5';
        if (a == 1) {
            console.log(1);

        } else if (a == 5) { // => '5' 转换为 number 5 ==> true
            console.log(2);

        } else {
            console.log(4);
        }
       // 输出 2

        switch (a) {
            case 1:
                console.log(1);
                break;
            case 5:      // 此处'5' case 5 => false
                console.log(2);
                break;
            default:
                console.log(4);
        }
       // 输出 4

1.6.2 循环语句

循环就是重复做某事

常用循环语句 :

  • for 循环语句

  • for in 循环语句

  • for of 循环语句 (ES6 新增)

  • while 循环语句

  • do while 循环语句

  • 注意 forEach 是方法,不是循环语句

1.6.2.1 for 循环语句

  1. for 循环的语法有四部分

    1. 创建循环初始值

2. 设置(验证)循环执行条件

3. 条件成立执行循环体中的内容

4. 当前循环结束执行步长累计操作

2. 3. 4. ... 2. 3. 4.

不满足 2 循环结束

image.png

    <script>
        for (var i = 0 ; i < 5 ; i++){
            console.log(i); // 0 1 2 3 4          
        }
        console.log(i); // 5
        
    </script>

循环与判断一起

        for (var i = 10 ; i > 4 ; i -= 2){
            if(i < 7) {
                i++ ;
            } else{
                i--;
            }
        }
        console.log(i); // 4 循环两次
  1. 循环体当中的两个关键词

  • continue

    • 结束当前本次循环(continue 后面的代码不再执行),继续执行当前循环的下一轮

  • break

    • 强制结束整个循环(break 后面代码也不执行),整个循环啥也不干直接结束

练习

     <script>
       for (var i = 0 ; i < 10 ; i++){
           if(i >= 2){
               i += 2; // i => 4 进入下一轮累计步长 => 7 进入下一轮累计步长 => 10 进入下一轮累计步长
               continue;
           }
           if(i >= 6){
               i--; 
               break;
           }
           i++;
           console.log(i); // 1             
       }
       console.log(i); //11 
       
   </script>      


    <script>
       for (var i = 0 ; i < 10 ; i++){
           if(i >= 2){
               i += 2; // i => 4 
               break;
           }
           if(i >= 6){
               i--; 
               continue;
           }
           i++;
           console.log(i); // 1             
       }
       console.log(i); //4
       
   </script>

项目二 判断数字正负(判断逻辑训练)

1.6.2.2 for in 循环语句

for in 循环: 用来循环遍历对象中的键值对, 适用continue和break

背景:

 var obj = {
            name : '小明',
            age : 10,
            height: 160,
            1:60,
            2:80,
            3:99
        }
  // 想要将属性挨个输出 除了console.log(属性名)这种方法
  1. 语法
for(var 变量(key) in 对象){
            // ...;
        }
  1. 特点:对象中有多少键值对,循环就执行几次
// 对象中有多少键值对,循环就执行几次,除非break结束  
// 每次循环key变量存储的值:当前对象的属性名
// 获取属性值 obj[key] 
 for(var 变量(key) in 对象){
            console.log(key);
        }
  1. 优先遍历数字属性名,且按照从小到大排列

image.png

image.png

avatar
文章
阅读
粉丝