JavaScript基础语法（数据类型）

古城微笑少年丶 2024-03-31 12:53 121阅读 0赞

## JavaScript基础语法（数据类型） ##

**学习路线**：[JavaScript基础语法（输出语句）][JavaScript]\->[JavaScript基础语法（变量）][JavaScript 1]\->[JavaScript基础语法（数据类型）][JavaScript 2]\->[JavaScript基础语法（运算符）][JavaScript 3]\->[JavaScript基础语法（流程控制语句）][JavaScript 4]\->[JavaScript基础语法（类型转换）][JavaScript 5]\->[JavaScript基础语法（函数）][JavaScript 6]\->[Array\_JavaScript][Array_JavaScript]\->[String\_JavaScript][String_JavaScript]\->[自定义对象\_JavaScript][JavaScript 7]\->[JavaScript\_BOM][JavaScript_BOM]\->[Window对象][Window]\->[confirm()、setInterval()、setTimeout()][confirm_setInterval_setTimeout]\->[History、Location][History_Location]\->[闪烁的灯泡][Link 1]\->[JavaScript\_DOM][JavaScript_DOM]\->[事件绑定(onclick,onfocus,onblur)][onclick_onfocus_onblur]\->  
[事件绑定(onmouseout,onmouseover)  
][onmouseout_onmouseover_]\->[事件绑定(onsubmit)表单提交  
][onsubmit_]\->[提交表单与验证表单案例  
][Link 2]

### 数据类型 ###

**简介**：  
JavaScript 中提供了两类数据类型：原始类型 和 引用类型。

> 使用 typeof 运算符可以获取数据类型
> 
> `alert(typeof age);` 以弹框的形式将 age 变量的数据类型输出

#### 原始数据类型 ####

##### **number**：数字（整数、小数、NaN(Not a Number)） #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
      
    <script>
    // 不论是整数还是小数，最后的类型都是number
      var a = 1
      var b = 1.1
      console.log(typeof a)
      console.log(typeof b)
    </script>
    </body>
    </html>

**运行结果**  
![在这里插入图片描述][803ad4c0a16c407a8a489b88b5e820e2.png]

> 注意： NaN是一个特殊的number类型的值。

##### **string**：字符、字符串，单双引皆可 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
      
    <script>
      var ch = 'a';
      var name = '张三'; 
      var addr = "北京";
    
      document.write(typeof ch); //结果是  string
      document.write(typeof name); //结果是  string
      document.write(typeof addr); //结果是  string
    </script>
    </body>
    </html>

![在这里插入图片描述][1db458e5fd0a4236b32a5514145acc69.png]

> 注意： 在 js 中 双引号和单引号都表示字符串类型的数据

##### **boolean**：布尔。true，false #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
      
    <script>
      var flag = true;
      var flag2 = false;
    
      document.write(typeof flag); //结果是 boolean
      document.write(typeof flag2); //结果是 boolean
    </script>
    </body>
    </html>

**运行结果**  
![在这里插入图片描述][4a0eb3519f0c47feb796be41973eaf50.png]

##### **null**：对象为空 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
      
    <script>
      var obj = null;  
      document.write(typeof obj);//结果是 object
    </script>
    </body>
    </html>

**运行结果**  
![在这里插入图片描述][0b40ab521de14cf98a8a96f42311308d.png]

为什么打印上面的 `obj`变量的数据类型，结果是`object`；这个官方给出了解释，下面是从官方文档截的图

![在这里插入图片描述][212cb0c5dee74b52889a81ab1d03268d.png]

##### **undefined**：当声明的变量未初始化时，该变量的默认值是 undefined #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
      
    <script>
      var a ;
      document.write(typeof a); //结果是 undefined
    </script>
    </body>
    </html>

**运行结果**  
![在这里插入图片描述][ff589d6017ca47d19dc8fabf4e25b872.png]

[JavaScript]: https://blog.csdn.net/qq_51447496/article/details/128085137
[JavaScript 1]: https://blog.csdn.net/qq_51447496/article/details/128085348
[JavaScript 2]: https://blog.csdn.net/qq_51447496/article/details/128086148
[JavaScript 3]: https://blog.csdn.net/qq_51447496/article/details/128086681
[JavaScript 4]: https://blog.csdn.net/qq_51447496/article/details/128088817
[JavaScript 5]: https://blog.csdn.net/qq_51447496/article/details/128087248
[JavaScript 6]: https://blog.csdn.net/qq_51447496/article/details/128088986
[Array_JavaScript]: https://blog.csdn.net/qq_51447496/article/details/128089474
[String_JavaScript]: https://blog.csdn.net/qq_51447496/article/details/128089631
[JavaScript 7]: https://blog.csdn.net/qq_51447496/article/details/128089766
[JavaScript_BOM]: https://editor.csdn.net/md/?articleId=128095193
[Window]: https://blog.csdn.net/qq_51447496/article/details/128095300
[confirm_setInterval_setTimeout]: https://blog.csdn.net/qq_51447496/article/details/128103458
[History_Location]: https://blog.csdn.net/qq_51447496/article/details/128104240
[Link 1]: https://blog.csdn.net/qq_51447496/article/details/128095524
[JavaScript_DOM]: https://blog.csdn.net/qq_51447496/article/details/128104720
[onclick_onfocus_onblur]: https://blog.csdn.net/qq_51447496/article/details/128110532
[onmouseout_onmouseover_]: https://blog.csdn.net/qq_51447496/article/details/128112439
[onsubmit_]: https://blog.csdn.net/qq_51447496/article/details/128112553
[Link 2]: https://blog.csdn.net/qq_51447496/article/details/128112770
[803ad4c0a16c407a8a489b88b5e820e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6e7cbec6d0d841b8ab46e449432dfde4.png
[1db458e5fd0a4236b32a5514145acc69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/9c383fabc4434cd7a10e7a17283eb1a9.png
[4a0eb3519f0c47feb796be41973eaf50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3d4faf0369ff4a478b70b4d06917b2ba.png
[0b40ab521de14cf98a8a96f42311308d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/7514e1d573a54c0385bd0f76ac9f3406.png
[212cb0c5dee74b52889a81ab1d03268d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/915557e83a1343b1a3f5da6599932be5.png
[ff589d6017ca47d19dc8fabf4e25b872.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2776c0d68ce74ffaaabae5693103d6cf.png