深挖JavaScript語(yǔ)法二

JS一定要摳細(xì)節(jié)掖蛤,邏輯性。我們這次探討 內(nèi)存 的問(wèn)題井厌、一個(gè)IE的BUG以及深拷貝和淺拷貝蚓庭,和typeof運(yùn)算符的小技巧

在第一集里面知道了7個(gè)基本的數(shù)據(jù)類(lèi)型
number string boolean symbol null underdefined object
那么這七個(gè)數(shù)據(jù)類(lèi)型如何轉(zhuǎn)換呢

其他數(shù)據(jù)類(lèi)型轉(zhuǎn)string

  • String()函數(shù)
String(0)
"0"
String(true)
"true"
String(false)
"false"
String(null)
"null"
String(undefined)
"undefined"
String({})
"[object Object]"
String({name: 9})
"[object Object]"
  • toString()屬性
    注意null和undefined只是兩個(gè)值,沒(méi)有toString()屬性
null.toString()
VM371:1 Uncaught TypeError: Cannot read property 'toString' of null
    at <anonymous>:1:6
(anonymous) @ VM371:1
undefined.toString()
VM400:1 Uncaught TypeError: Cannot read property 'toString' of undefined
    at <anonymous>:1:11
(anonymous) @ VM400:1

還有一個(gè)要注意的

{}.toString()
VM91:1 Uncaught SyntaxError: Unexpected token .
({}).toString()
"[object Object]"

其他的都可以

var a = 8;
a.toString()
"8"
var a = true
a.toString()
"true"
var a = {}
a.toString()
"[object Object]"
  • 最常見(jiàn)的方法 ' '+
    無(wú)敵的方法
'' +1
"1"
''+ true
"true"
''+ null
"null"
''+ undefined
"undefined"

其它數(shù)據(jù)類(lèi)型轉(zhuǎn)number

  • Number()函數(shù)
Number('fff')
NaN
Number('30')
30
Number(null) //注意是0
0
Number(undefined) //注意是NaN
NaN
Number(true)
1
Number(false)
0
  • parseInt()和parseFloat()屬性
    parseInt()有個(gè)大坑仅仆,是從左邊第一個(gè)字符開(kāi)始看器赞,不是數(shù)字,就停下了墓拜,而不是我理解 的有幾個(gè)數(shù)字就打印幾個(gè)數(shù)字
parseInt('122') //默認(rèn)是十進(jìn)制
122
parseInt('011')
11
parseInt('011', 2) //規(guī)定是二進(jìn)制
3
parseInt('123', 10)
123
parseInt('011', 8) //規(guī)定是八進(jìn)制
9
parseInt('A09') //發(fā)現(xiàn)第一個(gè)字符就不是數(shù)字港柜,不往后面判斷了
NaN
parseInt('09A12')
9
parseFloat('11.4')
11.4
  • 沒(méi)見(jiàn)過(guò)的操作 其他數(shù)據(jù)類(lèi)型-0
null-0
0
undefined-0
NaN
'91' - 0
91
'91.09' - 0
91.09
'str' - 0
NaN
var a = {}
a-0
NaN
var a = '123'
a-0
123
  • 又是一個(gè)沒(méi)見(jiàn)過(guò)的操作 + ''
+'124'
124
+'12.4'
12.4
+false
0
+true
1
+null
0
+undefined
NaN

其它數(shù)據(jù)類(lèi)型轉(zhuǎn)成boolean

注意5個(gè)特殊的falsey值,當(dāng)然了false必然也是falsey值


0
NaN
' ' 這是空字符串咳榜,啥也沒(méi)有夏醉,空格也沒(méi)有
null
undefined


除了以上6個(gè)falsey值,其他的都是true

  • Boolean()函數(shù)
Boolean('')
false
Boolean(' ')
true
Boolean(0)
false
Boolean(NaN)
false
Boolean(null)
false
Boolean(undefined)
false
Boolean([])
true
Boolean({})
true
Boolean(9)
true
Boolean('pp')
true
  • !!的操作
    怎么理解呢涌韩,一個(gè)!是取反的操作畔柔,再加一個(gè)就是雙重取反,就是我們想要的結(jié)果了
!0
true
!1
false
!!0
false
!!NaN
false
!!''
false
!!null
false
!!undefined
false
!!1
true
!!'pp'
true
!![]
true
!!{}
true

