续-初识JAVaScript---（2）

末蓝、 2024-03-16 16:31 29阅读 0赞

## 初识JavaScript ———（2）！！！ ##

### 一、关于JavaScript中的数据类型 ###

**虽然在JS中的变量在声明的时候不需要指定数据类型，但是在赋值的时候，每一个数据还是有类型的，所以还是需要学习JS中的数据类型。**

**JS的数据类型遵循ES规范（ECMAScipt规范），在ES6之后，又基于以下的六种类型之外添加了一种新的类型：Symbol**

#### 1.数据类型的分类 ####

##### （1）原始类型 #####

**在JS中的原始的数据类型有：Undefined、Number、String、Boolean、Null**

##### （2）引用类型 #####

**在JS中的引用的数据类型有：Object以及Object的子类**

**JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。以下是typeof运算符的语法格式：**

**`typeof 变量名`**

**typeof运算符的运算结果是以下6个字符串之一，注意字符串都是全部小写。**

**“undefined” “number” “string”**

**“boolean” “object” “function”**

**在JS中比较字符串是否相等使用“==”完成，不是使用equals。**

**Demo：要求a变量和b变量的数据类型必须是数字，不能是其他变量，也就是限制了变量的数据类型**

<html>
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
            <script type = "text/javascript">
                   function sum(a,b) {
          
                        if(typeof a == "number" && typeof b == "number") {
          
                            return a + b;
                        }
                        alert(a+","+b+"必须都为数字！");
                   }
                   //正确的方式：
                   var ret = sum(2,3);
                   alert("ret = "+ret);
                   //错误的方式：
                   var ret2 = sum(false,"abc");
                   alert("ret = "+ret2);
               </script>
        </body>
    </html>

**正确的执行结果：**

![在这里插入图片描述][bfd9ef9fc49049d09cc4dc05b610853c.png_pic_center]

**错误的执行结果：**

![在这里插入图片描述][43c5ad29bde745959f2b4c2b2a9a0fce.png_pic_center]

![在这里插入图片描述][c94121e66ac74932bbaba2fbe7cf4b97.png_pic_center]

**由于代码执行到了`alert(a+","+b+"必须都为数字！");`这句，说明sum函数并没有返回值，即ret2也没有接受到返回值，默认为undefined。**

**Demo：关于typedef的六种类型**

<html>
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
            <script type = "text/javascript">
                   var i;
                   alert(i+"的数据类型为"+typeof i);
    
                   var num = 3;
                    alert(num+"的数据类型为"+typeof num);
    
                   var str = "abc";
                     alert(str+"的数据类型为"+typeof str);
    
                   var flag = false;
                    alert(false+"的数据类型为"+typeof false);
    
                   var d = null;
                    alert(d+"的数据类型为"+typeof d);
                
                   
    
               </script>
        </body>
    </html>

![在这里插入图片描述][ac16d88a21e4463b9be05856dee38699.png_pic_center]

**注：null属于Null类型，但是typeof运算符的结果类型是“object”.**

#### 2.Undefined类型 ####

**Undefined类型只有一个值，这个值救赎undefined，当一个变量没有手动赋值，系统默认赋值undefined，或者也可以给一个变量手动赋值undefined。**

var i;     //类型为undefined
    var k = undefined;    //类型为undefined
    alert(i==k);   //true
    
    var j = "undefined";   //类型为string
    alert(j==k);   //false

#### 3.Number类型 ####

**（1）NUmber类型有哪些值？**

**整数、小数、负数、正数、不是数字、无穷大都属于Number类型（0、1、1.2、-1、NaN、Infinity）**

**关于NaN：表示Not a Number，不是一个数字，但属于Number类型。比如当运算结果应该是一个数字，最后算完不是一个数字的时候，结果就是NaN。**

**如，Demo：**

var a = 100;
     var b = "abc";
     alert("结果="+a/b);

![在这里插入图片描述][b737ebf6a2204c1aa5234b79912d9a81.png_pic_center]

