01-数据类型转换

1.1-数据类型转换介绍

    <script>
         数据类型不一致,得不到预期计算结果
    
        需求：让用户输入两个数字，然后相加，打印结果
        let num1 = prompt('请输入第一个数字')
        let num2 = prompt('请输入第二个数字')
        
        let res = num1 + num2//'10' + '20'
        console.log( res )//'1020'
    </script>

1.2-转换为number类型

    <script>
         需求 ： 输入两个数字，计算两个数字的和
         prompt输入框 得到的是string类型
         var num1 = +prompt('请输入第一个数字');
         var num2 = +prompt('请输入第二个数字');
         console.log(num1,num2);
         console.log(typeof num1,typeof num2);
         var res = parseInt(num1) + parseInt(num2);
         console.log(res);
        
         1.其他数据类型 转 Number
           语义明确（提高代码阅读性）
           parseInt() : 转换整数
           parseFloat() :转换小数
           Number() : 其他数据类型转数字 （boolean，undefined，null）
​
         2.注意点： 数据类型转换并没有改变原有变量的值，而是产生一个新的值
        
​
        1. parseInt() : 转换整数
        从左往右依次解析字符，遇到非数字字符停止解析，并且返回解析好的整数
        var str = '10';
        var num = parseInt(str);
        console.log(num);// 10
        console.log(str);// '10'   类型转换不改变原有变量的值，而是产生一个新的值
        
        console.log(typeof num);
        console.log(parseInt('123.1.1a'));//123
        
​
        2.parseFloat() : 转换小数
        解析规则与parseInt一致，唯一的区别就是可以识别第一个小数点
        var str = '5';
        var num = parseFloat(str);
        console.log(num);
        console.log(parseFloat('123.1.1a'));//123.1
​
        3. Number() : 其他数据类型转数字
         
        a. 可以解析整数和小数
        b. 只要有任意非数字字符得到NaN
        
        console.log(Number('6'));
        console.log(Number('6.6'));
        console.log(Number('123.1.a'));
        
​
        布尔类型转数字会得到0false和1 true
​
        console.log(Number(true));//1
        console.log(Number(false));//0
​
        console.log(Number(undefined));//NaN
        console.log(Number(null));//0    
          
    </script>

1.3-number类型特殊值NaN

    <script>
        //1.NaN是number类型中一个特殊值
        // not a number:不是一个数字，表示错误的运算结果
​
        console.log('张三-100')//NaN
        console.log( Number('黑马程序员') )//NaN
​
        //2.NaN不能参与任何计算，结果一律为NaN
        //NaN实际场景： 开发中，我们一般不会接触到NaN，除非你的代码出bug了，数学计算出错
        let num
        console.log( num + 1 )//我们忘记给num赋值，导致undefined 与 1 相加得到NaN
        
    </script>

1.4-转换为string类型

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

1.5-转换为boolean类型

    <script>
         Boolean(数据)
         
        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>

1.6-隐式转换

    <script> 
       隐式转换 ： 当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算
            (1)转换数字 ： 算术运算符 + - * / %
            (2)转换字符串 ： 连接符+  (+号两边只要有一边是字符串，此时+就是连接符)
            (3)转换布尔: 逻辑非 !       
       
       1.转换数字 : 算术运算符
       console.log( '100' - 10 )//90  Number('100') - 10
       console.log( 1 + true )//2  1 + Number(true)
       console.log( +'10' )//10  +数学正号 Number(10)  
       
       2.转换字符串 : 连接符
       console.log( '1' + true )//'1true'  '1' + String('true')
​
       3.转换布尔 : !
       console.log( !1 )//false   !Boolean(1)
       console.log( !undefined )//true   !Boolean(undefined)
       
    </script>

1.7-undefined与null区别

    <script> 
        1. undefined : 未定义。 当变量只声明,但是没有赋值。此时默认值是undefined
            * 说人话 : undefined相当于期房。 买了房,但是房子还没建出来。(未定义)
​
        2. null : 有定义。 定义的值是空值。
            * 说人话 ： null相当于毛坯房。买了房,但是房子没住人,里面是空的。(空值) 
       
        相同点 : (1)值相等 (2)转布尔类型都是false
        console.log( undefined == null )//true
        console.log( Boolean(undefined) )//false
        console.log( Boolean(null) )//false
​
        不同点 : (1)数据类型不同  (2)转number类型值不同
        console.log( undefined === null )//false
        console.log( Number(undefined) )//NaN
        console.log( Number(null) )//0
        
    </script>

