JS基础02

变量转换和分支结构语法

学习笔记

  • 变量转换和分支结构语法
  • 小概
    • 1、数据类型undefined与null
      • 1.2 特殊的number(NaN)
    • 2.数据类型之间的转换
      • 2.1 转换number类型
      • 2.2 转换string类型
      • 2.3 转换boolean类型
      • 2.4 隐式类型转换
    • 3.分支结构语法
      • 3.1 if单分支结构
      • 3.2 if-else双分支结构
      • 3.3 if-eles 多分枝结构
      • 3.4 switch-case结构
      • 3.5 三元表达式
  • 总结


小概

今天的学习内容: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

总结

JS基础02_第1张图片
今天又是元气满满的一天,前端路漫漫,祝大家有人爱,有事做,有所期盼。(本博客仅用于学习)

你可能感兴趣的:(js基础,javascript)