JavaScript基础 ,数据类型转换,for循环 ,while循环,switch case分支语句,if else 判断语句

1.转换为number类型
 //需求 ： 输入两个数字，计算两个数字的和
        // 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
 

2.number类型特殊值NaN
 //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
3.转换为string类型
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'
4.转换为boolean类型
// 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
5.隐式转换
/* 
       隐式转换 ： 当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算
            (1)转换数字 ： 算术运算符 + - * / %
            (2)转换字符串 ： 连接符+  (+号两边只要有一边是字符串，此时+就是连接符)
            (3)转换布尔: 逻辑非 !    
       */ 

6.undefined与null区别
/* 
        1. undefined : 未定义。 当变量只声明,但是没有赋值。此时默认值是undefined
            * 说人话 : undefined相当于期房。 买了房,但是房子还没建出来。(未定义)

        2. null : 有定义。 定义的值是空值。
            * 说人话 ： null相当于毛坯房。买了房,但是房子没住人,里面是空的。(空值)
        */  

1-if单分支结构
 

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

2.if结构补充说明：

1.大括号中可以是任何代码，不限数量

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

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

(1)关系表达式：结果一定是布尔类型

(2)布尔类型的值：true和false

(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('满足条件，成立')
      }
2.三元表达式
1.运算符根据参与运算的值数量分为一元、二元、三元运算符

一元运算符：只能操作一个值 ++ -- ！

二元运算符：操作两个值 1 + 1 1 > 0

三元运算符：操作三个值

2.三元运算符语法

三元运算符： ?:

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

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

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

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

案例:求两个数字最大值
//1.用户输入两个数
        let num1 = +prompt('请输入第一个数')
        let num2 = +prompt('请输入第二个数')
 
        //2.比较大小
        let res =  num1 >= num2 ? num1 : num2
        document.write(`最大的数字是:${res}`)
案例:数字补0
//1.用户输入1个数    
        let num = +prompt('请输入一个数字')
        let res = num >= 10 ? num : '0' + num
        document.write(res)
 

3.switch-case分支结构
 语法:

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语句可以写在任何地方，也可以省略，但是一般写在最后，这是一种代码规范

1.while循环
 while循环语法 
            while( 条件 true/false ){
                循环体：需要重复执行的代码
            }

        执行规则
            1.判断条件是否成立
                1.1 true : 则执行循环体代码
                1.2 false : 循环结束，执行大括号后面的代码
            2.重复步骤1
        */

2.for循环
 for循环： 1.声明循环变量  2.循环条件  3.循环变量自增 写在一个小括号中，代码更加简洁易读
        语法：
            for(语句1;语句2;语句3){
                循环体：需要重复执行的代码
            }

3.break与continue关键字
 /* 
      continue : 结束本次循环体，立即进入下一次循环判断
        * continue关键字只能用于循环语句
      break:     结束整个循环语句，立即执行大括号后面的代码
        * break关键字可以用于 循环语句 + switch-case
      */

案例:登录验证
 

/* 本案例主要让学生了解while循环适用场景 及 对应 用法
            (1)while循环适用于 循环次数不明确
            (2)写while循环要学会分析： 循环条件、循环体
            (3)while循环 一般会使用 break 关键字来跳出循环
        */    
 
        //需求：  (1)让用户输入 用户名 和 密码
        // (2)如果 用户为admin 并且 密码为123456,则跳出循环弹窗提示登录成功,否则让用户继续登录
        
        let username = prompt('请输入用户名')
        let password = prompt('请输入密码')
 
        while( username != 'admin' || password != '123456' ){
            username = prompt('请输入用户名')
            password = prompt('请输入密码')
        }
 
        alert('登录成功')

综合案例：简易ATM取款机
 

/* 
        需求：用户可以选择1-存钱、2-取钱、3-查看余额和4-退出功能
        思路分析：
            (1)存钱 ： 数学加法
            (2)取钱 ： 数学减法
            (3)查看余额 ： 变量存储数据
            (4)退出功能 : 结束循环 break
        */
 
      //1.声明变量存储银行余额 和 用户操作
      let money = 1000
      let caozuo = null
      //2.写循环
      while (caozuo !== 4) {
        //用户输入
        caozuo = +prompt('请输入您的操作 1-存钱  2-取钱  3-查看余额  4-退出')
        //用户操作是一个固定值匹配，这里使用switch-case更好
        switch (caozuo) {
          case 1:
            let num1 = +prompt('请输入您想要存多少钱')
            money += num1
            break
          case 2:
            let num2 = +prompt('请输入您想要取多少钱')
            money -= num2
            break
          case 3:
            alert(`您当前的余额是：${money}`)
            break
          case 4:  
            break
          default:
              alert('暂时不支持这个功能')
              break
        }
      }