JS基础02

变量转换和分支结构语法

---

小概

今天的学习内容：1.基本数据类型null、undefined；2.特殊的number值NaN(isNaN);3.数据类型之间的转换(显示转换/隐式装换)；4.分支结构语法

---

提示：以下是本篇文章正文内容，下面案例可供参考

1、数据类型undefined与null

undefined :只有一个值，就是undefined
解释：未定义 ，变量有声明但是没有赋值
null : 只有一个值，就是null
解释：空值 ： 必须要主动设置

注意点：
(1)typeof null : 结果是’object’
(2)undefined == null : 结果是true （==不会去比较数据类型）
(3)undefined === null : 结果是false（===比较严谨会比较数据类型）
nul转number是0，而undefined转number是NaN.

代码如下（示例）：

        //1. undefined : 未定义. 变量只声明未赋值，此时默认值就是undefined
        let a;
        console.log( a );//undefined
        console.log( typeof a );//'undefined'

        //2. null : 空值. 只能手动设置。
        let b = null;
        console.log( b );//null
        console.log( typeof b );//object类型

        //3.undefined 与 null区别
        console.log( undefined == null );//true
        console.log( undefined === null );//false

1.2 特殊的number(NaN)

NaN : number类型特殊值，表示错误的数学计算结果.
NaN不能与任何数字计算，结果都是NaN
NaN不能与任何数字比较，结果都是NaN
isNaN() : 用于检测一个数据是不是NaN true:是 false:不是

//1.NaN : not a number . 如果数学计算结果无法得到数字，则会得到NaN
        //NaN 是number类型中的一个特殊值。表示错误数学计算结果
        console.log( '班长' - 100 );//NaN
        console.log( typeof NaN );//'number'

        //2.NaN 不能参与任何数学计算，结果都是NaN
        console.log( NaN * 0 );//NaN

        //3.NaN 不能与任何数据比较，结果都是NaN
        console.log( NaN == NaN );//false   NaN与任何数字都不想等，包含自身

        //4.检测一个数字是不是NaN
        //语法：  isNaN( 数据 )       true:是NaN   false: 不是NaN
        console.log( isNaN('班长' - 1) );//true  是NaN
        console.log( isNaN(2 - 1) );//false    不是NaN

2.数据类型之间的转换

2.1 转换number类型

string类型转number(整数)：parseInt();
string类型转number(带小数)：parseFloat();
其他类型转数字(布尔类型，undefined，null)：Namber()

let str = '123.5.123a';
        //parseInt() : 转换整数
        //原理： 从左往右依次解析字符，遇到非数字字符结束解析，并且返回已经解析好的整数
        let num = parseInt(str);
        console.log(str, num );

        //parseFloat() : 转换小数
        //原理：与parseInt()一致，唯一的区别是可以识别第一个小数点
        let num1 = parseFloat(str);
        console.log( str,num1);

        //Number() : 其他类型转数字 （布尔，undefined，null）
        //原因： (1)可以解析整数与小数  (2)一但出现任何非数字字符，则会得到NaN
        console.log( Number(true) );//1
        console.log( Number(false) );//0
        console.log( Number(undefined) );//NaN
        console.log( Number(null) );//0
        console.log( Number(str) );//NaN

2.2 转换string类型

其他类型转string
(1)常用 ： String( 数据 )
* 可以转换undefined和null
(2) 变量名.toString()
* 不可以转换undefined和null

      //(1)String(数据)
        let num = 10;
        let str = String(num);
        console.log(num,str);
        //(2)变量名.toString()
        console.log( num.toString() );

2.3 转换boolean类型

唯一语法: Boolean(数据)
得到false : 7种数据
0 -0 NaN undefined null false ‘’(空字符串)
得到true : 除false 7种之外一切数据

console.log( Boolean(0) );//false
        console.log( Boolean(-0) );//false
        console.log( Boolean(NaN) );//false
        console.log( Boolean(undefined) );//false
        console.log( Boolean(null) );//false
        console.log( Boolean(false) );//false
        console.log( Boolean('') );//false

