前端系统化学习【JS篇】:(八)JS中的判断与循环

224 阅读5分钟

前言

  • 细阅此文章大概需要 6分钟\color{red}{6分钟}左右
  • 本篇中讲述了:
      1. 基本判断
          1. if/else
          1. 三元运算符
          1. switch case
      1. == 和 === 的区别
      1. && 和 ||【逻辑与、逻辑或】
      1. 循环
          1. for
          1. for in
          1. for of(ES6)
          1. while
          1. do while
  • 如果有任何问题都可以留言给我,我看到了就会回复,如果我解决不了也可以一起探讨、学习。如果认为有任何错误都还请您不吝赐教,帮我指正,在下万分感谢。希望今后能和大家共同学习、进步。
  • 下一篇会尽快更新,已经写好的文章也会在今后随着理解加深或者加入一些图解而断断续续的进行修改。
  • 如果觉得这篇文章对您有帮助,还请点个赞支持一下,谢谢大家!
  • 欢迎转载,注明出处即可。

JS中的判断与循环


判断语句

1. if/else


2. 三元运算符(简单if/else的特殊处理方式)

  • 格式:
    • 条件?条件成立时执行的语句:条件不成立时执行的语句
  • 执行语句的写法:
    1. 如果执行语句比较多,可以用括号包起来,【每条语句间用逗号分隔。】
    2. 如果不需要执行语句,则可以使用null/undefined占位
      //基本上只有一个if和一个else才去改写三元运算符
      //否则还是用if/else比较清楚
      a > 0?(a<0?a++:a--,console.log(a)):(a>-10?a+=2:null);
    

3. switch case:(一个变量在不同值情况下的不同操作)

  • 格式:
      //若某值成立时要执行多条语句,则用分号隔开,若没有语句则不写分号
      switch(变量){
         case1:
         case2:值2成立时要执行的语句1;值2成立时要执行的语句2;
         case3:值3成立时要执行的语句;
        }
    
  • 注意事项:
  1. 在switch语句中,case在进行比较的时候,使用的比较都是==="全等于"
      let a = '3';
      switch(a){
          case 1:a++;
          case 3:a+=2;break;
          default:console.log(--a);
          //执行结果为2,case在比较时使用的是全等于'===','3'和3相比不会成立。
        }
    
  2. 每一种case情况结束后最好都加上break
  3. 若不加break,从成立的case执行完成之后,无论后面的条件是否成立都要继续向下执行,直到遇到break为止
        //若不加break,从成立的case执行完成之后,无论后面的条件是否成立都要继续向下执行,直到遇到break为止
        let a = 1;
         switch(a){
            case 1:a++;
            case 5:a+=2;break;
            default:a--;
            //执行结果为4,因为case1时,没有break,则程序继续向下执行。
          }
    
  4. 不加break也有其应用场景:比如说【需要变量在某些值成立时都执行一样的操作。】
        //不加break也有其应用场景:比如说【需要变量在某些值成立时都执行一样的操作。】
        let a = 1;
        switch(a){
            case 1:
            case 3:
            case 5:a+=2;break;
            default:a--;
            //执行结果为3,因为当a等于1、3、5时,执行a+=2;
        }
    
  5. default等价于if语句中的else,为【以上case都不成立时,要执行的语句】

== 和 === 的区别

  • ==:相等【如果左右两边数据值类型不同,是默认先转换为相同的类型,然后再比较】【值不同】
     '5'== 5 =>true
    
  • ===:全等于 【如果左右两边数据值类型不同,则一定不相等】【地址不同】
     '5'=== 5 =>false
    
  • 建议在真实项目使用时使用===来保证业务逻辑的严谨性

&& 和 ||【逻辑与、逻辑或】

  • A||B: 如果A为真,则返回A的值,否则返回B的值
  • A&&B: A为真返回B的值,否则返回A的值
  • A||B&&C||D:&&的优先级大于||,运算规则照旧

循环语句

  • 循环语法
    • 1.创建循环初始值
    • 2.设置(验证)循环执行的条件
    • 3.条件成立执行循环体中的内容
    • 4.当前循环结束执行步长累计操作(i++.. )
  • 循环体中的两个关键词
    • continue:结束当前这轮循环(continue后面的代码不再执行),直接进入下一轮循环
    • break:强制结束整个循环(break后面的代码也不再执行),整个循环直接结束

1. for循环


2. for in循环

  • 用来循环遍历对象中的键值对的(continue和break同样适用)
  • 语法: for(var(或let) 变量(常用key) in 对象 )
  • 循环次数是对象中的键值对组数【除非break结束】
  • 【每一次循环,key存储的是要遍历的对象当中的属性名(键)】
  • 获取属性值:【相当于obj[变量](字符串不加引号所代表的是一个变量,而不是一个属性名)】obj[属性名]=>obj[key]
  • forin循环在遍历时,是优先遍历所有数字属性名【且数字由小到大顺序】,接着循环非数字的
    var obj={ 
        name:'aa',
        age:10,
        1:20,
        2:30,
        3:40
    };
    //想要输出所有内容
    //for(var(或let) 变量(常用key) in 对象 )
    //循环次数是对象中的键值对组数【除非break结束】
    for(var key in obj){
        console.log(key);//1 2 3 name age 
        console.log(obj[key]);//20 30 40 'aa' 10
        console.log('属性名:'+key+'属性值:'+obj[key]);
        //属性名:1属性值:20 
        //属性名:2属性值:30 
        //属性名:3属性值:40 
        //属性名:'name'属性值:'aa' 
        //属性名:'age'属性值:10 
       
    }

3. for of循环(ES6)

  • 遍历数组里的每一项
  • 与forin的区别
    1. for of无法循环遍历对象
          
          let obj = {
              0: 'aaa',
              1: 'bbb',
              2: 'ccc',	
              3: 'ddd'
          };
          /* for in */
          for(let key in obj){
              console.log(key, obj[key]);	
          }
          /* 0 aaa
           * 1 bbb
           * 2 ccc
           * 3 ddd
           */
      
          /* for of */
          for(let item of obj){	
              console.log(item);
          }
          /* 报错Uncaught TypeError: obj is not iterable */
      
      
    2. 遍历的内容不同
      • for in循环遍历的是数组的键值(索引),而for of循环遍历的是数组的值。
         
         let arr = ['aaa','bbb','ccc','ddd'];
         /* for in */
         for(let key in arr){
             console.log(key);	
         }
         /* 0 
          * 1 
          * 2 
          * 3 
          */
      
         /* for of */
         for(let item of arr){	
             console.log(item);
         }
         /*  aaa
          *  bbb
          *  ccc
          *  ddd
          */
      
    3. for in 会遍历自定义属性,for of不会
         
         let arr = ['aaa','bbb','ccc','ddd'];
         arr.eee = 'eee'
         /* for in */
         for(let key in arr){
             console.log(key+"==="+arr[key]);	
         }
         /* 0===aaa
            1===bbb
            2===ccc
            3===ddd
            eee===eee
          */
      
         /* for of */
         for(let item of arr){	
             console.log(item);
         }
         /*  aaa
          *  bbb
          *  ccc
          *  ddd
          */
      

4. while循环

5. do while循环