数据类型和流程控制语句

1.回顾

操作标签内容
        闭合标签
            标签.innerHTML   标签.innerText
       标签.innerHTML=值   标签.innerText=值
    表单标签
         标签.value
       标签.value = 值
操作标签属性
            标签.属性名  = 值
       className 特殊
操作标签样式(行间样式)
            标签.style.样式名   font-size fontSize  border-radius  borderRadius
      标签.style.样式名 = 值  设置到行间样式上
      
数据类型:6大数据类型(5种基本数据类型和一种特殊类型)
    基本数据类型
        number  数值类型  10 3.14 -10  0771  0xfff NaN(not a number 不是一个数)
      string  字符串类型  "" '你好'  字符串.length 字符串[下标] 字符串.charAt(下标)
                                                    字符串类型 碰见+ 拼接  10+5+"30" = "1530"
            boolean  布尔类型  true false
            null   空对象  有存储空间的
            undefined  未定义  没有存储空间 声明变量不赋值  var a;
     特殊: 复合数据类型  对象数据类型  引用数据类型
            object 对象类型  {}
                array  数组
        function 

2.数据类型转换

  • 数据类型转换分为两种

    • 显式转换(强制转换):通过js的方法,转换成自己想要的数据类型

    • 隐式转换:在js进行某些运算的时候 自动完成转换数据类型

2.1 强制转换

2.1.1 强制转换为number

  • Number(要转换的数据)

    • 作用:将数据转换成number类型,如果转换不了则是返回NaN

<script>
        // Number类型转换
        // 1.number类型
        var n1 = 10;
        console.log( Number(n1) );//10
        // 2.string类型转换
        var n2 = "10";
        console.log( Number(n2));//10
​
        var n3 = "10px";
        console.log(Number(n3));//NaN
​
        var n4 = "px10abc";
        console.log(Number(n4));//NaN
​
        var n5 = "";
        console.log(Number(n5));//0
​
        // 3.boolean类型
        var n6 = true;
        console.log(Number(n6));//true----1
        var n7 = false;
        console.log(Number(n7));//false----0
​
        // 4.undefined
        var n8 = undefined;
        console.log(Number(n8));//NaN
        // 5.null
        var n9 = null;
        console.log(Number(n9));//0 
​
        // 总结:Number可以转换的有:string类型(纯数字,""-0 "  "-0)  boolean(true-1 false-0) null(0)
    </script>
  • parseInt(要转换的数据)

    • ==主要是针对字符串数据操作==

    • 作用:将数据转换成number类型,从左往右转换,遇到不能转换的或者是末尾结束,如果一开始都不能转换则是NaN 并且取整(舍弃小数)

        var n1 = "10.5";
        console.log(parseInt(n1));//10
        var n2 = "10.5px";
        console.log(parseInt(n2));//10
​
        var n3 = "px10.5";
        console.log(parseInt(n3));//NaN
​
        var n4 = "11px123";
        console.log(parseInt(n4));//11
​
        var n5 = undefined;
        console.log(parseInt(n5));

  • parseFloat(要转换的数据)

    • ==主要针对字符串数据操作==

    • 作用:将数据转换成number类型,从左往右转换,遇到不能转换的或者是末尾结束,如果一开始都不能转换则是NaN 保留小数

 <script>
        // parseFloat: 将数据转换成number类型,从左往右转换,遇到不能转换的或者是末尾结束,如果一开始都不能转换则是NaN   保留小数 
​
        var n1 = "10.8";
        console.log(parseFloat(n1));//10.8
​
        var n2 = "10.8px";
        console.log(parseFloat(n2));//10.8
​
        var n3 = "px10.8";
        console.log(parseFloat(n3));//NaN
​
        var n4 = "11.8px1234";
        console.log(parseFloat(n4));//11.8
​
        var n5 = undefined;
        console.log(parseFloat(n5));//NaN
    </script>

2.1.2 强制转换为string

  • String(要转换的数据)

    • 作用:将数据强制转换为string类型 直接在数据外面加""

 <script>
        // String():将数据强制转换为string类型    直接在数据外面加""
        var s1 = 10;
        console.log(String(s1));// "10"
​
        var s2 = null;
        console.log(String(s2));// "null"
​
        var s3 = undefined;
        console.log(String(s3)); //"undefined"
​
        var s4 = true;
        console.log(String(s4));// "true"
    </script>
  • 要转换的数据.toString(num)

    • num表示转换num进制的字符串 不写默认是10进制

 <script>
        // toString
        var n1 = 10;
        console.log(n1.toString());//"10"
