Javascript中數(shù)據(jù)類型那些可能會(huì)中招的細(xì)節(jié)
前言
Javascript的數(shù)據(jù)類型對(duì)于大家來(lái)說(shuō)一點(diǎn)都不默認(rèn),主要基本數(shù)據(jù)局類型和引用數(shù)據(jù)類型,都是入門必學(xué)的知識(shí)點(diǎn),而且在日常開(kāi)發(fā)中,頻繁使用。大家是否都掌握其中的一些細(xì)節(jié)呢?下面我們就詳細(xì)探討一下。
一、number類型注意事項(xiàng)
number類型包括:正數(shù)、負(fù)數(shù)、0、小數(shù)、NaN
NaN:意思是not a number 不是一個(gè)有效數(shù)字,但是它是屬于number類型的
(1) = 和 == 和 ===的區(qū)別
- = 是賦值
- == 是判斷左右兩邊的值是否相等(非嚴(yán)格判斷,只要字面相等則相等)
- === 是判斷左右兩邊是否想相等,嚴(yán)格判斷(包含數(shù)據(jù)類型,類型和字面相等才相等)
(2) NaN
- NaN 和 NaN 是不相等的,NaN == NaN返回的是false
- isNaN();檢測(cè)一個(gè)值不是有效數(shù)字的命題是否成立,是有效數(shù)字則返回false,不是有效數(shù)字返回的才是true
isNaN() 如果檢測(cè)的值不是number類型,瀏覽器會(huì)默認(rèn)把值轉(zhuǎn)換為number類型,然后在判斷是否為有效數(shù)字
- 例如:
- console.log(isNaN("123")) // 打印結(jié)果是 true
- 步驟:
- 1、首先把"123"轉(zhuǎn)換成number類型的,使用Number()轉(zhuǎn)換方法
- 2、然后判斷number類型的值是否滿足isNaN的條件
- Number()方法 強(qiáng)制將其他數(shù)據(jù)類型轉(zhuǎn)為number類型(強(qiáng)制數(shù)據(jù)類型轉(zhuǎn)換)
- Number()方法 強(qiáng)制將其他數(shù)據(jù)類型轉(zhuǎn)為number類型,
- 要求:如果是字符串,字符串中一定都需要是數(shù)字才可以轉(zhuǎn)換
- 例如:Number("12")返回的結(jié)果是12,Number("12px")返回的結(jié)果就是NaN
- 非強(qiáng)制數(shù)據(jù)類型轉(zhuǎn)換 parseInt()/ parseFloat()
- parseInt: 從左到右,一個(gè)個(gè)字符查找,把是數(shù)字的轉(zhuǎn)為有效數(shù)字,中途如果遇到了一個(gè)非有效數(shù)字,就不在繼續(xù)查找了
- parseFloat: 和上面一樣,可以多識(shí)別一個(gè)小數(shù)點(diǎn)。
- 例如:parseInt('12px')的值為 12
- parseFloat('12.5px')的值為 12.5
二、數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則
常用的boolean轉(zhuǎn)換符號(hào)
- ! 一個(gè)感嘆號(hào)是取反,首先將值轉(zhuǎn)化為布爾類型的值,然后取反
- !! 兩個(gè)感嘆號(hào)是將其他的數(shù)據(jù)類型轉(zhuǎn)換為 boolean 類型,相當(dāng)于Boolean()
轉(zhuǎn)換規(guī)則:
1、如果只有一個(gè)值,判斷這個(gè)值是真還是假,遵循:只有 0 NaN "" null undefined 這五個(gè)是假,其余的都是真
例如:
- console.log(!3) // false
- console.log(![]) // false
- console.log(!{}) // false
- console.log(!null) // true
- console.log(!0) // true
- console.log(!undefined) //true
- console.log(!"")) //true
注意: 此處 數(shù)字0才為假,如果是字符串的'0',同樣為真
- 例如:
- if(0){
- console.log("為真")
- }else{
- console.log("為假")
- }
- if('0'){
- console.log("為真")
- }else{
- console.log("為假")
- }
- 第一個(gè)輸出 為假,第二個(gè)輸出 為真
2、如果是兩個(gè)值比較是否相等,遵循這個(gè)規(guī)則:
val1 == val2 兩個(gè)值可能不是同一數(shù)據(jù)類型的,如果是 == 比較的話,會(huì)進(jìn)行默認(rèn)的數(shù)據(jù)類型轉(zhuǎn)換
- 1)、對(duì)象 == 對(duì)象,永遠(yuǎn)不相等
- 2)、對(duì)象 == 字符串 現(xiàn)將對(duì)象轉(zhuǎn)換為字符串(調(diào)用toString的方法),然后在進(jìn)行比較
- [] 轉(zhuǎn)換為字符串 ""
- {} 轉(zhuǎn)換為字符串 "[object Object]"
- 所以: [] == "" 為 true
- {} == "" 為 false
- 3)、對(duì)象 == 布爾類型 對(duì)象先轉(zhuǎn)為字符串(toString),然后把字符串轉(zhuǎn)換為數(shù)字(Number),布爾類型也轉(zhuǎn)換為數(shù)字(true是1 false 是0),最后讓兩個(gè)數(shù)字比較
- 例如:
- console.log([] == false) // 為 true
- 解析:首先 []轉(zhuǎn)為字符串"",然后字符串轉(zhuǎn)為數(shù)字類型number,Number("")結(jié)果為0,false
- 轉(zhuǎn)為數(shù)字類型,Number(false) 結(jié)果也為0,所以 [] == false, 就解析成了 0與0的比較,所以相等,
- 返回true
- 4)、對(duì)象 == 數(shù)字 對(duì)象先轉(zhuǎn)為字符串(toString),然后把字符串轉(zhuǎn)換為數(shù)字(Number)
- 5)、數(shù)字 == 布爾 布爾類型轉(zhuǎn)換為數(shù)字
- 6)、數(shù)字 == 字符串,字符串轉(zhuǎn)換為數(shù)字
- 例如:5 == '5' // 為 true
- 7)、字符串 == 布爾 都轉(zhuǎn)換為數(shù)字
- 8)、null === undefined 結(jié)果是true
- console.log(null == undefined) // true
- 9)、null和undefined 和其他任何數(shù)據(jù)類型都不相等
- console.log(null == 0) // false
- console.log(undefined == 0) // false
3、除了== 是比較,===也是比較(絕對(duì)比較),如果數(shù)據(jù)類型不一樣肯定不相等
- 例如:
- console.log(0 == false) // true
- console.log(0 === fasle) // false
- console.log(5 == "5") // true
- console.log(5 === "5") // false
- console.log(null == undefined) // true
- console.log(null === undefined) // false
三、typeof(數(shù)據(jù)類型檢測(cè))
typeof 用來(lái)檢測(cè)數(shù)據(jù)類型的,用法:typeof + 要檢查的值,
返回一個(gè)字符串,包含了數(shù)據(jù)類型的字符( "number","string","boolean","undefined","function","object")
- typeof null 返回的結(jié)果是 "object"
- typeof undefined 返回的結(jié)果是 "undefined"
雖然null 和 undefined 同為number數(shù)據(jù)類型,但是通過(guò)typeof檢測(cè)的值不是number,而且也不相同。
- typeof null 結(jié)果是 "object"
- typeof [] 結(jié)果是 "object"
注意:同為對(duì)象數(shù)據(jù)類型的 數(shù)組、正則、對(duì)象的檢測(cè)類型都是"object"
typeof 局限性:不能具體的檢查object下細(xì)分的類型
- console.log(typeof typeof typeof typeof []) // "string"
- 此處打印的是"string"
tip:因?yàn)閠ypeof 返回的值就是一個(gè)字符串,如果用到了兩個(gè)以及兩個(gè)以上的typeof 返回的都是 "string"類型
四、基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的本質(zhì)區(qū)別
例子:
- 情景一:
- var num1 = 12;
- var num2 = num1;
- num2++;
- console.log(num1);
- 情景二:
- var obj1 = {"name":"張三"};
- var obj2 = obj1;
- obj2.name = "李四";
- console.log(obj1.name);
- 情景一打印的值為 12, 情景二打印的值為 "李四"
分析:基本數(shù)據(jù)類型的值是具體的值,此處的var num2=num1;就是將num1的值 12給num2,此時(shí)num2和num1的值同為12,但是和num1的num2的值互不相關(guān),所以不論num2怎么變,num1都是12,都不會(huì)改變。引用數(shù)據(jù)類型,存儲(chǔ)的是數(shù)據(jù)內(nèi)存的地址,var obj1 = {"name":"張三"} 是開(kāi)辟一個(gè)空間來(lái)存放{"name":"張三"}值,然后將obj1指向存儲(chǔ)值的地址,此時(shí),var obj2 = obj1,就是將obj1指向內(nèi)存空間的地址賦值給obj2,兩個(gè)都指向同一個(gè)內(nèi)存地址,對(duì)應(yīng)的同一個(gè)值。所以后面obj2更改內(nèi)存空間里面name的值后,obj1的值也會(huì)改變。
寫到最后
重新回顧基礎(chǔ)的知識(shí),發(fā)現(xiàn)以前很懵懂的知識(shí)似乎瞬間明白了許多,比如上述的引用數(shù)據(jù)類型指向的是內(nèi)存空間的地址,相賦值操作后,操作賦值后的值會(huì)影響原有的值的結(jié)果。所以才有了日常生活中經(jīng)常使用的深拷貝和淺拷貝,就是為了規(guī)避改變兩個(gè)值互相影響的情況;以前都最顧著自己快速的去上手做項(xiàng)目,學(xué)習(xí)框架的內(nèi)容,卻忽視了這些最為基本的東西。當(dāng)基礎(chǔ)掌握的足夠扎實(shí)的時(shí)候,也就會(huì)看什么都豁然開(kāi)朗了。