JS面試題大坑之隱式類型轉(zhuǎn)換實例代碼
1.1-隱式轉(zhuǎn)換介紹
在js中,當(dāng)運算符在運算時,如果兩邊數(shù)據(jù)不統(tǒng)一,CPU就無法計算,這時我們編譯器會自動將運算符兩邊的數(shù)據(jù)做一個數(shù)據(jù)類型轉(zhuǎn)換,轉(zhuǎn)成一樣的數(shù)據(jù)類型再計算
這種無需程序員手動轉(zhuǎn)換,而由編譯器自動轉(zhuǎn)換的方式就稱為隱式轉(zhuǎn)換
例如1 > "0"這行代碼在js中并不會報錯,編譯器在運算符時會先把右邊的"0"轉(zhuǎn)成數(shù)字0`然后在比較大小
1.2-隱式轉(zhuǎn)換規(guī)則
轉(zhuǎn)成string類型: +(字符串連接符) 2..轉(zhuǎn)成number類型:++/--(自增自減運算符) + - * / %(算術(shù)運算符) > < >= <= == != === !=== (關(guān)系運算符)
轉(zhuǎn)成boolean類型:!(邏輯非運算符)
1.3-坑一:字符串連接符與算術(shù)運算符隱式轉(zhuǎn)換規(guī)則混淆
• 常見面試題如下
console.log ( 1 + "true" );// ‘1true‘' console.log ( 1 + true );//2 console.log ( 1 + undefined );// NaN console.log ( 1 + null );//1
• 原理分析
/*此類問題的坑: 將字符串連接符(+ : 只要+號兩邊有一邊是字符串)與算術(shù)運算符(+:兩邊都是數(shù)字)的隱式轉(zhuǎn)換搞混淆 1.字符串連接符+:會把其他數(shù)據(jù)類型調(diào)用String()方法轉(zhuǎn)成字符串然后拼接 2.算術(shù)運算符+ :會把其他數(shù)據(jù)類型調(diào)用Number()方法轉(zhuǎn)成數(shù)字然后做加法計算 */ //+是字符串連接符: String(1) + 'true' = '1true' console.log ( 1 + "true" );//1true //+是算術(shù)運算符 : 1 + Number(true) = 1 + 1 = 2 console.log ( 1 + true );//2 // +是算術(shù)運算符 : 1 + Number(undefined) = 1 + NaN = NaN console.log ( 1 + undefined );// NaN // +是算術(shù)運算符 : 1 + Number(null) = 1 + 0 = 1 console.log ( 1 + null );//1
1.4-坑二:關(guān)系運算符:會把其他數(shù)據(jù)類型轉(zhuǎn)換成number之后再比較關(guān)系
常見面試題如下
console.log ( "2" > 10 );//false console.log ( "2" > "10" );//true console.log ( "abc" > "b" );//false console.log ( "abc" > "aad" );//true console.log ( NaN == NaN );//false console.log ( undefined == null );//true
• 原理分析
//2.1 : 當(dāng)關(guān)系運算符兩邊有一邊是字符串的時候,會將其他數(shù)據(jù)類型使用Number()轉(zhuǎn)換,然后比較關(guān)系
console.log ( "2" > 10 );//false Number('2') > 10 = 2 > 10 = false
/*2.2: 當(dāng)關(guān)系運算符兩邊都是字符串的時候,此時同時轉(zhuǎn)成number然后比較關(guān)系
重點:此時并不是按照Number()的形式轉(zhuǎn)成數(shù)字,而是按照字符串對應(yīng)的unicode編碼來轉(zhuǎn)成數(shù)字
使用這個方法可以查看字符的unicode編碼: 字符串.charCodeAt(字符下標(biāo),默認(rèn)為0)
*/
console.log ( "2" > "10" );//true '2'.charCodeAt() > '10'.charCodeAt() = 50 > 49 = true
console.log ( "2".charCodeAt () );//數(shù)字50
console.log ( "10".charCodeAt () );//數(shù)字49(默認(rèn)返回第一個字符的編碼,如果想要查詢第二個字符可以傳參下標(biāo))
//多個字符從左往右依次比較
console.log ( "abc" > "b" );//false 先比較'a' 和 'b', 'a' 與 'b'不等,則直接得出結(jié)果
console.log ( "abc" > "aad" );//true 先比較'a'和'a',兩者相等,繼續(xù)比較第二個字符 'b' 與 'a' ,得出結(jié)果
console.log ( "a".charCodeAt () );//數(shù)字97
console.log ( "b".charCodeAt () );//數(shù)字98
//2.3 特殊情況(無視規(guī)則):如果數(shù)據(jù)類型是undefined與null,,得出固定的結(jié)果
console.log ( undefined == undefined );//true
console.log ( undefined == null );//true
console.log ( null == null );//true
//2.4 特殊情況(無視規(guī)則):NaN與任何數(shù)據(jù)比較都是NaN
console.log ( NaN == NaN );//false
1.5-坑三:復(fù)雜數(shù)據(jù)類型在隱式轉(zhuǎn)換時會先轉(zhuǎn)成String,然后再轉(zhuǎn)成Number運算
• 原理分析


/*復(fù)雜數(shù)據(jù)類型轉(zhuǎn)number順序如下
1.先使用valueOf()方法獲取其原始值,如果原始值不是number類型,則使用 toString()方法轉(zhuǎn)成string
2.再將string轉(zhuǎn)成number運算
*/
console.log ( [ 1,2] == '1,2' );//true 先將左邊數(shù)組轉(zhuǎn)成string,然后右邊也是string則轉(zhuǎn)成unicode編碼運算
console.log ( [ 1, 2 ].valueOf () );// [1,2]
console.log ( [ 1, 2 ].toString () );// '1,2'
var a = {};
console.log ( a == "[object Object]" );//true
console.log ( a.valueOf ().toString() );//[object Object]
/*分析:邏輯與運算一假則假,要想if分支語句小括號條件成立,則必須要讓a的值同時等于1 且 等于 2 且等于3
乍看之下,好像根本不可能實現(xiàn),但是復(fù)雜數(shù)據(jù)類型會先調(diào)用valueOf()方法,然后轉(zhuǎn)成number運算
而對象的valueOf()方法是可以重寫的
*/
var a = {
i : 0,//聲明一個屬性i
valueOf:function ( ) {
return ++a.i;//每調(diào)用一次,讓對象a的i屬性自增一次并且返回
}
}
if (a == 1 && a == 2 && a == 3){//每一次運算時都會調(diào)用一次a的valueOf()方法
console.log ( "1" );
}
1.6-坑四:邏輯非隱式轉(zhuǎn)換與關(guān)系運算符隱式轉(zhuǎn)換搞混淆
前方高能,請注意~
空數(shù)組的toString()方法會得到空字符串,而空對象的toString()方法會得到字符串`[object Object]` (注意第一個小寫o,第二個大寫O喲)
常見面試題
//大坑
console.log ( [] == 0 );//true
console.log ( ! [] == 0 );//true
//神坑
console.log ( [] == ! [] );//true
console.log ( [] == [] );//false
//史詩級坑
console.log({} == !{});//false
console.log({} == {});//false
• 原理分析
/*1.關(guān)系運算符:將其他數(shù)據(jù)類型轉(zhuǎn)成數(shù)字
2.邏輯非:將其他數(shù)據(jù)類型使用Boolean()轉(zhuǎn)成布爾類型
* 以下八種情況轉(zhuǎn)換為布爾類型會得到false
* 0 、-0、NaN、undefined、null、''(空字符串)、false、document.all()
* 除以上八種情況之外所有數(shù)據(jù)都會得到true
*/
/*原理
(1)[].valueOf().toString() 得到空字符串
(2)Number('') == 0 成立
*/
console.log ( [] == 0 );//true
/* 原理 :本質(zhì)是 `![]` 邏輯非表達(dá)式結(jié)果 與 0 比較關(guān)系
(1)邏輯非優(yōu)先級高于關(guān)系運算符 ![] = false (空數(shù)組轉(zhuǎn)布爾得到true,然后取反得到false)
(2)false == 0 成立
*/
console.log ( ! [] == 0 );//true
/*原理 :本質(zhì)其實是 `空對象{}` 與 `!{}` 這個邏輯非表達(dá)式結(jié)果做比較
(1) {}.valueOf().toString() 得到字符串 '[object Object]'
(2) !{} = false
(3) Number('[object Object]') == Number(false)
*/
console.log({} == !{});//false
//引用類型數(shù)據(jù)存在堆中,棧中存儲的是地址,所以他們的結(jié)果是false
console.log({} == {});//false
/*原理:本質(zhì)是 `空數(shù)組[]` 與 `![]` 這個邏輯非表達(dá)式結(jié)果做比較
(1) [].valueOf().toString() 得到空字符串 ''
(2) ![] = false
(3) Number('') == Number(false) 成立 都是0
*/
console.log ( [] == ! [] );//true
//引用類型數(shù)據(jù)存在堆中,棧中存儲的是地址,所以他們的結(jié)果是false
console.log ( [] == [] );//false
console.log ( {}.valueOf ().toString () )//[object Object]
console.log ( [].valueOf ().toString () );//'' 空字符串



總結(jié)
以上所述是小編給大家介紹的JS面試題大坑之隱式類型轉(zhuǎn)換實例代碼,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
- 淺析JavaScript中的隱式類型轉(zhuǎn)換
- JavaScript隱式類型轉(zhuǎn)換
- 總結(jié)Javascript中的隱式類型轉(zhuǎn)換
- 對存在JavaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)
- JavaScript中運算符規(guī)則和隱式類型轉(zhuǎn)換示例詳解
- 有趣的JavaScript隱式類型轉(zhuǎn)換操作實例分析
- JavaScript隱式類型轉(zhuǎn)換代碼實例
- JavaScript隱式類型轉(zhuǎn)換例子總結(jié)
- 淺析JavaScript中的隱式類型轉(zhuǎn)換
- JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解
- JS不同運算符下隱式類型轉(zhuǎn)換的實現(xiàn)示例
相關(guān)文章
JavaScript事件機(jī)制的剖析與優(yōu)化詳解
在現(xiàn)代前端開發(fā)中,JavaScript事件處理是一個至關(guān)重要的部分,它能夠使網(wǎng)頁與用戶交互,實現(xiàn)豐富的交互體驗,然而,對JavaScript事件機(jī)制的深入理解是開發(fā)者成為優(yōu)秀前端工程師的關(guān)鍵所在,本文將全面剖析JavaScript事件機(jī)制,需要的朋友可以參考下2023-12-12
Javascript數(shù)組方法reduce的妙用之處分享
這篇文章主要給大家介紹了關(guān)于Javascript數(shù)組方法reduce的妙用之處,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果
本篇文章由腳本之家小編給大家分享的基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果,需要的朋友一起學(xué)習(xí)吧2015-09-09
淺談JavaScript中小數(shù)和大整數(shù)的精度丟失
下面小編就為大家?guī)硪黄獪\談JavaScript中小數(shù)和大整數(shù)的精度丟失。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05