**但是如果做的是加法运算，加号的一边为字符串时，先做字符串的拼接。Demo：**

var a = 100;
    var b = "abc";
    alert("结果="+(a+b));

![在这里插入图片描述][d520f3e72dc341c1a8bef21f6660a262.png_pic_center]

#### 4.Infinity类型 ####

**关于Infinity类型是当除数为0时，结果为无穷大。**

`alert(10/0);`

![在这里插入图片描述][713a77119432456db55a68d9d81690f2.png_pic_center]

思考：`alert(10/3)=?`

![在这里插入图片描述][bd2d778694a746c488c5932f1187781a.png_pic_center]

#### 5.isNaN函数 ####

用法：**isNaN(数据)，这个结果为true表示不是一个数字，结果为false表示是一个数字。因为isNaN的意思为：is Not a Number。**

**再对于之前，效果可和ypeof关键字替换，Demo：**

<html>
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
            <script type = "text/javascript">
                function sum(a,b){
          
                    if(isNaN(a) || isNaN(b)){
          
                        alert("参与运算的必须是数字！！！");
                        return;
                    }
                    return a+b;
                }
                var ret = sum(3,2);
                alert("ret="+ret);
            </script>
        </body>
    </html>

![在这里插入图片描述][ccb68550003749c8a7c0c7616ee6f1b5.png_pic_center]

#### 6.parseInt( )函数和parseFloat函数 ####

**parseInt( )函数作用：可以将字符串自动转换成数字，并且取整数位。**

**parseFloat( )函数作用：可以将字符串自动转换成数字**

**Demo：**

alert(parseInt("3.9999"));//3
    alert(parseInt(3.9999));//3
    alert(parseFloat("3.2")+1);//4.2

#### 7.Math.ceil函数 ####

**Math.ceil函数作用：将数字进行向上取整，Math是数学类，数学类中有一个ceil( ),作用是向上取整。**

`alert(Math.ceil(2.1));`

**结果就是3**

#### 8.Boolean类型 ####

**JS中的Boolean类型永远就只有两个值，true and false（和Java一样）。**

**在Boolean类型中有一个函数叫做：Boolean( ).**

**语法格式：**

**Boolean(数据)**

**其作用是将非布尔类型转换成布尔类型。**

**Demo1：**

var username = "";
    if(username) {
         alert("欢迎你"+username);
    }else {
         alert("用户名不能为空！");
    }

**Demo2：**

var username = "";
    if(Boolean(username)) {
         alert("欢迎你"+username);
    }else {
         alert("用户名不能为空！");
    }

**Demo1和Demo2的代码含义是一样的，如果username中包含字符串，经过if语句判断，如果为真，即结果就是true，就会执行第一条语句`alert("欢迎你"+username);`但是我们一般采用第一种写法，代码底层会自己变化。**

alert(Boolean(1));//true
    alert(Boolean(0));//false
    alert(Boolean(""));//false
    alert(Boolean("abc"));//true
    alert(Boolean(null));//false
    alert(Boolean(NaN));//false
    alert(Boolean(undefined));//false
    alert(Boolean(Infinity));//true

**总结：Boolean函数中有内容就转换成true，没有内容就是false。**

#### 9.Null类型 ####

**Null数据类型就一个值，null**

**注：`alert(typeof null);`这个代码的结果是object**

#### 10.String数据类型 ####

**（1）在JS当中字符串可以使用单引号，也可以使用双引号。**

`var str1 = "abc";`

`var str2 = 'abc';`

**（2）在JS中使用两种方式创建字符串：**

*  **`var str = "abc";`**
 *  **使用JS中内置的支持类(String)，`var str2 = new String("abc");`注意，String是一个内置类，可以直接使用，String的父类是Object。**

//小string（属于原始类型String）
    var x = "abc";
    alert(typeof x); //结果为string
    
    //大String（属于Object类型）
    var y = new String("abc");
    alert(typeof y); //结果为object

*  **但是不管小string 还是大String，他们的属性和函数都是通用的。**

