JS 里的数据类型转换

前言：上一篇博客讲到JS里的数据类型，相信大家已经了解到7种数据类型，那么这章将详细深入了解JS的不同数据类型之间的转换,以及简单认识一下什么是内存图、垃圾回收是如何进行回收、以及浅拷贝VS深拷贝概念。

一、其他数据类型转换成string类型

方法一：数据类型+.toString() (新手使用)

（1）数字和布尔型转字符串

//数字转字符串
var n=1
n.toString()//"1"
//布尔转字符串
var n=true
n.toString()//"true"

（2）对于null和undefined转string类型，会出现报错情况

//null转字符串
var n=null
n.toString()//Uncaught TypeError: Cannot read property 'toString' of null
//undefined转字符串
var n=undefined
n.toString()//Uncaught TypeError: Cannot read property 'toString' of undefined

（3）将对象转换成字符串，其结果为"[object,Object]"，这不是我们想要的结果

//object转字符串
var object={name:'pig'}
object.toString//"[object,Object]"

方法二：数据类型+‘’ (老司机使用)

使用方法二和方法一的结果都是一样的，新手往往习惯使用方法一，老司机习惯使用方法二，方法二使用其实更加快捷和好用。

方法三：String(数据类型) 在window下使用，原型是window.String(数据类型)

var n=1
string(1)//"1"
var n=true
string(true)//"true"

不同数据类型之间进行相加，其结果也是不一样。如1+'1'=?,由于加号总会尝试对一些相同的类型进行相加，所以它会优先将左边的1变成字符串'1'等价于(1).toString(),最后结果是字符串'11'

1+'1'//结果是字符串”11"
2+true//结果是3
true+'1'//字符串”true1“

二、其他数据类型转换成boolean类型

方法一：Boolean(数据类型) （新手使用）

Boolean(1)//true 
Boolean(-1)//true
Boolean([])//true
Boolean({})//true
Boolean(' ')//true 空格字符串
Boolean(0)//false
Boolean(NaN)//false
Boolean('')//false 空字符串
Boolean(null)//false
Boolean(undefined)//false 

boolean数据类型中的false值只有5个：0;NaN;'';null;undefined;特别要注意上述中''是表示空字符串，但是对于' '空格字符串却是true值，对于其他的值都是true，如空数组、空对象等。

方法二：!!数据类型 （老司机使用）

!true===false,!!true===true上述例子说明用任何东西给他取反两次就会得到一个boolean类型，其结果和方法一同样。

三、其他数据类型转换成number类型

方法一：Number('1')===1

Number('1')//1
Number('01')//1
Number('-1')//1
Number(false)//0  布尔类型false转数字类型
Number(true)//1  布尔类型true转数字类型
Number(null)//0   null类型转数字类型
Number(undefined)//NaN undefined类型转数字类型

方法二：parseInt('1',10)===1 10表示十进制，parseInt中必须写明是多少进制

parseInt('011')//11 因为ES历史升级原因，这里0开头不是表示8进制
parseInt('011',8)//9  8进制
parseInt('011',10)//11 十进制
parseInt('s')//NaN 如果不是数字就会出现一些奇怪的结果
parseInt('1s')//1 parse数字，直到不是遇到不是数字为止
parseInt('1s11')//1 parse数字,遇到不是数字就会中断，后面还有数字将不会解析

方法三：parseFloat('1.23')===1.23 前面的parseInt表示取是整数，parseFloat表示取的是浮点数

  parseInt('1.23',10)//1 十进制
  parseFloat('1.23',10)//1.23 十进制

方法四：'1'-0===1 （字符串减零） 字符串通过减零的方法也可以转换成number类型

'1'-0//1
'-1'-0//-1

方法五：+‘1’===1 （字符串取正） 字符串通过取正方法同样可以转换成number类型

+'1'//1
+'-1'//-1
-'-1'//1 负负得正，结果为1
-(-'-1')//1 这种情况不能用--‘-1’代替，减减代表是另外一种意思，如果非要用就要用括号围起来。

四、认识内存图

在认识内存图之前，先简单介绍一下什么是内存。内存就是暂时存储程序以及数据的地方，内存一旦断电，里面存储的数据就会被清空。外存（硬盘）存储数据，断电情况下数据就不会掉失。目前市场上最快的外存是SSD，它目前运行速度是比较接近内存，但是相对同样是外存的机械硬盘来说就贵了一点。机械硬盘运行速度比较慢，容易坏，SSD不容易坏，但是坏了一点点就全盘坏。

eg：说明一下电脑内存分配和使用，2G的内存，打开电脑运行操作系统需要512M内存，打开google浏览器约1G内存，其中页面1约100M（html+css:20M;JS:最大100M;网络：HTTP:20M;其他：插件、定时器），页面2约100M........

（1）重点认识JS分配的内存

JS内存图
其中数据区分为两个内存区：stack(栈内存)和Heap（堆内存）
普通类型与对象内存存放的区别
注意：普通数据类型可以直接存在stack区，如当b=a时，则b=1。像对象如果直接存放stack区，后期如对象o要添加数据，就要重新插入stack区中，对象o后面的数据就要往后移动，如果后面数据很多，就会导致运行很慢。如上图所示，可以通过在stack区存放对象的地址，其数据放在Heap区，这样后期对象要加数据可以直接在Heap区上添加。当o2=o时，o2的stack区就变成ADDR 100 64位

五、四个关于内存图的题目

（1）题目一

题目一

因为a的值一直没有变，只有b的值发生变化，由图可知a={name:'a'}

（2）题目二

题目二
图二a的值没有变化，因此a=1

（3）题目三

题目三
注意：等号只做一件事就是将右边赋值给左边，所以a.name=a

（4）题目四

题目四
上图中a和b的地址都没有改变，只是地址的内容发生了变化，所以a.name='b'

六、浏览器垃圾回收

简单定义：如果一个对象没有被引用，那么它就是垃圾，将被浏览器回收，节省内存，回收时间不定。

垃圾回收例子1
如例子1所示，a=b之后，Heap地址30没有被任何东西引用，这就是垃圾，将被回收。 垃圾回收例子2
上图例子2,在执行步骤3之后function(){}不会回收，从图可知它还是有引用在。如果将document.body.onclick=null,那么function将没有被引用，正常浏览器都通常认定它就是垃圾将被回收，但是IE浏览器不这样认为，所以IE中不将整个浏览器关闭，就会导致像body→onclick→function这样的垃圾越来越多，这就是所谓的内存泄露。解决方法：window.onunload=function(){document.body.onclick=null}将所以监听事件变成null（如果有100个监听，同样要加上100个null）

七、浅拷贝VS深拷贝

（1）b的值变不影响a的值,这就是深拷贝，其中简单的数据类型赋值就是深拷贝。

var a=1
var b=a
b=2 
a=1

（2）b的值变导致a的值也变,这就是浅拷贝，复杂类型涉及比较多浅拷贝。

var a={name:'a'}
var b=a
b.name='b'
a.name='b'

（3）那么对象是如何实现上述例子的深拷贝，下面以图形式简单了解一下：

对象深拷贝图解

通过对a、b引用不同的地址，从而实现对象的深拷贝