2.4 隐式类型转换

数据类型转换分为 显式转换和 隐式转换，上述的都为显式转换（主动使用语法来转换)。
隐式转换：当运算符两边数据类型不一致的时候，编译器会偷偷的先帮我们转成一致，然后再计算。
强调文本 强调文本

转换成number
* 数学正号+
* 自增自减
* 算术运算符： + - * / %
转换成string : 连接符 +
转换成boolean : 逻辑非 !

//1.转换成number
console.log( '10' - 1 );// Number('10') - 1 = 10 - 1 =
console.log( '班长' - 100 );// Number('班长') - 100 = 
console.log(+'10');//Number('10')
//2.转换成string : +
console.log( 1 + 'true' );//String(1) + 'true' = '1' +
/* 千万不要把算术+号 与连接符 +号  转换规则搞混淆 */
console.log( 1 + true );//算术+号   1 + Number(true) =
//3.转换成boolean:  !
console.log( !1 );// !Boolean(1) = !true = false
console.log( !!null );// !!Boolean(null) = !!false = !
        
/* 课后小练习 */
console.log( 1 + true + '2' );// 1 + true = 2 + '2' = 
console.log( '1' + true + 2 );//'1' + true = '1' + Str
console.log( 1 + undefined );// 1 + Number(undefined) 
console.log( 1 + null );// 1 + Number(null) = 1 + 0 =1

---

3.分支结构语法

3.1 if单分支结构

3.2 if-else双分支结构

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

语法：
if(条件 true/false){
条件成立时需要执行的代码
}else{
条件不成立时需要执行的代码
};

3.3 if-eles 多分枝结构

1. if单分支 ： 适用于1个条件
2. if-else双分支 ： 适用于2个互斥条件
3. if-else if-else多分支： 适用于多个条件

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

注意点：
(1)所有的大括号最多只会执行一个， 只有当上面条件不成立时才会判断下面条件
(2)必须以if开头, else if可以多个， 末尾的else可以省略（一般不省略，会导致逻辑漏洞）

3.4 switch-case结构

用于固定值匹配
语法：
switch( 匹配值 ){
case 值1 :
匹配值 === 值1,需要执行的代码;
break;
case 值2 :
匹配值 === 值2,需要执行的代码;
break;
case 值3 :
匹配值 === 值3,需要执行的代码;
break;
………………
default :
匹配值和case后面的值都无法匹配，则需要执行的代码
break;
};
注意点：
1. 匹配值 和 case值 一定要是全等关系
2. 不要省略break
* 作用： 结束switch-case语句
* 如果省略：则会发生穿透现象（代码从上一个case无条件执行到下一个case）
3.default可以写在任意位置，功能不变。但是一般写在最后面.

switch-case穿透应用

let month = +prompt('请输入月份');
//不同的判断条件，但是需要执行的代码相同就可以利用switch的穿透
        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('火星来的');
                break;
        };

3.5 三元表达式

1.运算符可以根据运算数的多少分为一元、二元、三元运算符
一元 ： 只能运算一个数 ++ – !
二元 ： 可以运算两个数 算术、关系
三元 ： 可以运算三个数
2.三元运算符 ： ?:
3.三元表达式： 由三元运算符组成的式子
表达式 ? 代码1 : 代码2
(1)如果表达式结果为true,则执行代码1，否则执行代码2
(2)如果代码1 和 代码2可以产生结果，则三元表达式结果就是他们的结果
三元表达式做的事跟if-else类似，只是代码更加简洁

       //基本用法
       let res1 = 1 > 0 ? alert(1) : alert(2);
       console.log( res1 );//undefined

       //三元表达式结果
       let res2 =  1 > 0 ? 10 : 20;
       console.log( res2 );//10

总结

今天又是元气满满的一天，前端路漫漫，祝大家有人爱，有事做，有所期盼。（本博客仅用于学习）