JS超详细的入门小结（二）

（一）数据类型的转换

一、数据类型的转换介绍
在程序中，经常会有数据类型不一致的情况，得不到预期的结果就需要数据类型转换
1.其它类型转number
1.1 字符串类型转number

console.log(Number('123'));  //字符串123转换为123

1.2 转整数: parseInt(数据)

console.log( parseInt('11120.2qq'));  //取小数点前面的数字 

1.3 转小数: parseFloat(数据)

console.log( parseFloat('11120.2qq')); //取小数点后面一位数

1.4 非字符串类型转number

console.log(Number(true));  //true转换为数值为1 ，即输出为1
console.log(Number(false)); //false转换为数值为0 ，即输出为0
console.log(Number(undefined));//undefined 转任意数值型都输出为 NaN
 console.log(Number(null)); //null 转换为数值型0，即输出为0

2.number类型的特殊值转换

1.NaN :  number类型中一个特殊值
 not a number : 不是数字，如果你的运算得不到一个数字，此时就会得到NaN 
场景： NaN表示错误的运算。 产生的原因一般是代码出bug  
2.NaN特点： 不能参与任何运算。 结果一律是NaN 

3.string类型转换

1. String(数据)
 console.log(String(123));
 console.log(String(true));
 console.log(String(undefined));
 console.log(String(null));
 2. 变量名.toString()
        /* a. 如果是undefined与null，这种方式会报错 
           b. 这种方式可以支持进制转换。 例如把 十进制转十六进制 */     
 let num=255
 console.log(num.toString(16));

4.Boolean类型转换

 <script>
        /* 
        1.false： 有7种数据会得到false 
            0 -0 NaN  ''  undefined  null  false
        2.true:  除false 7种之外的一切数据
        */   
        console.log( Boolean(0) ) //false
        console.log( Boolean(-0) )//false
        console.log( Boolean(NaN) )//false
        console.log( Boolean('') )//false
        console.log( Boolean(undefined) )//false
        console.log( Boolean(null) )//false
        console.log( Boolean(false) )//false
    </script>

5.隐式转换

隐式转换 ： 当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算
        (1)转换数字 ： 算术运算符 + - * / %
        (2)转换字符串 ： 连接符+  (+号两边只要有一边是字符串，此时+就是连接符)
        (3)转换布尔: 逻辑非 !    

       //(1)转换数字 ： 算术运算符 + - * / %
       console.log('10'-1);  //字符串10 转换为数值10
       console.log(1+ true); //布尔型转数字
       console.log( + '10');  //数学正好

      // (2)转换字符串 ： 连接符+  (+号两边只要有一边是字符串，此时+就是连接符)
        console.log('1'+ true); //字符串1 连接字符串 true
       
      //(3)转换布尔: 逻辑非 !  
         console.log( !1);  //数字1转换为布尔型1，逻辑非1即false
         console.log( !null); //null 转换为布尔型0，逻辑非0即true

6.undefined与null区别
1.undefined : 未定义。 当变量只声明,但是没有赋值。此时默认值是undefined
2.null : 有定义。 定义的值是空值。

// undefined 与 null 共同点：值相等，转布尔类型都是false
   console.log(undefined == null);  //转布尔类型都为false 即为true
   console.log(Boolean(undefined)); //undefined转布尔类型为false 即为false
   console.log(Boolean(null)); //null转布尔类型为false 即为false 
// undefined 与 null 不同点:数据类型不同，转number类型值不同
   console.log(undefined=== null); //undefined为未定义，null为空值 数据类型不一样 即为false
   console.log(Number(undefined));//NaN  undefined转任意Number数值型输出结果都为NaN
   console.log(Number(null)); //null为空值，转数值即为0

（二）语句表达式

简单概括: 有运算符参与的就是表达式,没有运算符参与的就是语句

//1.表达式 : 由运算符组成的式子, 一定会有运算结果 (运算)
 //2.语句 : 让js编译器执行某个命令,做什么事情 (执行)
  //分支语句  循环语句

1. if单支结构

   //1.顺序结构(默认) ： 代码从上往下依次执行
    //   console.log('1-我今天上学了')
    //   console.log('2-我今天考试了')
    //   console.log('3-我回家了')
    //   console.log('4-爸爸打我了')
    //   console.log('5-我回房间睡觉了')

      //2.分支结构 ： 代码根据条件来执行
      /* 语法
            if(条件 true/false){
                满足条件需要执行的代码
            }
        注意点： 小括号里面的条件可以写哪些代码呢？
            (1)比较表达式 ： 比较表达式结果一定是布尔类型
            (2)直接写布尔类型的值
            (3)写其他的值 ： 编译器会自动转成布尔类型来判断是否成立 */

2.if-else双分支

 <script>     
    /* if-else双分支
       语法：
        if(条件true/false){
            条件成立时需要执行的代码
        }else{
            条件不成立时需要执行的代码
        }
        注意点：双分支语句是两个互斥条件(两个条件一定会满足一个，不会同时满足，也不会同时不满足)
            if大括号代码 和 else大括号代码 一定会执行一个,不会同时执行，也不会同时不执行 */       
    //   console.log('1-我今天上学了')
    //   console.log('2-我今天考试了')
    //   console.log('3-我回家了')
    //   console.log('4-爸爸打我了')
    //   console.log('5-我回房间睡觉了')
      //需求：(1)考试不及格爸爸才打我 (2)考试及格，爸爸给我买奥迪
       let score=44
       console.log('1-我今天上学了')
       console.log('2-我今天考试了')
       console.log('3-我回家了')
       if(score >=60){
        console.log('4-考试及格，爸爸给我买奥迪')
       }
       else{
        console.log('4-考试不及格爸爸才打我')
       }
       console.log('5-我回房间睡觉了')
    </script>

