Javascript 数据类型详解：7种基本类型、3种引用类型

秒速五厘米 2024-05-28 10:12 95阅读 0赞

> **还是大剑师兰特**：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

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

<table> 
 <thead> 
  <tr> 
   <th>No.</th> 
   <th align="left">内容链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Openlayers <a href="https://dajianshi.blog.csdn.net/article/details/136641287" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126706466" rel="nofollow"> 【源代码+示例300+】 </a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">Leaflet <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow"> 【源代码+图文示例 150+】 </a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">Cesium <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow"> 【源代码+图文示例200+】 </a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">MapboxGL<a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow"> 【源代码+图文示例150+】 </a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">前端就业宝典 <a href="https://blog.csdn.net/cuclife/category_12437862.html" rel="nofollow">【面试题+详细答案 1000+】</a></td> 
  </tr> 
 </tbody> 
</table>

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

#### 文章目录 ####

*   *  一、基本数据类型（Primitive Types）
     *  二、引用数据类型（Reference Types）
     *  三、注意事项

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

JavaScript具有动态类型，这意味着变量的类型可以在运行时改变。JavaScript主要有以下几种数据类型：

### 一、基本数据类型（Primitive Types） ###

1.  **字符串（String）**：任何文本，可以用单引号(’ ')或双引号(" ")包围。
    
        let str = 'Hello, World!';
2.  **数字（Number）**：整数或浮点数。
    
        let num = 42;
        let floatNum = 3.14;
3.  **布尔值（Boolean）**：只有两个值，`true` 或 `false`。
    
        let boolTrue = true;
        let boolFalse = false;
4.  **undefined**：表示变量已被声明但未被赋值。
    
        let unassignedVar;
        console.log(unassignedVar); // 输出 undefined
5.  **null**：表示一个空值或无值。
    
        let emptyValue = null;
6.  **Symbol**（ES6引入）：唯一且不可变的数据类型，主要用作对象的键。
    
        let uniqueSymbol = Symbol();
7.  **BigInt**（ES2020引入）：用于存储大于`Number.MAX_SAFE_INTEGER`的整数。
    
        let bigInt = 9007199254740992n; // 注意结尾的'n'

### 二、引用数据类型（Reference Types） ###

1.  **对象（Object）**：无序属性的集合，属性可以是任意数据类型。
    
        let obj = {
               key: "value", anotherKey: 42 };
2.  **数组（Array）**：有序的元素集合，元素可以是任意数据类型。
    
        let arr = [1, "text", true];
3.  **函数（Function）**：JavaScript的一等公民，可以作为变量或对象的属性。
    
        function sayHello(name) {
              
            console.log("Hello, " + name + "!");
        }

### 三、注意事项 ###

*  **类型转换**：JavaScript会自动进行类型转换，比如在比较不同类型时，这可能导致非直观的结果，应谨慎处理。
 *  **NaN**：Not-a-Number，是一个特殊的Number类型值，用于表示不是一个数字的值。
 *  **类型检测**：推荐使用`typeof`操作符检测基本类型，但对于Object，包括数组和函数，使用`Array.isArray()`或`instanceof`来精确判断更佳。
 *  **空值合并运算符（??）**：ES2020引入，用于返回第一个非null和非undefined的值，例如 `let result = maybeNull ?? "default";`
 *  **可选链（?.）**：ES2020引入，安全地访问深层嵌套的属性，避免因中间属性不存在而导致的错误，如 `let value = obj?.property?.subProperty;`

理解并熟练运用JavaScript的数据类型，是进行高效和安全编程的基础。

[4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/82f942042beb4af49aaa4e165ecfa037.png
[744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/5e3abda46aea44beb9ef75a3038aacd5.png