二、变量&数据类型

2024-10-16 06:57:30

一、变量

1. 介绍

        1.1 字面量                

                字面量，都是一些不可改变的值，例如：1、2、3、true、"哈哈"......

                字面量都是可以直接使用的，但是在开发中一般都不会直接使用字面量，而是将字面量赋值给变量使用。

        1.2 变量                

                变量，用来保存字面量，而且变量的值是可以任意改变的。

                在开发中都是通过变量去保存一个字面量，而很少直接使用字面量。

2. 定义

        2.1 声明和赋值分开进行
                2.1.1 语法                        

                        // 步骤1：声明变量

                        var 变量名；

                        // 步骤2：为变量赋值

                        变量名 = 变量值；

                2.1.2 注意

                        使用关键字var来声明变量。

                        变量名要遵循标识符的命名规则。

                        变量值也就是字面量。

                        若只声明了变量而未给该变量赋值，则该变量的值采用的是默认值：undefined。

                        变量是没有数据类型，但是给变量赋的值，也就是字面量，是有数据类型的。

                2.1.3 示例                        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        // 声明一个变量num
       var num;

        // 为变量num赋值
        num = 100;

    </script>
</head>
<body>
    
</body>
</html>
        2.2 声明和赋值同时进行
                2.2.1 语法

                        var 变量名 = 变量值；

                2.2.2 注意

                        使用关键字var来声明变量。

                        变量名要遵循标识符的命名规则。

                        变量值也就是字面量。

                        变量是没有数据类型，但是给变量赋的值，也就是字面量，是有数据类型的。

                2.2.3 示例                        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        // 声明变量的同时给变量赋值
        var num = 100;
    </script>
</head>
<body>
    
</body>
</html>

二、数据类型

1. 介绍

        数据类型指的就是字面量的类型，决定了一个数据的特征，比如：123和"123"，直观上看这两个数据都是123，但实际上前者是一个数字，后者是一个字符串。

        在JS中一共有六种数据类型，可以分为两大类：基本数据类型和引用数据类型。                

        基本数据类型：

                字符串（String）

                数值（Number）

                布尔值（Boolean）

                空值（Null）

                未定义（Undefined）

        引用数据类型：

                对象（Object）

2. 字符串（String）

        2.1 说明

                字符串，就是使用单引号或双引号括起来的一个字符序列。

        2.2 语法                

                var 变量名 = '字符序列'；

                                或

                var 变量名 = "字符序列"；

        2.3 注意         

                使用typeof关键字检查一个字符串时，会返回string。       

                转义字符：对于字符序列中的特殊符号，需要使用转义字符进行转义。

转义字符

含义

\n

换行

\t

制表

\b

空格

\r

回车

\\

斜杠 \

\'

单引号 ’

\"

双引号 "
        2.4 示例                
<!DOCTYPE html>
<html lang="zh-CN">

<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>

    <script>
        // 普通字符串
        var str = "hello world";
        console.log(str);            //输出：hello world
        console.log(typeof str)      //输出：string

        // 转义字符
        var str1 = "我说：\"今天\t天气真不错\"";
        console.log(str1);            //输出：我说："今天	天气真不错"
        console.log(typeof str1)      //输出：string
    </script>

</head>

<body>

</body>

</html>

3. 数值（Number）

        3.1 说明

                所有的数值(整数和浮点数)都是Number类型。

        3.2 语法

                var 变量名 = 整数 / 浮点数;

        3.3 注意                

                JS中可以表示的数字的最大值：Number.MAX_VALUE。

                JS中可以表示的数字的最小值：Number.MIN_VALUE。

                如果使用Number表示的数字超过了最大值，则会返回一个 Infinity，表示正无穷。          

                NaN是一个特殊的数值，表示非数值(Not A Number)，JS中当对数值进行计算时没有结果返回，则返回NaN。

                Infinity、NaN均属于Number类型，使用typeof检查时均会返回number。

        3.4 示例                
<!DOCTYPE html>
<html lang="zh-CN">

<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>

    <script>
        // 普通number
        var num = 123;
        var num1 = 123.456;
        console.log(num);       //输出123
        console.log(num1);      //输出123.456

        // 最大值和最小值
        console.log(Number.MAX_VALUE);      //输出：1.7976931348623157e+308
        console.log(Number.MIN_VALUE);      //输出：5e-324

        //Infinity
        var test = Number.MAX_VALUE * Number.MAX_VALUE;
        console.log(test);             //输出：Infinity
        console.log(typeof test);      //输出：number

        //NaN
        var test1 = "abc" * "456";
        console.log(test1);             //输出：NaN
        console.log(typeof test1);      //输出：number
    </script>

</head>

<body>

</body>

</html>

4. 布尔值（Boolean）

        4.1 说明                

                布尔值主要用来做逻辑判断。

                布尔值只能够取真（true）和假（false）两种值。除此以外，其他的值都不被支持。

        4.2 语法

                var 变量名 = true / false;

        4.3 注意

                使用typeof关键字检查一个布尔值时，会返回boolean。

        4.4 示例                
<!DOCTYPE html>
<html lang="zh-CN">