​
        var n2 = true;
        console.log(n2.toString());// "true"
​
        // undefined没有tostring方法
        var n3 = undefined
        // console.log(n3.toString());//报错
​
        var n4 = null
        // null 没有tostring方法
        console.log(n4.toString());//
    </script>

2.1.3 强制转换为Boolean

  • Boolean() : 强制转换为Boolean类型 结果为true,false

        <script>
            // Boolean(要转换的数据)  将数据转换boolean类型  转换结果只有两种true和false
            // 1.number类型转换   非0即真(只要不是0  都是true)
            var b1 = 1;
            console.log(Boolean(b1));//true
            var b2 = 0;
            console.log(Boolean(b2));//false
    ​
            // 2.string类型转换    有值即为真
            var b3 = "中文wertyuewrty";
            console.log(Boolean(b3));//true
    ​
            var b4 = "";
            console.log(Boolean(b4));//false
    ​
            //3.undefined
            var b5 = undefined;
            console.log(Boolean(b5));//false
            // 4.null 
          var b6 = null;
            console.log(Boolean(b6));//false
    ​
    ​
            // 5.NaN
            var n7 = NaN;
            console.log(Boolean(n7));
    ​
            //总结:Boolean结果为false的有:0 null undefined "" NaN
        </script>

2.2 小方法

2.2.1 toFixed

  • 要保留的数据.toFixed(n) 保留n位小数

<script>
        // toFixed(n)  保留n位小数  给number类型用的
        var n1 = 3.1415926;
        console.log(n1.toFixed(3));
​
        var n2 = "3.1415926";
        console.log(n2.toFixed(2));//报错
    </script>

2.2.1 isNaN

  • isNaN(检测的数据): 检测数据是不是 不是一个数

  • ==判断之前会先用Number方法强制转换 再进行判断==

        // isNaN  检测数据是不是  不是一个数 
        // 判断之前会先用Number方法强制转换 再进行判断
        var n3 = 10;
        console.log(isNaN(n3));//n1不是一个数  false
​
        var n4 = "123"; // 先用Number方法转成 123
        console.log(isNaN(n4));//123不是一个数  false
​
                var n5 = "123你好";//Number类型转换是NaN
        console.log(isNaN(n5));//true

3.运算符与表达式

3.1 运算符和表达式的概念

10 + 20  表达式
​
10 20 称为操作数
+  运算符

  • 运算符: 连接一个以上的操作数中间的符号叫做运算符

算术运算符   + - * / % ++ --
赋值运算符  = += -= /= %=
逻辑运算符  && || !
三目运算符  条件 ? true执行的结果  : false执行的结果
比较运算符  > < >= <= ==  !=  ===
  • 表达式:由操作数和运算符组成的式子就叫表达式

算术表达式   操作数和算术运算符组成
赋值表达式   操作数和赋值运算符组成    
逻辑表达式   操作数和逻辑表达式组成
三目表达式   操作数和三目表达式组成
比较表达式   操作数和比较运算符组成

3.2 算术运算符

算术运算符:   +  -  *   /   %   ++    --
    <script>
        // 算术运算符
        var a = 10 + 4
        console.log(a);//14
​
        var b = 10-4;
        console.log(b);//6
        
        console.log(10*4);//40
        console.log(10/4);//2.5
        console.log(11%4);//3  取余
        console.log(12%4);//0  
​
        // 1.求n的倍数  
        var n = 9;
        console.log(100%n == 0);//true 是9的倍数 false 不是9的倍数
​
        // 2.判断当前这个数是不是偶数 都是2的倍数
        console.log(11%2==0)//true  偶数  false 奇数
​
        // 3.精度缺失 在运算过程中 是先转换成二进制进行计算  在转换过程中会造成精度缺失
        console.log(0.1+0.2);//0.30000000000000004
        console.log(0.7+0.1);//0.7999999999999999
        console.log(0.1*0.7);//0.06999999999999999
​
        // 4.隐式转换 在运算过程中 数据自动进行数据类型的转换
        // 隐式转换的规律:都会转换number类型进行运算  
        console.log(100 * false);//0
        console.log(100 * "123");//12300
        console.log(100 * "123px");//NaN
​
        console.log(100 / true);//100
        console.log(100+null); //100 
        console.log("100"- 10);//90 
        
        // 特殊:+  字符串遇到+会拼接  除了字符串数据,其他的还是会隐式转换
        console.log(100 + "123");// "100123"
        console.log(100+true);// 101
    </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值