数据类型和运算符-CSDN博客

本文链接：https://blog.csdn.net/m0_73304951/article/details/127757829

六大数据类型

##### 五种基本数据类型

number  数值类型

string       字符串类型

boolean     布尔类型       true和false

undefined    未定义

null     空对象

##### 一种特殊数据类型

array     数组[]

object     对象[]

function     函数    function(){

}

1.number类型

number数值类型:整数,小数,负数,16进制,8进制,NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.整数
        var a = 10;
        console.log(typeof(a));//number

          // 2.小数
          var b = 1.3;
        console.log(typeof(b));//number

        var c = 1.3456789;
        console.log(typeof(c));//number

        var d = .3;
        console.log(d,typeof(d));//0.3,number
        
        var f = 1.0;
        console.log(f,typeof(f));//1,number

        // 3.负数
        var g = -1.3;
        console.log(typeof(g));//number

        // 4.NAN    not a number  不是一个数  当运算没有结果的时候就是NAN
        var x = NaN;
        console.log(typeof(x));//number

        var y = 10/"特别";
        // 注意:任何两个NaN都不相等,==判断左右两侧是否相等
        console.log(NaN == NaN);//false

        /* 
        浏览器显示是十进制的数据,如果定义为8进制或者16进制,计算机会自动转成16进制  
        */ 
       //8进制数:以零开头,范围在0-7之间
       var w = 099;
       console.log(w);
       //16进制数:以0x开头 范围在0-9 a-10  b-11  c-12  d-13  f-15
       var e = 0988;
       console.log(e);
    // 精度缺失
    console.log(0.3 + 0.4 == 0.7);
    </script>
</body>
</html>

string类型

字符串的长度字符串.length

字符串中某个字符字符串[下标] 从左往右开始下标从0开始取对应下标位置

字符串某个字符字符串.charAT(下标) 获取对应下标位置的字符

字符串遇到+拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //string类型  引号("")引起来的都是字符串,所有从页面获取的内容都是字符串数据类型
        var str1 = "文字";
        var str2 = "簇拥烈日的花";
        console.log(typeof str1);
        console.log(typeof str2);

        // 获取字符串的长度   字符串.length
        console.log(str1.length);
        console.log(str2.length);

        // 获取字符串中某个字符  字符串[下标]  从左往右开始下标从0开始  去对应下标位置
        console.log(str1[1]);//字
        console.log(str2[3]);//日

        //获取字符串某个字符  字符串.charAT(下标)  获取对应下标位置的字符
        console.log(str1.charAt(1));
        console.log(str2.charAt(3));

        // 字符串遇到+拼接
        console.log(1+1);//2
        console.log("1"+1);//11
        console.log(1+2+'1');//31
    </script>
</body>
</html>

boolean类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var b1 = true;
        var b2 = false;
        console.log(typeof b1,typeof b2);//boolean boolean
        // 作用:用做判断条件
        if (false) {
            // 如果判断条件为true  执行{}中的代码
            console.log("真");
        }
    </script>
</body>
</html>

undefined和null类型

undefined 未定义

null 空对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        undefined
        未定义  你去快递站拿包裹  但快递站没有你的包裹

        null
        空对象  你去快递站拿快递  快递员给了一个快递  但是这个快递是空的
        */
       var odiv=document.getElementsByTagName("div")[0];
       console.log(odiv);//undefined
    </script>
</body>
</html>

数据类型的转换

将一种数据类型转换成另一种数据类型

强制转换(程序员通过某些办法实现转换)

隐式换行(计算机自动转换为其他数据类型)

number强制转换类型

Number()

   Number(要转换的数据):将数据转换为Number类型 如果转换不了则是返回NaN

parselnt()

parseInt(要转换的数据):针对string类型转换

将数据转换为number类型，从左往右开始转换，遇到不能转换的或者末尾结束，如果一开始就不能转换则是NaN，结果取整(舍弃小数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            parseInt(要转换的数据):针对string类型转换
                将数据转换为number类型，从左往右开始转换，遇到不能转换的或者末尾结束，如果一开始就不能转换则是NaN，结果取整(舍弃小数)
        */
         console.log(parseInt("10"));//10
        console.log(parseInt("10px"));//10
        console.log(parseInt("10.5px"));//10
        console.log(parseInt("10.9px"));//10
        console.log(parseInt("px10.9px"));//NaN
    </script>
</body>
</html>

parseFloat()

parseFloat(要转换的数据):

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        parseFloat(要转换的数据):将数据转换为number类型,从左往右开始转换,遇到不能转换的或者末尾结束
        如果一开始不能转换是NaN,结果保留小数
        */
        console.log(parseFloat("10"));//10
        console.log(parseFloat("10.5px"));//10.5
        console.log(parseFloat("px10.5px"));//NaN
        console.log(parseFloat("10.5"));//10.5
    </script>
</body>
</html>

boolean类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
     // number类型:非0即真  NaN也是false
        console.log(Boolean(1));//true
        console.log(Boolean(-10));//true
        console.log(Boolean(3.14));//true
        console.log(Boolean(0x7788));//true
        console.log(Boolean(0));//false
        console.log(Boolean(NaN));//false

        // string类型:有值即为真
        console.log(Boolean("10"));//true
        console.log(Boolean("098766*****"));//true
        console.log(Boolean(" "));//true
        console.log(Boolean(""));//false

        // null undefined
        console.log(Boolean(null));//false
        console.log(Boolean(undefined));//false

        /*
            总结:Boolean结果为false的有：0 NaN null undefined ""
        */
    </script>
</body>
</html>

string类型强制转换

string强制转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(String(1));//"1"
        console.log(String(NaN));//"NaN"
        console.log(String(null));//"null"
        console.log(String(undefined));//undefined"
        console.log(String(true));//"true"
    </script>
</body>
</html>

to string强制转换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

    <script>

 var n = 1;

console.log(n,n.toString());//1,"1"



var m = true;

  console.log(m,m.toString());//true 'true'



 // null和undefined没有toString

 var x = undefined;

 console.log(x.toString());//报错

  </script>

</body>

</html>

其他小方法

tofixed(n):保留小数

var n1 = 3.1415926;
        console.log(n1.toFixed(4));//3.1416
        var n2 = 0.1*0.7;
        console.log(n2.toFixed(2));
isNaN is not a number 是不是不是一个数字

false是数字 true不是一个数字
 console.log(isNaN(3));//false
            console.log(isNaN("文字"));//true
isNaN 判断之前会先调用number方法进行强制转换再来进行判断 Number(true)
console.log(isNaN(true));//false
console.log(isNaN(""));//false