02-流程控制-分支语句

分支结构作用：代码根据条件执行

• 为什么要有分支结构？

  • 现实世界中，我们在做某些事情的时候是有前提条件的，例如：我明天去买一辆法拉利，前提是我今晚要中五百万

    • 也就是说：如果我今晚中了五百万，明天就去买法拉利，没中的话就不买

1.0-语句与表达式

<body>
    <script>
        /* 本小节为概念性理解,不需要敲代码 
            简单概括: 有运算符参与的就是表达式,没有运算符参与的就是语句
        */
        
        //1.表达式 : 由运算符组成的式子, 一定会有运算结果 (运算)
        1+1
        10 > 9
        //2.语句 : 让js编译器执行某个命令,做什么事情 (执行)
        //分支语句  循环语句
​
    </script>

1.1-if单分支结构

• 1.if结构语法：if(条件 true/false){ 条件成立时需要执行的代码 }

• 2.if结构补充说明：

  • 1.大括号中可以是任何代码，不限数量
  • 2.如果大括号中代码有且只有一行，则可以省略大括号。这种写法代码不规范，不是老司机的作风

• 3.注意点:小括号中的条件可以是哪些呢

  • (1)关系表达式：结果一定是布尔类型
  • (2)布尔类型的值：true和false
  • (3)其他表达式和值：都会先转换成布尔类型再判断真和假

    <script>
      1.顺序结构(默认) ： 代码从上往下依次执行
       console.log('1-我今天上学了')
       console.log('2-我今天考试了')
       console.log('3-我回家了')
       console.log('4-爸爸打我了')
       console.log('5-我回房间睡觉了')
​
      2.分支结构 ： 代码根据条件来执行
        语法
            if(条件 true/false){
                满足条件需要执行的代码
            }
​
        注意点： 小括号里面的条件可以写哪些代码呢？
            (1)比较表达式 ： 比较表达式结果一定是布尔类型
            (2)直接写布尔类型的值
            (3)写其他的值 ： 编译器会自动转成布尔类型来判断是否成立
​
      需求：考试不及格爸爸才打我
      let score = 59
​
      console.log('1-我今天上学了')
      console.log('2-我今天考试了')
      console.log('3-我回家了')
      if( score < 60 ){
        console.log('4-爸爸打我了')
      }
      console.log('5-我回房间睡觉了')
​
      if( 1 ){//Boolean(1) = true
          console.log('满足条件，成立')
      }
​
    </script>
​

1.2-if-else双分支结构

if（条件）{
    条件成立时需要执行的代码
}else{
    条件不成立时需要执行的代码
}

• 1.if-esle结构语法:用于两种互斥的条件判断

  • 例如：如果(if)我的钱超过100块就洗脚(也就是说钱>=100)，否则(else)不洗脚（也就是说钱<100）

• 2.if-else结构注意点

  • if大括号中的代码与else大括号的代码只会执行一个，不会同时执行

• if-else语句的作用主要就是为了提高代码的运行效率,虽然可以用两个if语句来代替if-else语句，但是两个if语句需要判断两次，而if-else只需要判断一次

    <script>
       if-else双分支
       语法：
        if(条件true/false){
            条件成立时需要执行的代码
        }else{
            条件不成立时需要执行的代码
        }
​
        注意点：双分支语句是两个互斥条件(两个条件一定会满足一个，不会同时满足，也不会同时不满足)
            if大括号代码 和 else大括号代码 一定会执行一个,不会同时执行，也不会同时不执行
​
      需求：(1)考试不及格爸爸才打我 (2)考试及格，爸爸给我买奥迪
      let score = 89
​
      console.log('1-我今天上学了')
      console.log('2-我今天考试了')
      console.log('3-我回家了')
      if(score < 60 ){
        console.log('4-爸爸打我了')
      }else{
        console.log('4-爸爸给我买奥迪')
      }
      console.log('5-我回房间睡觉了')
​
      互斥条件：两个条件一定会满足一个，不会同时满足，也不会同时不满足 
      if(1){
        console.log('世界上最遥远的距离不是生与死距离，而是我在if里，你在else里。看起来隔得那么近，却永远也无法一起执行');
      }else{
        console.log('我爱你');
      }
    </script>
​

1.3-if-else if-else多分支结构

• 1.if-else if-else结构语法：

if(条件1){
    条件1成立时需要执行的代码
}else if(条件2){
    条件2成立时需要执行的代码
}else if(条件3){
    条件3成立时需要执行的代码
}else{
    以上所有条件都不成立时需要执行的代码
}

