JS 里的数据类型转换

2018-12-10  本文已影响0人  MDIF

1.转number
1)Number()

var a = '1'
Number(a)  //1

2)parseInt()
语法:parseInt(string, radix)
string是要转换的字符串,radix是该字符串是几进制的。

parseInt('a1',16)
//161

如果string是无法转化的则返回NAN

parseInt('a1',10)
//NaN
//十进制是没有a的

如果string中有e,或出现不可预料的结果

parseInt('1.23e2',10)
//1

ES3时,string中如果有数字0开头的数字会被认为是八进制,ES5已经禁止这种表示方法。不过现在如果有实现环境使用数字0表示八进制,parseInt()有可能出现八进制或者十进制。解决方法就是永远都要指定radix。
3)parseFloat(value)
转换成浮点数可以使用此方法。不需要指定radix
4)字符串 - 0

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

5)字符串取正

+ '1' //1
+ '-1'//-1

2.转string
1).toString()
无法转换null和undefined

var a = 233
a.toString()
//'233'

2)+''(加号空字符串)

1+''//'1'
true+''//'true'

3)String()

var a = 123
String(null) //'null'
String(a) //'123'

3.转boolean
1)Boolean()

Boolean(1) //true
Boolean('0')//true
Boolean(0)//false

2)!!

!!1//true
!!'0'//true
!!0//false
!!''//false  空字符串

其中0,NaN,'',null,undefined,返回false。
对象永远是true。

null和undefined只有一个值,不需要特意去转换。
那么能不能把简单类型转换成对象(复杂类型)呢?
这就需要知道对象是怎么在内存中储存的。
浏览器会给JS引擎分配一些内存,JS把得到的内存分为代码区和数据区。如同字面意思,代码存代码区,数据存数据区。
数据区又分为栈内存(stack)和堆内存(Heap),数据在stack中的数据结构是栈,堆内存中的数据结构是堆。
简单类型会被存到stack中,复杂类型会被存到Heap中并在stack中存储对应的地址。下面的变量是怎么存到内存中的呢?

var a = 1
var b = 3
var c = {
  name:'pony'
  age:18
}

画张图就一目了然了



其中内存地址233是随机分的。ADDR是地址(address)的意思,只是为了说明加上去的。内存中不会有这个。
变量c专业点说叫:引用了内存地址为233的对象的变量。-o-
执行下面代码内存是怎么变的呢?

b = a
c.name = 'jim'

干想很容易出错,画张图就很稳了



首先执行b = a,把b中的数据删掉并把a的数据复制过去,执行c.name = 'jim',c里面存的是对象的地址,按地址找到对象,把对象的name属性改成'jim'。
那么再加上下面的代码呢?

var d = {name:'pony'}
d = c

先在heap中开辟空间,创建一个新的对象,地址为666。此时d在stack中存的地址是新对象的地址666。
执行d = c之后:



d的值就是c的值,c在stack中的值是233。可以看到d的值换成了c的值。
知道了对象怎么在内存中存储,想把数据类型转换成对象就很简单了。
使用Object函数可以基本类型包装成对象

Object(1)
Object(‘1’)
Object(true)

直接把一个对象赋值给变量


垃圾回收
如果一个对象没有被引用,它就是垃圾,就要被回收。

var fn = function(){name:'jack'}
document.body.onclick = fn
fn = null

上面的代码中,虽然第三句让fn为空,也就是没有引用后面的函数了,但是这个函数仍被document引用。
数据在内存中如下图所示



假如把上图中的document赋值null,那么不仅fn是垃圾,body和onclick也会成为垃圾,坐等浏览器回收,IE6会出现bug,IE6会认为这种情况没毛病啊,不会认为右边那仨是垃圾,这样会导致内存泄漏出现。
内存泄漏:该被标记为垃圾的东西没有被标记,内存会被永远占用,除非彻底关掉浏览器。
解决方法就是:给所有的事件监听,设置为空。举例代码

window.onunload = function(){
  document.body.onclick = null //
}

最后简单介绍一下深拷贝和浅拷贝的概念
深拷贝

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

b变a不变,这种叫深拷贝。

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

b变a也变,这种叫浅拷贝。

上一篇下一篇

猜你喜欢

热点阅读