四個(gè)經(jīng)典的內(nèi)存題

  • 粗糙的內(nèi)存圖的引入
    var a = 1 和var a = new Number(1)分別發(fā)生了什么
    簡(jiǎn)單數(shù)據(jù)類(lèi)型存在stack中臣樱,存儲(chǔ)位置是連續(xù)的靶擦,像彈匣一樣腮考,與數(shù)據(jù)結(jié)構(gòu)中的棧一樣,先進(jìn)后出(FILO)玄捕,而復(fù)雜數(shù)據(jù)類(lèi)型存儲(chǔ)在heap中踩蔚,存儲(chǔ)位置不連續(xù),與數(shù)據(jù)結(jié)構(gòu)中的堆一樣,是樹(shù)狀的發(fā)散結(jié)構(gòu),這一點(diǎn)超級(jí)重要啊。時(shí)時(shí)刻刻要記著數(shù)據(jù)結(jié)構(gòu)啊。

  • 第一個(gè)題 簡(jiǎn)單數(shù)據(jù)類(lèi)型的判斷 a=?

var a = 1
b = a
b = 2

a
1

答案是a=1


第一題.png
  • 第二個(gè)題 復(fù)雜數(shù)據(jù)類(lèi)型 的判斷 a =?
var a = {name: 'wushao'}
b =a
b={name: 'shao'}

a
{name: "wushao"}

答案是a={name: 'wushao'}耀找,結(jié)果不變


第二題.png
  • 第三個(gè)題 復(fù)雜數(shù)據(jù)類(lèi)型 的判斷 a.name=?
var a = {name: 'wushao'}
b =a
b.name = 'qwert'

a.name
"qwert"

答案是a.name = 'qwert',已經(jīng)被b.name改變了


第三題.png
  • 第四個(gè)題 復(fù)雜數(shù)據(jù)類(lèi)型 的判斷 a=?
var a = {name: 'a'}
var b = a
b = null

a
{name: "a"}

答案是 a = {name: "a"} 不受b的影響


第四題.png

一個(gè)很賤的面試題

var a = {n: 1}
var b = a
a.x = a = {n: 2}

alert(a.x) //是啥呢 undefined
alert(b.x) //是啥呢 [object Object]
面試題.png

IE6 的關(guān)于垃圾回收機(jī)制的一個(gè)BUG

有以下情形

var fn = function( ){ }
document.body.onclick = fn
fn = null
問(wèn)你 function(){}是不是垃圾
  • 第一種情況,你沒(méi)有關(guān)閉這個(gè)tab頁(yè)
    那么function不是垃圾


    是否是一個(gè)垃圾.png
  • 第二種情況洋幻,我關(guān)閉了這個(gè)tab頁(yè),那么function就是垃圾了


    關(guān)閉網(wǎng)頁(yè)后就是一個(gè)垃圾了.png

IE6的BUG在于讲竿,你關(guān)閉了網(wǎng)頁(yè),但是藍(lán)色圓里面的他不認(rèn)為是垃圾庄涡,除非你關(guān)閉瀏覽器量承。所以你要在網(wǎng)頁(yè)關(guān)閉的時(shí)候手動(dòng)加上一個(gè)

//onunload不加載,就是關(guān)閉了嘛
window.onunload = function(){
  document.body.onclick = null; //所有的都要有
}

由以上幾個(gè)題引出深拷貝和淺拷貝 的問(wèn)題

深拷貝是你改變了穴店,原來(lái)的不受改變的影響撕捍,而淺拷貝會(huì)改變?cè)瓉?lái)的屬性。
對(duì)于簡(jiǎn)單類(lèi)型的數(shù)據(jù)來(lái)說(shuō)泣洞,賦值就是深拷貝忧风。
對(duì)于復(fù)雜類(lèi)型的數(shù)據(jù)(對(duì)象)來(lái)說(shuō),才要區(qū)分淺拷貝和深拷貝球凰。


深拷貝.png

typeof運(yùn)算符的坑

JavaScript有三種方法狮腿,可以確定一個(gè)值到底是什么類(lèi)型。
typeof 運(yùn)算符
instanceof 運(yùn)算符
Object.prototype.toString方法

typeof運(yùn)算符可以判斷你要的值得數(shù)據(jù)類(lèi)型呕诉,有如下結(jié)果
先看大坑

typeof null
"object"
typeof Function
"function"
function f(){}
typeof f
"function"

函數(shù)竟然是function類(lèi)型的數(shù)據(jù)缘厢,坑爹啊。
null竟然是object甩挫,尼瑪贴硫,嚇壞了,一查原來(lái)是歷史遺留問(wèn)題伊者。

1995年JavaScript語(yǔ)言的第一版英遭,所有值都設(shè)計(jì)成32位,其中最低的3位用來(lái)表述數(shù)據(jù)類(lèi)型亦渗,object對(duì)應(yīng)的值是000挖诸。當(dāng)時(shí),只設(shè)計(jì)了五種數(shù)據(jù)類(lèi)型(對(duì)象央碟、整數(shù)税灌、浮點(diǎn)數(shù)均函、字符串和布爾值),完全沒(méi)考慮null菱涤,只把它當(dāng)作object的一種特殊值苞也,32位全部為0。這是typeof null返回object的根本原因粘秆。
為了兼容以前的代碼如迟,后來(lái)就沒(méi)法修改了。這并不是說(shuō)null就屬于對(duì)象攻走,本質(zhì)上null是一個(gè)類(lèi)似于undefined的特殊值殷勘。