<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>

    <script>
        var bool = true;
        var bool1 = false;

        console.log(bool);              //输出：true
        console.log(bool1);             //输出：false
        console.log(typeof bool);       //输出：boolean
        console.log(typeof bool1);      //输出：boolean
    </script>

</head>

<body>

</body>

</html>

5. 空值（Null）

        5.1 说明        

                Null类型的值只有一个，就是null。

                null表示的是一个空对象，所以使用typeof检查时会返回一个object。

        5.2 语法

                var 变量名 = null；

        5.3 注意

                使用typeof关键字检查null类型的值时，会返回一个object。

        5.4 示例                
<!DOCTYPE html>
<html lang="zh-CN">

<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>

    <script>
        var nu = null;

        console.log(nu);              //输出：null
        console.log(typeof nu);       //输出：object
    </script>

</head>

<body>

</body>

</html>

6. 未定义（Undefined）

        6.1 说明

                Undefined类型的值只有一个，就是undefined。

                当声明一个变量，但是并不给变量赋值时，它的值就是undefined。                

        6.2 语法

                var 变量名；

        6.3 注意

                使用typeof关键字检查undefined类型的值时，会返回一个undefined。

        6.4 示例                
<!DOCTYPE html>
<html lang="zh-CN">

<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>

    <script>
        var un;

        console.log(un);              //输出：undefined
        console.log(typeof un);       //输出：undefined
    </script>

</head>

<body>

</body>

</html>

三、类型转换

1. 介绍        

        类型转换，是指将一个数据类型转换为其它的数据类型。

        类型转换主要指：将其它的数据类型，转换为：String 或 Number 或 Boolean。

2. 将其它数据类型转换为String

        2.1 说明

                将Number、Boolean、Null、Undefined类型的变量转换为：String类型。

        2.2 语法                
                2.2.1 方法1：调用被转换数据类型的变量的 tostring() 方法

                        var result = 要被转换类型的变量名.toString()；

                2.2.2 方法2：调用String()函数，并将要被转换类型的数据作为参数

                        var result = String(要被转换类型的变量名)；

        2.3 注意                

                toString()方法不会影响到原变量，它会将转换后的结果返回。

                String()函数不会影响到原变量，它会将转换后的结果返回。

                null和undefined这两个值没有toString()方法，如果调用则会报错。

                使用String()函数做类型转换时：

                        对于Number和Boolean来说，实际上就是调用的toString()方法；

                        对于Null和Undefined来说，做的是：将null直接转换为"null"，将undefined直接转换为"undefined"。

        2.4 示例                
<!DOCTYPE html>
<html lang="zh-CN">

<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>

    <script>

        /*
            1、使用toString()方法
        */

        // Number类型转换为String
        var num = 123;
        var str1 = num.toString();

        console.log(typeof num);        //输出：number
        console.log(typeof str1);       //输出：string

        // Boolean类型转换为String
        var bol = true;
        var str2 = bol.toString();

        console.log(typeof bol);        //输出：boolean
        console.log(typeof str2);       //输出：string

        // Null类型转换为String
        var nul = null;
        var str3 = nul.toString();      //报错，原因是null类型没有toString()方法

        console.log(typeof nul);
        console.log(typeof str3);

        // Undefined类型转换为String
        var un;
        var str4 = un.toString();      //报错，原因是undefined类型没有toString()方法

        console.log(typeof un);
        console.log(typeof str4);


        /*
            方式2：使用String()函数
        */

        // Number类型转换为String
        var num1 = 123;
        var str11 = String(num1);

        console.log(typeof num1);        //输出：number
        console.log(typeof str11);       //输出：string

        // Boolean类型转换为String
        var bol1 = true;
        var str22 = String(bol1);

        console.log(typeof bol1);        //输出：boolean
        console.log(typeof str22);       //输出：string

        // Null类型转换为String
        var nul1 = null;
        var str33 = String(nul1);

        console.log(typeof nul1);        //输出：object
        console.log(typeof str33);       //输出：String

        // Undefined类型转换为String
        var un1;
        var str44 = String(un1);

        console.log(typeof un1);        //输出：undefined
        console.log(typeof str44);      //输出：string


    </script>

</head>

<body>

</body>

</html>

3. 将其它数据类型转换为Number

        3.1 说明

                将String、Boolean、Null、Undefined类型的变量转换为：Number类型。

        3.2 语法                
                3.2.1 方式1：调用Number()函数，并将要被转换类型的数据作为参数

                        var result = Number(要被转换类型的变量名)；

                3.2.2 方式2：专门用于对付字符串

                        var result = parseInt(要被转换类型的字符串)； //把一个字符串转换为一个整数

                        var result = parseFloat(要被转换类型的字符串)； //把一个字符串转换为一个浮点数

        3.3 注意        

                Number()函数相关：

                        String转换为Number，

                                如果是纯数字的字符串，则直接将其转换为Number；

                                如果字符串中有非数字的内容，则转换为NaN；

                                如果字符串是一个空串或者是一个全是空格的字符串，则转换为0。

                        Boolean转换为Number：

                                true转换为数字1；

                                false转换为数字0。

                        Null转换为Number：

                                null转换为数字0。

                        Undefined转换为Number：

                                undefined转换为NaN。

                parseInt()函数可以将一个字符串中有效的整数内容取出来，然后将其转换为Number。

                parseFloat()函数可以将一个字符串中有效的浮点数内容取出来，然后将其转换为Number。

                如果对非String使用parseInt()或parseFloat()，它会自动地先将其转换为String，然后再进行转换为Number的操作。

        3.4 示例                
