JavaScript数据类型及其存储方式

左手的ㄟ右手 2023-06-19 13:25 93阅读 0赞

## 数据类型 ##

JavaScript是弱类型语言，定义变量的时候无需指定变量的类型，JavaScript引擎在运行代码的时候会自动判断变量的类型。

JavaScript数据类型有8种：

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Boolean</td> 
   <td>true、false</td> 
  </tr> 
  <tr> 
   <td>NUll</td> 
   <td>null值</td> 
  </tr> 
  <tr> 
   <td>Undefined</td> 
   <td>未赋值的变量默认值为undefined， 变量提升时的默认值也是undefined</td> 
  </tr> 
  <tr> 
   <td>Number</td> 
   <td>数字类型，取值范围：-(2 ^63-1) ~ 2 ^63-1</td> 
  </tr> 
  <tr> 
   <td>String</td> 
   <td>字符串</td> 
  </tr> 
  <tr> 
   <td>Object</td> 
   <td>对象</td> 
  </tr> 
  <tr> 
   <td>BigInt</td> 
   <td>BigInt数据类型的目的是比Number数据类型支持的范围更大的整数值。在对大整数执行数学运算时，以任意精度表示整数的能力尤为重要。使用BigInt，整数溢出将不再是问题。</td> 
  </tr> 
  <tr> 
   <td>Symbol</td> 
   <td>符号类型，唯一的，通常用来作为object的key</td> 
  </tr> 
 </tbody> 
</table>

## 存储方式 ##

var a = 1;
    var b = a;
    a = 2;
    console.log(b);
    
    var c = { a: 1};
    var d = c;
    c.a = 2;
    console.log(d.a);
    
    var e = "hi";
    var f = e;
    e = "hello";
    console.log(f);
    
    var j = false;
    var h = j;
    j = true;
    console.log(h);

结果：  
![在这里插入图片描述][2019120618565498.png]  
先看这段实例代码，c、d变量和其他变量不同，当改变c变量的a属性值时时，d变量的a属性值也跟着改变了，这是为什么？

我们把像数字类型、布尔类型、字符串等类型称为普通类型，把数组、对象这类类型称为引用类型，这两种类型的数据前者存储在栈中，后者存储在堆中。

在[《JavaScript中的执行上下文、作用域链和闭包详解》][JavaScript]中，讲解过执行上下文的概念，代码在编译期间会创建该段代码的执行上下文，确定好变量和函数提升，当代码执行的时候，会将相应的值赋值给环境变量对象中的属性。代码执行的时候，会将普通类型的变量和引用类型的变量分别存储在栈空间和堆空间中，以下面这段代码举例：

function test() { 
    	var a = "hi";
    	var b = a;
    	var c = { first: "f"};
    	var d = c;
    }
    foo();

当调用foo函数的时候，会创建foo函数的执行上下文，此时的调用栈（注：调用栈的概念在[《JavaScript中的执行上下文、作用域链和闭包详解》][JavaScript]中讲过）如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUXzEw_size_16_color_FFFFFF_t_70]  
当执行到`var c = {first: "f"};`的时候，JavaScript引擎判断到右边的值是一个引用类型，因此在堆中开辟一个空间存放这个值，然后将该值在堆空间的首地址放入c的栈空间上，此时的调用栈如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUXzEw_size_16_color_FFFFFF_t_70 1]  
当程序执行到`var d = c;`的时候，将1111赋值给d：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUXzEw_size_16_color_FFFFFF_t_70 2]

> 为什么JavaScript中变量的存储会分为栈空间和堆空间
> 
>  *  因为引用类型一般占用的空间比较多，这样当执行函数进行上下文切换的时候会消耗性能
>  *  赋值的时候节省空间

[2019120618565498.png]: https://img-blog.csdnimg.cn/2019120618565498.png
[JavaScript]: https://blog.csdn.net/IT_10/article/details/82017973
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUXzEw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191206191313892.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUXzEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUXzEw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191206192335925.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUXzEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUXzEw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191206192537494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUXzEw,size_16,color_FFFFFF,t_70