JavaScrip簡單數(shù)據(jù)類型隱式轉(zhuǎn)換的實現(xiàn)
JavaScript是一種弱數(shù)據(jù)類型語言 ,在JavaScript中定義變量不需要提前指定變量類型,變量的數(shù)據(jù)類型是在程序運(yùn)行過程中由JavaScript引擎動態(tài)決定,因而可以使用同一個變量來存儲不同類型的數(shù)據(jù)(var、let、const),這也意味著它會自動轉(zhuǎn)換值的數(shù)據(jù)類型,以便數(shù)據(jù)之間更加容易相互比較和操作。除去我們比較熟知的顯式轉(zhuǎn)換,JavaScript中的隱式轉(zhuǎn)換更加需要理解和一定的經(jīng)驗。下面將為大家詳細(xì)的列舉一下JS隱式轉(zhuǎn)換的各種情況。
在JavaScript中,數(shù)據(jù)類型的隱式轉(zhuǎn)換主要有三種情況:
- 轉(zhuǎn)換為number類型
- 轉(zhuǎn)換為boolean類型
- 轉(zhuǎn)換為string類型
JavaScript隱式類型轉(zhuǎn)換通常發(fā)生在以下情況:
- 當(dāng)使用不同類型的值進(jìn)行操作時(數(shù)字和字符串)
- 當(dāng)使用相等或不等運(yùn)算符(== 或 !=)進(jìn)行比較時
- 當(dāng)對一個非布爾類型的值進(jìn)行布爾運(yùn)算時(if語句或邏輯運(yùn)算符)
JavaScrip隱式轉(zhuǎn)換規(guī)則
JavaScript中隱式類型轉(zhuǎn)換的機(jī)制是比較復(fù)雜的,涉及到了數(shù)據(jù)類型、操作符、運(yùn)算順序等多方面的因素。
當(dāng)兩個操作數(shù)具有不同的類型時,系統(tǒng)內(nèi)部根據(jù)一系列規(guī)則來決定將其轉(zhuǎn)換為相同的類型,這些規(guī)則包括:
- 如果一個操作數(shù)是數(shù)字,則將另一個操作數(shù)轉(zhuǎn)換為數(shù)字
- 如果一個操作數(shù)是字符串,則將另一個操作數(shù)轉(zhuǎn)換為字符串
- 如果一個操作數(shù)是布爾值,則將另一個操作數(shù)轉(zhuǎn)換為布爾值
- 如果一個操作數(shù)是對象,則嘗試將另一個操作數(shù)轉(zhuǎn)換為對象,否則將其轉(zhuǎn)換為原始類型
另外:
+
號兩邊只要有一個是字符串,都會把另外一個轉(zhuǎn)成字符串- 除了
+
以外的算術(shù)運(yùn)算符 比如- * /
等都會把數(shù)據(jù)轉(zhuǎn)成數(shù)字類型 - 邏輯非
!
轉(zhuǎn)換為布爾 +
號作為正號解析可以轉(zhuǎn)換成數(shù)字型- 任何數(shù)據(jù)和字符串相加結(jié)果都是字符串
JavaScrip類型轉(zhuǎn)換詳解
轉(zhuǎn)換成Number類型
轉(zhuǎn)為Number類型:++ / --
(自增自減運(yùn)算符) + - * / %
(算術(shù)運(yùn)算符) > < >= <= == != === !==
(關(guān)系運(yùn)算符)。null
轉(zhuǎn)換為數(shù)字為0
, undefined
為NaN
簡單數(shù)據(jù)轉(zhuǎn)換數(shù)字對照:
原始數(shù)據(jù)類型 | 轉(zhuǎn)換之后的值 |
---|---|
空字符 ''或"" | 0 |
非空字符串 | 將字符內(nèi)的數(shù)據(jù)內(nèi)容變?yōu)閿?shù)據(jù),如果還有其他符號中文等轉(zhuǎn)為NaN |
true | 1 |
false | 0 |
null | 0 |
undefined | NaN |
NaN | (不用轉(zhuǎn),typeof NaN 得到"number") |
示例:
// 隱式轉(zhuǎn)換為數(shù)字型的運(yùn)算符 // 算術(shù)運(yùn)算符 - * / 比較運(yùn)算符 > == console.log(8 - '3') // 5 console.log('1999' * '2') // 3998,此處兩個string型全都得轉(zhuǎn)換為number型 console.log('35' - 34) //1 console.log('35' - '34') //1 console.log('40' / '2') //20 console.log('35' % 2) //1 console.log('35' % '2') //1 console.log(5 - undefined) //NaN 因為Undefined轉(zhuǎn)為數(shù)字為NaN console.log(5 - null) //5 console.log(44%('2a')) //NaN,其中,2a進(jìn)行強(qiáng)轉(zhuǎn)后為NaN,NaN參與運(yùn)算返回NaN console.log('5'>'3') //true 此處直接比較的ASCII碼。 console.log(3 > '1') // true console.log(3 == '3') // true console.log(3 == '+3') // true,此處的+號相當(dāng)于是類型轉(zhuǎn)換 console.log(3 == '-3') // false console.log(3 == '*3') // false console.log(3 == '/3') // false console.log(3 == 'a3') // false console.log('a' == 97) // false console.log('a' > 'A') // true 此處比較的是ASCII碼,其中a為97 A為65,因此為true console.log('a' > '') // true console.log('' == 0) //true // + 正號使用的時候,也會把字符串轉(zhuǎn)換為 數(shù)字型 console.log('123') // '123' console.log(+'123') // 123 console.log(typeof +'123') // number console.log(+'0x12' == 18) // true console.log('55' + true) //'55true' // undefined、null、boolean類型轉(zhuǎn)換為數(shù)字 console.log(NaN == NaN) //false,NaN比較特殊,它自己不等于自己 console.log(undefined == 0) //false console.log(undefined == NaN) //false console.log(undefined == null) //true,此處undefined和null值都為空,因此能夠相等 console.log(null == 0) //false 此處沒有進(jìn)行類型轉(zhuǎn)換,因為null是一個值類型,它的數(shù)值就是null,我們在使用==時,會直接把null這個數(shù)值與0進(jìn)行比較,結(jié)果為false console.log(null === 0) // false console.log(null >= 0) //false null要進(jìn)行數(shù)值比較,此處便會嘗試轉(zhuǎn)為number,則為0,結(jié)果為 true console.log(false == null) //false 特殊情況,理論上都應(yīng)該轉(zhuǎn)換為0比較然后相等true,但實際是直接拿值比較,不會先轉(zhuǎn)為為數(shù)字 console.log(true == 1) //true console.log(false == 1) //false console.log(true > false) //true 先轉(zhuǎn)化為1和0數(shù)字進(jìn)行比較 console.log(true + 1) // 2 console.log(true + null) //1,其中true轉(zhuǎn)換為1,null轉(zhuǎn)換為0 console.log(undefined + 1) // NaN console.log('5' - true) //4 console.log('5' - false) //0 //數(shù)組轉(zhuǎn)換為數(shù)字 console.log([9] == 9) //true console.log([9,'a'] == 9) //false //特殊情況 console.log({} == {}) // false,對象類型比的是地址,不同對象地址不同 console.log([]==[]) // false,理由同上
轉(zhuǎn)換為String類型
簡單數(shù)據(jù)轉(zhuǎn)換字符串對照:
原始數(shù)據(jù)類型 | 轉(zhuǎn)換之后的值 |
---|---|
數(shù)字類型 | 數(shù)字類型的字符表示 |
null | ‘null’ |
undefined | ‘undefined’ |
布爾類型 | true變’true’,false變’false’ |
此處注意點(diǎn)為-0
轉(zhuǎn)換為string類型為'0'
["a","b"]
轉(zhuǎn)換string類型為"a,b"
[]
轉(zhuǎn)換為string類型為""
轉(zhuǎn)換為Boolean類型
數(shù)據(jù)邏輯判斷和邏輯運(yùn)算之中會隱式轉(zhuǎn)換為boolean類型
轉(zhuǎn)換為布爾型:空字符、0、-0、undefined、null、false、NaN
轉(zhuǎn)換為布爾值后為false,其余為true
+
號兩邊只要有一個是字符串,都會把另外一個轉(zhuǎn)成字符串
連續(xù)使用兩個非操作符(!!)可以將一個數(shù)強(qiáng)制轉(zhuǎn)換為boolean類型,這在開發(fā)之中比較實用。
簡單數(shù)據(jù)轉(zhuǎn)換布爾型對照:
數(shù)據(jù)類型 | 轉(zhuǎn)換為true的值 | 轉(zhuǎn)換為false的值 |
---|---|---|
String | 任何非空字符串 | 空字符串(""或’') |
Number | 任何非零數(shù)字 | 0和NaN |
Object | 任何對象 | null |
Undefined | 不適用 | undefined |
示例:
//隱式轉(zhuǎn)換為布爾型的運(yùn)算符 !邏輯非 console.log(!true) // false console.log(!0) // true console.log(!'') // true console.log(!null) // true console.log(!undefined) // true console.log(!NaN) // true console.log(!false) // true console.log(!'hello') // false
JavaScrip特殊操作符對類型轉(zhuǎn)換的影響
!邏輯非運(yùn)算符
!
會將后面的數(shù)據(jù)先轉(zhuǎn)成布爾值,然后取反
var a; //a = undefined var r = !!a; console.log(r) //false !!{} // true !!undefined // false !!null // false !!NaN //fales
== 相等運(yùn)算符
比較操作符會為兩個不同類型的操作數(shù)轉(zhuǎn)換類型,然后進(jìn)行嚴(yán)格比較。當(dāng)兩個操作數(shù)都是對象時,JavaScript會比較其內(nèi)部引用,當(dāng)且僅當(dāng)他們的引用指向內(nèi)存中的相同對象時才相等,即他們在棧內(nèi)存中的引用地址相同。
1.類型相同
如果比較的是兩個對象,則比較兩個對象的指針是否指向同一個對象
let a = {} let b = {} a==b //false let a = {} let b = a; a==b //true
2.類型不同
如果兩邊類型不同,則兩邊都嘗試轉(zhuǎn)成number類型。對于引用類型,先調(diào)用valueOf()
,如果能轉(zhuǎn)成數(shù)字,則進(jìn)行比較。不能轉(zhuǎn)成數(shù)字就調(diào)用toString()
方法轉(zhuǎn)成字符串。
tips:因為
null
是一個值類型,它的數(shù)值就是null
,我們在使用==時,會直接把null
這個數(shù)值與數(shù)值進(jìn)行比較,而不是轉(zhuǎn)換為0
console.log(3 == '3') // true console.log(3 == '+3') // true,此處的+號相當(dāng)于是類型轉(zhuǎn)換 console.log(3 == '-3') // false console.log(3 == 'a3') // false console.log(+'0x12' == 18) // true console.log('' == 0) //true console.log(null == 0) //false 此處沒有進(jìn)行類型轉(zhuǎn)換,因為null是一個值類型,它的數(shù)值就是null,我們在使用==時,會直接把null這個數(shù)值與0進(jìn)行比較,結(jié)果為false console.log(NaN == NaN) //false,NaN比較特殊,它自己不等于自己 console.log(undefined == 0) //false console.log(undefined == NaN) //false console.log(undefined == null) //true,此處undefined和null值都為空,因此能夠相等
面試題
//問題1: console.log(new String('abc') == true)//flase //step1:右側(cè)轉(zhuǎn)成數(shù)字1,變成: new String('abc')==1 //step2 new String('abc').valueOf()不是數(shù)字也不是字符串,再調(diào)用toString() 'abc' == 1 //step3:字符串轉(zhuǎn)數(shù)字 NaN == 1 //false,NaN和任何類型比較都為false //問題2: console.log({}==true)//false //step1:右側(cè)轉(zhuǎn)成數(shù)字 {} == 1 //step2 {}.valueOf()不是數(shù)字也不是字符串,再調(diào)用toString() '[object Object]' ==1 //step3:字符串轉(zhuǎn)數(shù)字 NaN == 1 //false,NaN和任何類型比較都為false //問題3: console.log([]==![])//true //step1:!優(yōu)先級比==高,先轉(zhuǎn)右邊,[]是對象類型,轉(zhuǎn)成布爾值為true,!true就是false []==false //step2:右側(cè)轉(zhuǎn)成數(shù)字為0 []==0 //step3:左側(cè)是一個對象,valueOf()轉(zhuǎn)出來不是字符也不是字符串,調(diào)用toString(),得到空字符串 '' == 0 //step4:字符串轉(zhuǎn)成數(shù)字 0 == 0 //true
比較運(yùn)算符
字符串類型比較大小時,不進(jìn)行類型轉(zhuǎn)換,而是逐位比較ASCII碼,第一位不同則返回結(jié)果,否則繼續(xù)比較第二位,直到某一位不同為止。
字符串與數(shù)字或者boolean與數(shù)字比較時,會進(jìn)行隱式數(shù)據(jù)類型轉(zhuǎn)換
示例
console.log('5555555' < '6') //true,首先比較第一個字符串的第一個字符,如果不同直接返回結(jié)果 console.log('5'>'3') //true,此處直接比較的ASCII碼。 console.log(3 > '1') // true console.log('a' > 'A') // true,此處比較的是ASCII碼,其中a為97 A為65,因此為true console.log('a' > '') // true console.log(null >= 0) //false,null要進(jìn)行數(shù)值比較,此處便會嘗試轉(zhuǎn)為number,則為0,結(jié)果為 true
+ 算數(shù)運(yùn)算符
當(dāng)+
號作為一元操作符時,它就會將這個數(shù)轉(zhuǎn)換為數(shù)字類型
當(dāng)+
號作為二元操作符時
console.log(3 == '+3') // true,此處的+號相當(dāng)于是類型轉(zhuǎn)換 console.log('55' + true) //'55true' console.log(true + 1) // 2 console.log(true + null) //1,其中true轉(zhuǎn)換為1,null轉(zhuǎn)換為0 console.log(undefined + 1) // NaN
+
號兩邊只要有一個是字符串,都會把另外一個轉(zhuǎn)成字符串,此時+
號為連接符
總結(jié)
到此這篇關(guān)于JavaScrip簡單數(shù)據(jù)類型隱式轉(zhuǎn)換的實現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScrip 數(shù)據(jù)類型隱式轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序 子級頁面返回父級并把子級參數(shù)帶回父級實現(xiàn)方法
這篇文章主要介紹了微信小程序 子級頁面返回父級并把子級參數(shù)帶回父級實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
這篇文章主要介紹了Bootstrap導(dǎo)航欄各元素操作方法,針對表單、按鈕、文本進(jìn)行操作,感興趣的小伙伴們可以參考一下2015-12-12CodeMirror實現(xiàn)代碼對比功能(插件react vue)
這篇文章主要介紹了CodeMirror實現(xiàn)代碼對比功能,用到的插件有vue或者react都需要這一步且同樣的下載方式,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05實例解析js中try、catch、finally的執(zhí)行規(guī)則
本文主要通過實例解析來更好的了解js中try、catch、finally的執(zhí)行規(guī)則,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02