3.if - else if - else 多分支

            if分支语句
            单个条件: if单分支
            两个条件: if-else双分支
            多个条件： if - else if - else 多分支

        语法
            if(条件1){
                条件1成立时需要执行的代码
            }else if(条件2){
                条件2成立时需要执行的代码
            }else if(条件3){
                条件2成立时需要执行的代码
            }
            .....
            else{
                如果前面所有条件都不满足，则执行else代码
            }
        注意点
            (1)多分支所有的大括号代码最多只会执行一个，只有当前面的条件不满足，才会进入后面的条件判断
            (2)多分支一定要以if开头，后面else if可以多个，结尾else可以省略*/
      //需求  (1)90以上，买布加迪  (2)80-90,兰博基尼  (3)60-80,特斯拉 (4)不及格，打我一顿
      let score=44
       console.log('1-我今天上学了')
       console.log('2-我今天考试了')
       console.log('3-我回家了')
       if(score >=90){
        console.log('4-考试及格，爸爸给我买布加迪')
       }
       else if(score >=80){
        console.log('4-考试及格，爸爸给我买兰博基尼')
       }
       else if(score>=60){
        console.log('4-考试及格，爸爸给我买特斯拉')
       }
       else{
        console.log('4-不及格，打我一顿')
       }
       console.log('5-我回房间睡觉了')
    </script>

4.三元表达式

/*  1.运算符根据运算数的多少，分为一元、二元、三元运算符
   一元运算符：只能运算一个数    
   ++ -- !
    二元运算符：能运算两个数
    算术、比较
    三元运算符： 能运算三个数
     ?:
  2.三元表达式: 表达式 ? 代码1 : 代码2
   执行规则: 如果表达式为true,则执行代码1，否则执行代码2
  3.三元表达式功能和if-else语句类似
 3.1 如果你的代码只有1行，则可以用三元
 3.2 三元表达式有运算结果   */   
 let res=10>15?alert(11111):alert(22222)

5.switch-case分支结构
语法：
switch(匹配值){
case 值1 :
值1 === 匹配值,需要执行的代码
break
case 值2 :
值2 === 匹配值,需要执行的代码
break
…
default :
匹配值与上面所有case的值不匹配(全等)，需要执行的代码 break }
注意点
(1)匹配值和case值 一定要是 ‘全等’关系
(2)不能省略break关键字,break关键字作用是结束switch语句
如果省略则会发生传统现象： 代码从上一个case无条件执行到下一个case

let subject= +prompt('请输入你的学科 1-前端 2-java 3-ui ')
        switch (subject){
              case  1 :  
              alert ('恭喜你选择了前端') 
              break
              case 2 :
              alert ('恭喜你选择了java') 
              break
              case 3 :
              alert ('恭喜你选择了ui') 
              break
              default :
              alert( '很遗憾没有你喜欢的')
              break

6.switch-case穿透用法

 //需求：让用户输入月份，告诉用户这是什么季节
      /* 春 : 3 4 5
        夏 : 6 7 8
        秋 : 9 10 11
        冬 : 12 1 2  */
        let month= +prompt('请输入月份')
        switch(month) { 
          case 3:
          case 4:
          case 5:
            alert('春天') 
            break
          case 6:
          case 7:
          case 8:
            alert('夏天') 
            break
          case 9:
          case 10:
          case 11:
            alert('秋天') 
            break
          case 12:
          case 1:
          case 2:
          alert('冬天') 
           break
          default :
          alert('抱歉机器无法识别')  
        } 

（三）流程循环控制-循环结构

1.while循环

<script>
      //打印3次班长爱坤哥
      //复制粘贴弊端：(1)代码冗余 (2)维护不便
      // console.log( '' )
      // console.log( '班长爱坤哥' )
      // console.log( '班长爱坤哥' )
      循环结构：代码重复执行
        while循环语法 
            while( 条件 true/false ){
                循环体：需要重复执行的代码
            }
        执行规则      
        let num=1
        while(num<=30){
          console.log('今天是个好天气');
          num ++
        }
        console.log('今天天气真糟糕')
    </script>

2.for循环
for循环： 1.声明循环变量 2.循环条件 3.循环变量自增 写在一个小括号中，代码更加简洁易读
语法：
for(语句1;语句2;语句3){
循环体：需要重复执行的代码
}
循环步骤 1 在for循环中 语句1只会循环一次，即i=1只会循环一次
循环步骤 2 执行完语句1后会执行循环体，即console.log(‘小猪佩奇’)
循环步骤 3 循环体执行结束后再执行语句3实行，再执行语句2判断，直至语句2为false跳出循环体
执行规则

for(let i=1;i<=3;i++){
        console.log('小猪佩奇');
         }
          console.log('小猪佩奇跑路了');

3.break与continue
continue : 结束本次循环体，，立即进入下次循环体 **continue只能用于循环语句
break: 结束整个循环体
**break 可以结束循环语句+switch-case

//模拟吃10个饺子
      for( i=1;1<=10;i++){
        if(i==5){
          console.log('这个包子变质了');
        //  continue 如果i=5，结束这次循环，立即进入下次循环体
          break  //如果i=5，结束整个循环
        }
        console.log(`这是吃的第${i}个包子`);
      }