• js语法基础入门(3)


    3.数据类型

    3.1.数据类型学习重点

    前面我们通俗的讲了,数据类型其实就是对数据进行了分类,那么,在js中到底把数据分成了几类?这些类的名称叫什么?每个分类下面有那些值?这些问题是需要记清楚的,例如: 值 8, 我们把它分到数字类里面, 数字类有个特点就是它下面的值都是数字,如果像上面这样能够记住类名,能够分辨出常见的某个值属于哪个类型,那么数据类型这块知识就算掌握了

    3.2.Number-数字类型

    var number1 = 15;
    var number2 = 15.0
    

    在其他语言中,有整型和浮点型的说法,通俗的说就是整数和带小数的数字分成了两种不同的类型,而在js中没有严格区分开,那就意味着,15 === 15.0

    console.log(15 === 15.0) //true
    

    这里需要注意的是,当你使用浮点数(小数)进行运算的时候,它并不是很精确,使用的时候要小心谨慎,例如:

    console.log(1 - 0.7)  //0.30000000000000004
    
    console.log(1 - 0.9) //0.09999999999999998
    

    3.2.String-字符串类型

    使用""或者‘‘括起来的数据就是字符串类型的数据。例如:

    var userName = "张三";  
    var sex = "女";
    

    字符串类型特点:

    1.单引号中不可直接嵌套单引号,双引号中不可直接嵌套双引号,但是它们可以相互嵌套使用,例如:

    var html_template = '<div style="color:red">螺钉课堂,nodeing.com</div>'
    

    2.字符串有长度属性

    console.log(html_template.length)
    

    3.字符串包含0个或者多个字符,如果引号内什么都不写表示空字符串,例如:

    var str = ''
    console.log(str.length)
    

    3.3.Boolean-布尔类型

    布尔值指代真和假、开或关、是或否,这个类型只有两个值,关键字true和false。JavaScript中比较语句的结果通常都是布尔值。例如:

    var a=5;
    a==4;
    

    开关应用举例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                body{
                    text-align: center;
                }
                #box{
                     100px;
                    height: 100px;
                    background-color: red;
                    margin: 30px auto;
                    display: none;
                }
            </style>
    
        </head>
        <body>
            <button id="btn">开关</button>
            <div id="box"></div>
            <script type="text/javascript">
                var oBtn = document.getElementById('btn')
                var oBox = document.getElementById('box')
                var flag = true
                oBtn.onclick = function(){
                    if(flag === false){
                        oBox.style.display = "none"
                        flag = true
                    }else{
                        oBox.style.display = "block"
                        flag = false
                    }
                }
            </script>
        </body>
    </html>
    

    3.4.null

    null是 一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的,因此 null 与 Null、NULL或其他变量完全不同。

    null通常表示“没有对象”,即该处不应该有值,

    3.5.undefined

    undefined表示变量未定义时的属性,可以理解为未定义,即"缺少值",就是此处应该有一个值,但是还没有定义,例如:

    var a ;
    console.log(a)
    

    3.6.类型转换

    3.6.1.为什么要进行类型转换?

    将一种类型转换成另一种数据类型,就是类型转换,例如:将字符串的“3” 转换成数字类型的 3 。类型既然已经划分,那么为什么还需要进行类型之间的转换呢?数据之间的运算,只有同类型的数据之间进行运算才有意义,例如“a”+13 属于字符串和数字类型相加,如果不进行转换的话,那结果到底应该等于什么呢?因此,如果要进行数据之间的运算,不同类型的数据需要转换成同一类型进行运算。 数据类型转换分为两种,一种是强制类型转换,一种是自动类型转换

    3.6.2.强制类型转换

    强制类型转换就是使用固定的方法强制把某种类型转换成另一种类型。

    1.强制转换成数字类型

    var a="13";
    a = parseInt(a); //使用函数parseInt 将字符串“13”,转换成数字类型13
    console.log(typeof a)  //Number
    
    var a = "13.123";
    a = parseInt(a);
    console.log(a); //输出结果 13
    
    var a=“13absdf123”;
    a=parseInt(a);
    console.log(a);  //输出结果 13;
    
    var  a=“a13” ;
    a=parseInt(a);
    console.log(a);  //输出 NaN 表示不是一个数字
    

    总结:parseInt函数将变量转换成一个整数,如果变量值为字符串数字,直接转换成整数,如果变量值既有数字又有字符串,那么转换的时候会把前面的字符串数字转换成整数,并且舍去后面的字符串,例如:13adf 会把adf去掉,直接返回13.如果字符串数字在中间包含,例如:a23a,那么最终转换成NaN.NaN是一个数字类型的值,表示转换的结果不是一个数字

    var a = "13.123";
    a = parseFloat(a);
    console.log(a); //输出结果 13.123
    

    总结:parseFloat和parseInt的用法一样,不同的是parseFloat是把变量转换为小数

    var a = "13.123";
    a = Number(a);
    console.log(a); //输出结果 13.123
    
    var a = "13.123a";
    a = parseFloat(a);
    console.log(a); //输出结果 NaN
    

    总结:Number函数也是将变量转换成数字,与上面两个函数不同的是,Number只能转纯字符数字,如果字符串中只要是带有其他字符的,都会被转换成NaN.

    2.强制转换成字符串类型

    var a=12;
    a= String(a);
    console.log(typeof a);  //输出string
    

    总结:转换成字符串比较简单,只需要用String(变量名)就可以了

    3.强制转换成布尔值类型

    因为布尔值非真即假,大多数转换结果都是真,只有少部分特殊的数据转换成假,所以布尔值转换,只需要记住哪些转换成假值就行了

    var a=12;
    var b=0
    a= Boolean(a);
    b= Boolean(b);
    console.log( a);  //true
    console.log(b);   //false
    

    总结:转换成假值(flase)的情况不多,有数字的0、-0、‘’空字符串、null、undefined、NaN,其他的数据都会被转换成true

    3.6.3.自动类型转换

    自动类型转换就是JavaScript程序在运行的过程中,根据上下文的环境,自动将类型转换成统一类型进行运算。例如:

    <script type="text/javascript">
        var value1 = "2";
        var value2 = "1" 
    
        //减法的语意: 将会按照数字进行运算
        var value3 = value1 - value2;
        console.log(value3); // 输出1
        //加法: 将会按照数字进行运算
        var value4 = true;
        var value5 = value1 - value4;
        console.debug(value5); //输出1
    </script>
    

    总结:以上代码中,当value1-value2的时候是做减法运算,所以会把字符串value1和字符串value2都转换成数字进行运算,同理,value1-value4也是一样,都转换成了数字进行运算,并且是自动转换的,转换的依据就是正在做减法运算,减法运算两边必须是数字才能进行,自动类型转换的使用场景还很多,比如后面要学的条件判断语句if()括号里面的内容就是进行自动转换了的

    3.7.作业

    1、 将变量命名规范手写5遍-10遍

    2、 本章学了几种数据类型?分别有哪些特点?请用自己的话归纳总结

    3、 类型转换后布尔值为false的情况有哪些?

    4、 数字类型转换的几种方法,各自有什么特点?

    5、 将以下各数据分别转成数值型、布尔型、字符型

    var a=“abc”
    var a = “123”
    var a = true;
    var a = undefined;
    var a = null
    

    6、 将以下数据转换成数值型(使用两种方法进行转换)

    var a = “10px”
    var a = “.123”;
    var a = “a45px”;
    

    螺钉课堂视频课程地址:http://edu.nodeing.com

  • 相关阅读:
    用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
    从炉石传说的一个自杀OTK说起
    DTCMS插件的制作实例电子资源管理(二)Admin后台页面编写
    DTCMS插件的制作实例电子资源管理(一)插件目录结构
    一个看似很简单的SQL却难倒了很多人
    一个js验证类
    elasticsearch节点间通信的基础transport
    elasticsearch cluster 详解
    elasticsearch cluster 概述
    Node组装启动过程
  • 原文地址:https://www.cnblogs.com/dadifeihong/p/12027508.html
Copyright © 2020-2023  润新知