JS 里的数据类型转换

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

一、其他数据类型转换成string类型
方法一:数据类型+.toString() (新手使用)

(1)数字和布尔型转字符串

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

(2)对于nullundefinedstring类型,会出现报错情况

//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时,o2stack区就变成ADDR 100 64位

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

(1)题目一


题目一

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

(2)题目二

题目二

图二a的值没有变化,因此a=1

(3)题目三

题目三

注意:等号只做一件事就是将右边赋值给左边,所以a.name=a

(4)题目四

题目四

上图中ab的地址都没有改变,只是地址的内容发生了变化,所以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引用不同的地址,从而实现对象的深拷贝

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容