<!DOCTYPE html>
<html lang="zh-CN">

<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>

    <script>

        /*
            1、使用Number()函数
        */

        // String转换为Number
        var str1 = "123";
        var str2 = "123abc";
        var str3 = "";
        var str4 = "    ";
        var num1 = Number(str1);
        var num2 = Number(str2);
        var num3 = Number(str3);
        var num4 = Number(str4);

        console.log(typeof str1);       //输出：string
        console.log(typeof str2);       //输出：string
        console.log(num1);              //输出：123
        console.log(num2);              //输出：NaN
        console.log(num3);              //输出：0
        console.log(num4);              //输出：0
        console.log(typeof num1);       //输出：number
        console.log(typeof num2);       //输出：number
        console.log(typeof num3);       //输出：number
        console.log(typeof num4);       //输出：number

        // Boolean转换为Number
        var bol1 = true;
        var bol2 = false;
        var num11 = Number(bol1);
        var num22 = Number(bol2);

        console.log(typeof bol1);       //输出：boolean
        console.log(typeof bol2);       //输出：boolean
        console.log(num11);             //输出：1
        console.log(num22);             //输出：0
        console.log(typeof num11);      //输出：number
        console.log(typeof num22);      //输出：number

        // Null转换为Number
        var nul = null;
        var num111 = Number(nul);

        console.log(typeof nul);        //输出：object
        console.log(num111);            //输出：0
        console.log(typeof num111);     //输出：number

        // Undefined转换为Number
        var un;
        var num1111 = Number(un);

        console.log(typeof un);          //输出：undefined
        console.log(num1111);            //输出：NaN
        console.log(typeof num1111);     //输出：number


        /*
            2、使用parseXXX()函数，此类型函数专门用于对付字符串
        */
        var str11 = "123px";
        var str22 = "123.456sss";
        var num12 = parseInt(str11);
        var num13 = parseFloat(str22);

        console.log(typeof str11);     //输出：string
        console.log(typeof str22);     //输出：string
        console.log(num12);            //输出：123
        console.log(num13);            //输出：123.456
        console.log(typeof num12);     //输出：number
        console.log(typeof num13);     //输出：number

    </script>

</head>

<body>

</body>

</html>

4. 将其它数据类型转换为Boolean

        4.1 说明

                将Number、String、Null、Undefined类型的变量转换为：Boolean类型。

        4.2 语法

                var result = Boolean(要被转换类型的变量名)；

        4.3 注意                

                Number转换为Boolean，

                        除了0和NaN，其余的数字均转换为true。

                String转换为Boolean，

                        除了空串，其余的字符串均转换为true。

                Null转换为Boolean，

                        null转换为false。

                Undefined转换为Boolean，

                        undefined转换为false。

                Object转换为Boolean，

                        对象均会转换为true。

        4.4 示例                
<!DOCTYPE html>
<html lang="zh-CN">

<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>

    <script>

        /*
            使用Boolean()函数
        */

        // Number转换为Boolean
        var num1 = 123;
        var num2 = 0.123;
        var num3 = 0;
        var num4 = NaN;
        var bol1 = Boolean(num1);
        var bol2 = Boolean(num2);
        var bol3 = Boolean(num3);
        var bol4 = Boolean(num4);

        console.log(bol1);                  //输出：true
        console.log(bol2);                  //输出：true
        console.log(bol3);                  //输出：false
        console.log(bol4);                  //输出：false
        console.log(typeof bol1);           //输出：boolean
        console.log(typeof bol2);           //输出：boolean
        console.log(typeof bol3);           //输出：boolean
        console.log(typeof bol4);           //输出：boolean
        // String转换为Boolean
        var str1 = "hello";
        var str2 = "     ";
        var str3 = "";
        var bol11 = Boolean(str1);
        var bol22 = Boolean(str2);
        var bol33 = Boolean(str3);

        console.log(bol11);                  //输出：true
        console.log(bol22);                  //输出：true
        console.log(bol33);                  //输出：false
        console.log(typeof bol11);           //输出：boolean
        console.log(typeof bol22);           //输出：boolean
        console.log(typeof bol33);           //输出：boolean
        // Null转换为Boolean
        var nu = null;
        var bol111 = Boolean(nu);

        console.log(bol111);                  //输出：false
        console.log(typeof bol111);           //输出：boolean
        // Undefined转换为Boolean
        var un;
        var bol1111 = Boolean(un);

        console.log(bol1111);                  //输出：false
        console.log(typeof bol1111);           //输出：boolean
    </script>

</head>

<body>

</body>

</html>
上一篇：.NET无侵入式对象池解决方案


下一篇：回归本真 治愈心灵——汪青《在西行的路上》