js的数据类型、堆栈存储、多数据类型计算

悠悠 2022-12-26 10:29 138阅读 0赞

# js的数据类型、堆栈存储、多数据类型计算 #

## js数据类型有哪些 ##

#### 基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）； ####

#### 引用数据类型: Object。包含Object、Array、 function、Date、RegExp。 ####

> 备注： 基本数据类型，又称值类型。

## 栈堆存储 ##

###### 值类型栈存储： 主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。 ######

###### 例如： ######

###### 当我们执行下方代码时栈内存中的变化： ######

var a=100;
    
    var b=100;
    
    a=200;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

###### 引用类型堆栈存储： 主要针对Object、Array这两种引用数据以及null， 同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]

###### 备注： ######

> 引用类型存储把值存储在堆内存中，堆内存是从下往上存储。生成唯一内存地址。然后在栈内存中把地址赋值给变量。栈内存是从上往下存储的。之所以如此划分内存主要考虑到特别大的对象进行值传递时的效率问题。

#### 常见的值类型： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]

#### 常见的引用类型： ####

> 说明：因typeof 检测null返回object，故有些地方也成null为特殊引用类型。但我们最好还是归为基本类型。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]

### typeof运算符： ###

##### 基本类型（值类型）: #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 4]

###### 总结： ######

> typeof 能有效检测基本类型，检测引用类型都返回object,其中null属于特殊的引用类型返回object,function属于特殊引用类型类型不用于存储数据，typeof检测返回function.

#### 变量计算-类型转换 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 5]

##### 1. 字符串拼接 #####

const a=100+200; // 200
    const b=100+'200' // '100200'
    const c='true'+'100' // 'true100'

> 结论：+运算中有字符串，结果就是字符串拼接。

##### 2.`==与===` #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 7]

###### 结论： ######

> `===`三等表示全等，判断左右两边对象或值是否类型相同且值相等。  
> `==`二等表示值相等。判断操作符两边对象或值是否相等类型可以不同，类型不同时，使用`Number()`转换成`Number`类型在进行判断。例外规则，`null==undefined，null/undefined`进行运算时不进行隐式类型转换。通常把值转为Boolean值，进行条件判断。`Boolean(null)===Boolean(undefined)`>false===false 结果为true

#### 3. if语句和逻辑运算 ####

###### truly变量和fasely ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 8]

###### 常见的falsely变量（除此之外全是truly变量）。 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 9]

##### 总结： #####

> 所有基本类型中Boolean值是false的只有6个，分别是 : 0 NaN ’ ’ null undefined false  
> 引用类型Boolean值全是true.

##### if语句中的判断 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 10]

##### 总结： #####

> if条件是单个值时，如果是truly值，条件成立， 如果是falsely值，条件不成立

##### 逻辑判断： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 11]

##### 总结： #####

> 逻辑与（&&）运算规则： 左侧为truly返回右侧，左侧为fasely返回左侧。  
> 逻辑或（ | | ）运算规则： 左侧为truley返回左侧，左侧为fasely返回右侧。

##### `手写深拷贝` #####

###### 因为引用类型用到了地址传递，所有产生了另一个问题 深拷贝，详见另一篇博客。[手写深拷贝][Link 1] ######

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221120/ecd744527f4245c092f7f9f35964f8d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: /images/20221120/3978195969df40389fb30750a03df458.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]: /images/20221120/f6b7b7f8717142e8952f96c2b2459b5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]: /images/20221120/5d4cce1bba154f7384628822ebd146bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 4]: /images/20221120/32fed4b2409a4369af4a4c0e1975464e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 5]: /images/20221120/28579ba177b04d5bb4c00e8670049ab7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 6]: /images/20221120/92921ed4062a4a9abb4abc4de4a58920.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 7]: /images/20221120/45bcdb081b2a4ab2a4ccc1708cf30b42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 8]: /images/20221120/8ec9257c04cb4cf0bc8e6d7a2f83bbd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 9]: /images/20221120/e38399f2340c4861a9ac7c743ee585d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 10]: /images/20221120/2b8409a73f5d479bb111fd3b85efb570.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 11]: /images/20221120/c742003ee90647f5a8b2dd53c7b1ee07.png
[Link 1]: https://blog.csdn.net/weixin_43638968/article/details/109243067