• 2.注意点：

  • (1) if-else if -else结构中必须以if开头，中间的else if可以是多个，末尾的esle可以省略（一般都不会省略）
  • (2)if-else if-else语句中所有的大括号中的代码只会执行其中一个，不会执行多个

    <script>
        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 = 58
​
      console.log('1-我今天上学了')
      console.log('2-我今天考试了')
      console.log('3-我回家了')
​
      if (score >= 90) {
        console.log('4-爸爸给你买布加迪')
      } else if (score >= 80) {//隐藏条件score < 90
        console.log('4-爸爸给你买兰博基尼')
      } else if (score >= 60) {//隐藏条件score<80
        console.log('4-爸爸给你买特斯拉')
      }else{//隐藏条件 score<60
        console.log('4-爸爸打我一顿')
      }
​
      console.log('5-我回房间睡觉了')
    </script>
​

1.4-三元表达式

• 1.运算符根据参与运算的值数量分为一元、二元、三元运算符

  • 一元运算符：只能操作一个值 ++ -- ！
  • 二元运算符：操作两个值 1 + 1 1 > 0
  • 三元运算符：操作三个值

• 2.三元运算符语法

  • 三元运算符： ?:

  • 三元表达式：表达式?代码1：代码2

    • 1.如果表达式成立则执行代码1，否则执行代码2

• 2.如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个

  • 三元运算符做的事和if-else类似，只是代码更简洁

    <script>
        1.运算符根据运算数的多少，分为一元、二元、三元运算符
            一元运算符：只能运算一个数    
                ++ -- !
            二元运算符：能运算两个数
                算术、比较
            三元运算符： 能运算三个数
                ?:
        2.三元表达式: 表达式 ? 代码1 : 代码2
            执行规则: 如果表达式为true,则执行代码1，否则执行代码2
        3.三元表达式功能和if-else语句类似
            3.1 如果你的代码只有1行，则可以用三元
            3.2 三元表达式有运算结果
​
        如果代码1 和 代码2 不能产生结果，则三元表达式的结果是undefined
        let res =  1>0 ? alert('哈哈') : alert('呵呵')
        console.log( res )//undefined
​
        //如果代码1 和 代码2 有结果，则三元表达式的结果就是他们的结果
        let res1 = true ? 10 : 20
        console.log( res1 )
​
    </script>

1.5-switch-case分支结构

• 1.语法

switch(表达式){
    case 值1:
        表达式的结果 === 值1，需要执行的代码
        break;
    case 值2:
        表达式的结果 === 值2，需要执行的代码
        break;
    case 值3：
        表达式的结果 === 值3，需要执行的代码
        break;
    .......
    default:
        表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
        break;
}

• 2.注意事项

  • 1.表达式的结果要和值一定是全等的关系===

  • 2.break作用：结束该switch语句，所以一般情况下要加上，如果不加上则会发生穿透

    • 穿透：从上一个case代码快执行到下一个case代码快
    • break关键字的作用就是防止穿透

  • 3.default语句可以写在任何地方，也可以省略，但是一般写在最后，这是一种代码规范

    <script>
        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 4-新媒体'
      )
​
      switch (subject) {
        case 1:
          document.write('恭喜你选择前端，2021年最有钱途的学科')
          break
        case 2:
          document.write('恭喜你选择前java，祝你早日聪明绝顶')
          break
        case 3:
          document.write('恭喜你选择UI，祝你早日脱单')
          break
        case 4:
          document.write('恭喜你选择新媒体')
          break
        default:
          document.write('脑子有包')
          break
      }
    </script>
​

1.6-switch-case穿透用法

• 合理穿透：多种值需要执行相同代码

<script>
    合理穿透：当存在多种值需要执行相同代码时使用穿透可以节省代码
     * 用户输入某一个月份，告诉用户这个月份属于什么季节
     * 12，1，2 冬季
     * 3，4，5 春季
     * 6，7，8 夏季
     * 9，10，11 秋季
     
    let month = +prompt("请输入月份");
    switch (month){
        case 12:
        case 1:
        case 2:
            alert("冬季");
            break;
        case 3:
        case 4:
        case 5:
            alert("春季");
            break;
        case 6:
        case 7:
        case 8:
            alert("夏季");
            break;
        case 9:
        case 10:
        case 11:
            alert("秋季");
            break;
        default:
            alert("你来自火星吧？");
            break;
    }
</script>