**（3）关于String类型常用的属性和函数？**

*  **常用属性：**
    
     *  **length 获取字符串长度**
 *  **常用函数：**
    
     *  **indexof 获取指定字符串在当前字符串第一次出现处的下标**
     *  **lastIndexof 获取指定字符串在当前字符串最后一次出现处的下标**
     *  **replace 替换**
     *  **substring 截取子字符串**
     *  **toLowerCase 转换成小写**
     *  **toUpperCase 转换成大写**
     *  **split 拆分字符串**

#### 11.Object数据类型 ####

**Object是所有类型的超类，自定义的任何类型，默认继承Object。**

**（1）JS常见的属性**

**常见的属性：prototype属性（这个属性主要是给类动态的扩展属性和函数）、constructor属性**

**（2）JS中常见的函数**

**在JS中有toString、valueOf、tolocaleString函数等等**

**注：Object当中定义的类默认继承Object，会继承Object类中的所有属性以及函数，也就是说，自己定义的类中也有prototype属性**

**（3）在JS中如何定义类?又如何new对象？**

*  **定义类的第一种方式：**
    
     *  **`function 类名(形参){};`**
 *  **定义类的第二种方式：**
    
     *  **`类名 = function(形参){};`**
 *  **创建对象的方式：**
    
     *  `new 类名（构造方法名）(形参);`

**Demo：**

function test() {
                
                }
    test();//这样用就是一个函数
                
    var obj = new test();//这样用，object就是一个引用，保存内存地址指向堆中的对象。

**（4）在JS中类的定义和构造函数的定义是一起完成的。**

**Demo：**

function User(a,b,c) {
    //this表示当前对象，User类中有三个属性：name、age、number
    	this.name = a;
        this.age = b;
     	this.number = c;
    }
    
    //创建对象：
    var user1 = new User("zhangsan",18,123);
    //访问对象的属性：
    alert(user1.name);     //zhangsan
    alert(user1.age);      //18
    alert(user1.number);   //123

--------------------

### 二、null、NaN、undefined这三值的区别 ###

#### 1.数据类型不一样 ####

**null数据类型为object、NaN数据类型为number、undefined的数据类型为undefined**

alert(null==NaN);        //false
    alert(null==undefined);  //true
    alert(undefined==NaN);   //false
    
    //所以：null和undefined可以等同

**注：在JS中有两个比较运算符**

*  **（1）“==”为等同运算符，只判断值是否相等**
    
     *  **例：`alert(1==true);`这个的结果就是true**
 *  **（2）“===”为全等运算符，既判断值是否全等，也判断数据类型是否相等**
    
     *  **例：`alert(1===true);`这个的结果就是false，因为这两个的数据类型不一样**

--------------------

**好了，本期的博客就到此结束，下一期还会继续讲解JavaScript语言的续集，请大家持续关注，谢谢！！！**

既然选择远方，当不负青春，砥砺前行。

[bfd9ef9fc49049d09cc4dc05b610853c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1e4550858d4d45379a1a479dfd8b7893.png
[43c5ad29bde745959f2b4c2b2a9a0fce.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/e97aecdea7654da59d560d9abdd6258a.png
[c94121e66ac74932bbaba2fbe7cf4b97.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2ab147b8197548f8845e9e45f65a1942.png
[ac16d88a21e4463b9be05856dee38699.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fd7f485d03ed4fcb95ce9bbd4535749e.png
[b737ebf6a2204c1aa5234b79912d9a81.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1670a81648d54d169752be1e28a363f0.png
[d520f3e72dc341c1a8bef21f6660a262.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a367e4166e1d42699f058698d0f65060.png
[713a77119432456db55a68d9d81690f2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/cfc7ff15af1746e7a40313c4454182cb.png
[bd2d778694a746c488c5932f1187781a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ad82377c334642f783be84eb48763c3a.png
[ccb68550003749c8a7c0c7616ee6f1b5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/5f7d874a504143c9b9b34c25fe52d6f5.png