【JavaScript】JS 里的数据类型转换和内存图

系统管理员 2022-04-12 06:01 302阅读 0赞

#### 类型转换&五个falsy值 ####

先来看一下js里面的七种数据类型：  
number string boolean null undefined object symbol。  
那么这些类型之间是如何转换呢？

//number 转string
    var n = 1
    n.toString()     // '1'
    1 + '' // '1'     老司机经常用这种方法 . 加号发现左右任意一边有字符串，他就会尝试把另外一边变成字符串
    String(n) // '1'
    //boolean转string
    var b = true
    b.toString() //'true'
    true + '' //'true'
    String(true) //'true'
    
    //null 和 undefined 没有toString方法
    null + '' // 'null'
    undefined + '' // 'undefined'
    String(null) // 'null'
    String(undefined) // 'undefined'
    
    //object 转string
    var o = {
    	name: 'zhangsan'
    }
    object.toString() // '[object Object]'
    
    object+'' //'[object Object]'
    String(object) //'[object Object]'

//其他类型转boolean
    Boolean(1)    //true
    Boolean(0)   //false
    Boolean('')  //false
    Boolean(' ') //true
    Boolean(null)   //false
    Boolean(undefined) //false
    Boolean({}) //true
    Boolean({name: 'zhangsan'})  //true
    
    老司机的方法：
    !!1 //true
    !!0 //false
    !!'' //false
    !!' ' //true
    !!{} //true
    !!undefined //false
    !!null //false

#### 重点, JS里面只有这五种数据转成bool是false，背下来！！ ####

0  
NaN 前两个的是数字类型  
‘’ 空字符串  
null  
undefined

//转为number
    Number（'1'）  //1
    parseInt('1', 10)   //以十进制转成1
    parseFloat（'1.23'）  //1.23
    //更骚的方法
    '1' - 0   //1
    '1.23 ' - 0 // 1.23

### JS内存图 ###

先来看一下js里面存放数据的两种内存：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]  
如图所示，一种是栈内存，一种是堆内存，栈内存存放基本的数据类型，堆内存存放复杂数据类型object。  
想一下当我们声明一个变量时，他在内存中是如何存放的？

var a = 1
    var b = 2

他们在堆内存中是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 1]  
当我们执行：  
b = a 时放生了什么？

#### ！！！js会把a里面存的值给b ####

内存图成了这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 2]  
那么对象时如何存放的呢？  
**是在栈内存中存放堆内存的地址**

var o1 = {name: 'zhangsan'}
    var o2 = {name: 'lisi'}

看这两个对象的内存图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 3]  
当我们执行： o2 = o1时会发生什么？  
和上面基本类型做的事情完全一样！！！！：

#### ！！！js会把a里面存的值给b（吧右边的值给左边） ####

o2里面存放的地址会变成address:100  
然后因为地址为106的对象没有人用，js引擎会在适当的时间干掉这个对象，垃圾回收

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

看一个题目：  
![在这里插入图片描述][20181201234840755.png]

答案如下图所示：  
a和b刚开始指向同一个对象，地址是101,  
执行b=\{name:‘b’\}之后b指向了这个新出来的对象

#### ！！！js会把新对象的值存放在b里面，也就是地址301（吧右边的值给左边） ####

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

再看一个题目：  
![在这里插入图片描述][20181201235549637.png]

答案如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 6]

再看一个题目：  
![在这里插入图片描述][20181201235738358.png]

答案如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]: /images/20220412/3a054b19a36340e385fa7bf99b7fbc21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 1]: /images/20220412/ce9093b443c44e629036eb84da0c0bdb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 2]: /images/20220412/bf90a84b590a4a9980242cf56c0da48c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 3]: /images/20220412/a0b21cfee53c4ba39efb5f7afc2631d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 4]: /images/20220412/5529e11ba1a34da18028dbb2a4855d87.png
[20181201234840755.png]: /images/20220412/93e4a22e8092490c803a8fab54d41212.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 5]: /images/20220412/5973856d4bcb41f8809991f8bf9dde21.png
[20181201235549637.png]: /images/20220412/296bcc26ac2d4e78a9c29c4fcba63a57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 6]: /images/20220412/f8633de583ea4ee7bb1081d7c08cad8e.png
[20181201235738358.png]: /images/20220412/cacc3237bded4938a9534738ed0c01d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70 7]: /images/20220412/61c12ff212a64bd396b809dd983f70d9.png