【JavaScript】原生js基本数据类型以及数据类型转换

news/2024/7/19 15:46:35 标签: js, javascript

组成部分

ECMAScript：是js中的核心，扮演解释器的作用。

DOM: （document object model）作用是操作HTML，对象是 document。

BOM：（browser object model）作用是操作浏览器，对象是 window。

基本数据类型

<body>
    <ol>
        <li>基本数据类型：number、string、boolean、function、object、undefined</li>
        <li>变量的数据类型由它存放的值来决定</li>
        <li>属性类型undefined：第一种情况是变量未定义，第二种情况变量定义后未赋值</li>
    </ol>
    <script>
        window.onload = function(){
            var a = 12;  //number
            a = 'wenmeichao' //string
            a = true;   //boolean
            a = function(){} //function
            a = document //object
            var b; //undefined「未定义或者未赋值」
            console.log(typeof a) 
            console.log(typeof b) 
        }
    </script>
</body>

数据类型转换

string 转 number（显式类型转换）

<body>
    <input type="text" id="txt1">
    <input type="text" id="txt2">
    <input type="button" id="btn" value="求和">
    <hr>
    <ol>
        <li>+ 的作用：1、字符串连接 2、两个值相加</li>
        <li>paeseInt(): string 转 number，转整数</li>
        <li>paeseFloat(): string 转 number,转小数</li>
        <li>paeseInt()小特性：从左到由扫描字符串，遇到非数值跳出，并将找到的数值返回出去</li>
        <li>任何数和NaN相加结果都是NaN</li>
        <li>NaN和NaN不相等</li>
        <li>isNaN 判断非数字</li>
    </ol>
    <script>
        var a = '12' //12
        a = '12px' //12
        a = '123px56' //123
        a = 'abc'  //NaN(not a number)
        var b = 'def'
        console.log(parseInt(a))
        console.log(parseInt(b))
        console.log(parseInt(a) == parseInt(b)) //false NaN和NaN不相等
        console.log(parseInt(a) + 12) //NaN 任何数和NaN相加结果都是NaN
        console.log(isNaN(parseInt(a))) //判断非数值
        window.onload = function(){
            var txt1 = document.getElementById('txt1')
            var txt2 = document.getElementById('txt2')
            var btn = document.getElementById('btn')
            btn.onclick = function(){
                var n1 = parseInt(txt1.value);
                var n2 = parseInt(txt2.value);
                if(isNaN(n1)){
                    alert('第一个数非数字')
                }else if(isNaN(n2)){
                    alert('第二个数非数字')
                }else{
                    alert(parseInt(txt1.value) + parseInt(txt2.value))
                }
                
            }
        }
    </script>
</body>

隐式类型转换

<body>
    <hr>
    <ol>
        <li> == ：会先进行类型转换（隐式类型转换）</li>
        <li>- ：减法也会先进行类型转换，所以也是隐式类型转换</li>
    </ol>
    <script>
        var a = 5;
        var b = '5'
        var c = '12'
        console.log(a == b)  //先转换类型，再进行比较
        console.log(a === b) //不转换类型，直接比较
        console.log(c + b) //125 加法：因为加法既可以做字符串拼接又可以数值相加，所以计算机会执行简单的字符串拼接
        console.log(c - b) //7 减法，先转换类型，再进行比较   
    </script>
</body>

变量作用域

javascript"><script>
    var b = 5  //全局变量：在任何地方都可以用
    function aaa(){
        var a = 12;  //局部变量：只能在定义它的函数内部使用
    }
    function bbb(){
        alert(a)  // a is not defined
        alert(b)  //5
    }
    aaa()
    bbb()
</script>