你只需要記住,null不是對(duì)象 昔搂!null不是對(duì)象玲销! null不是對(duì)象!就是一個(gè)值null摘符。
其他的類(lèi)型是符合預(yù)期的

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof []
"object"
typeof {}
"object"

判斷某變量是否存在的兩個(gè)技巧

  • 下面演示的是第一種方法
typeof undefined
"undefined"
typeof a
"undefined"

上面的a未聲明,直接使用會(huì)報(bào)錯(cuò)

a
VM412:1 Uncaught ReferenceError: a is not defined
    at <anonymous>:1:1

但是用了typeof就可以啦
可以用來(lái)判斷某個(gè)變量是否聲明了

if (typeof v === "undefined") {
  // ...
}

除了上述的方法贤斜,還有另外一個(gè)利用全局對(duì)象的屬性的方法

if ('a' in window) {
  // 變量 a 聲明過(guò)
} else {
  // 變量 a 未聲明
}
  • 區(qū)分?jǐn)?shù)組還是對(duì)象的技巧
    既然typeof對(duì)數(shù)組(array)和對(duì)象(object)的顯示結(jié)果都是object,那么怎么區(qū)分它們呢逛裤?instanceof運(yùn)算符可以做到瘩绒。
var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市带族,隨后出現(xiàn)的幾起案子锁荔,更是在濱河造成了極大的恐慌,老刑警劉巖蝙砌,帶你破解...
    沈念sama閱讀 207,248評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件阳堕,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡拍霜,警方通過(guò)查閱死者的電腦和手機(jī)嘱丢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)祠饺,“玉大人越驻,你說(shuō)我怎么就攤上這事〉劳担” “怎么了缀旁?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,443評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)勺鸦。 經(jīng)常有香客問(wèn)我并巍,道長(zhǎng),這世上最難降的妖魔是什么换途? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,475評(píng)論 1 279
  • 正文 為了忘掉前任懊渡,我火速辦了婚禮刽射,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘剃执。我一直安慰自己誓禁,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布肾档。 她就那樣靜靜地躺著摹恰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪怒见。 梳的紋絲不亂的頭發(fā)上俗慈,一...
    開(kāi)封第一講書(shū)人閱讀 49,185評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音遣耍,去河邊找鬼闺阱。 笑死,一個(gè)胖子當(dāng)著我的面吹牛舵变,可吹牛的內(nèi)容都是我干的馏颂。 我是一名探鬼主播,決...
    沈念sama閱讀 38,451評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼棋傍,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了难审?” 一聲冷哼從身側(cè)響起瘫拣,我...
    開(kāi)封第一講書(shū)人閱讀 37,112評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎告喊,沒(méi)想到半個(gè)月后麸拄,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡黔姜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2 325
  • 正文 我和宋清朗相戀三年拢切,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片秆吵。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡淮椰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出纳寂,到底是詐尸還是另有隱情主穗,我是刑警寧澤,帶...
    沈念sama閱讀 33,803評(píng)論 4 323
  • 正文 年R本政府宣布毙芜,位于F島的核電站忽媒,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏腋粥。R本人自食惡果不足惜晦雨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3 307
  • 文/蒙蒙 一架曹、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧闹瞧,春花似錦绑雄、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,357評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至漠烧,卻和暖如春杏愤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背已脓。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,590評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工珊楼, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人度液。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2 355
  • 正文 我出身青樓厕宗,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親堕担。 傳聞我的和親對(duì)象是個(gè)殘疾皇子已慢,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容

  • 國(guó)家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿:20170802 前言: 排版 ...
    庭說(shuō)閱讀 10,871評(píng)論 6 13
  • 語(yǔ)句 JavaScript程序的執(zhí)行單位為行(line),也就是一行一行地執(zhí)行霹购。一般情況下佑惠,每一行就是一個(gè)語(yǔ)句。 ...
    米塔塔閱讀 452評(píng)論 1 10
  • 標(biāo)簽: 我的筆記 ---學(xué)習(xí)資料:http://javascript.ruanyifeng.com/ 1. 導(dǎo)論 ...
    暗夜的怒吼閱讀 793評(píng)論 0 1
  • 媽媽出嫁后齐疙,在居委會(huì)的大姨為媽媽找到一處公租房膜楷。公租房在馬山窖,門(mén)前有一條內(nèi)河贞奋,以前河水清澈是附近居民的生活用水赌厅,...
    mimi播報(bào)閱讀 337評(píng)論 2 6
  • 小美猴兒閱讀 136評(píng)論 0 0