js面試題大坑——隱式類型轉(zhuǎn)換

隱式轉(zhuǎn)換介紹
  • 在js中弹澎,當(dāng)運(yùn)算符在運(yùn)算時(shí)谴忧,如果兩邊數(shù)據(jù)不統(tǒng)一很泊,CPU就無法計(jì)算,這時(shí)我們編譯器會(huì)自動(dòng)將運(yùn)算符兩邊的數(shù)據(jù)做一個(gè)數(shù)據(jù)類型轉(zhuǎn)換沾谓,轉(zhuǎn)成一樣的數(shù)據(jù)類型再計(jì)算委造,這種無需程序員手動(dòng)轉(zhuǎn)換,而由編譯器自動(dòng)轉(zhuǎn)換的方式就稱為隱式轉(zhuǎn)換均驶。
  • 例如1 > "0"這行代碼在js中并不會(huì)報(bào)錯(cuò)昏兆,編譯器在運(yùn)算符時(shí)會(huì)先把右邊的"0"轉(zhuǎn)成數(shù)字0`然后在比較大小
隱式轉(zhuǎn)換規(guī)則
  • 轉(zhuǎn)成string類型: +(字符串連接符) 2..轉(zhuǎn)成number類型:++/--(自增自減運(yùn)算符) + - * / %(算術(shù)運(yùn)算符) > < >= <= == != === !=== (關(guān)系運(yùn)算符)
  • 轉(zhuǎn)成boolean類型:!(邏輯非運(yùn)算符)
坑一:字符串連接符與算術(shù)運(yùn)算符隱式轉(zhuǎn)換規(guī)則混淆

常見面試題如下

console.log ( 1 + "true" );// ‘1true‘’
console.log ( 1 + true );//2
console.log ( 1 + undefined );//   NaN
console.log ( 1 + null );//1

原理分析:

  • 此類問題的坑: 將字符串連接符(+ : 只要+號(hào)兩邊有一邊是字符串)與算術(shù)運(yùn)算符(+:兩邊都是數(shù)字)的隱式轉(zhuǎn)換搞混淆
  • 字符串連接符+:會(huì)把其他數(shù)據(jù)類型調(diào)用String()方法轉(zhuǎn)成字符串然后拼接
  • 算術(shù)運(yùn)算符+ :會(huì)把其他數(shù)據(jù)類型調(diào)用Number()方法轉(zhuǎn)成數(shù)字然后做加法計(jì)算
  • +是字符串連接符: String(1) + 'true' = '1true'
    console.log ( 1 + "true" );//1true
  • +是算術(shù)運(yùn)算符 : 1 + Number(true) = 1 + 1 = 2
    console.log ( 1 + true );//2
  • +是算術(shù)運(yùn)算符 : 1 + Number(undefined) = 1 + NaN = NaN
    console.log ( 1 + undefined );// NaN
  • +是算術(shù)運(yùn)算符 : 1 + Number(null) = 1 + 0 = 1
    console.log ( 1 + null );//1
坑二:關(guān)系運(yùn)算符:會(huì)把其他數(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

原理分析

  • 當(dāng)關(guān)系運(yùn)算符兩邊有一邊是字符串的時(shí)候,會(huì)將其他數(shù)據(jù)類型使用>Number()轉(zhuǎn)換妇穴,然后比較關(guān)系
    console.log ( "2" > 10 );//false Number('2') > 10 = 2 > 10 = >false

  • 當(dāng)關(guān)系運(yùn)算符兩邊都是字符串的時(shí)候爬虱,此時(shí)同時(shí)轉(zhuǎn)成number隶债,然后比較關(guān)系
    1.重點(diǎn):此時(shí)并不是按照Number()的形式轉(zhuǎn)成數(shù)字,而是按照字符串對(duì)應(yīng)的unicode編碼來轉(zhuǎn)成數(shù)字饮潦。
    2.使用這個(gè)方法可以查看字符的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)返回第一個(gè)字符的編碼继蜡,如果想要查詢第二個(gè)字符可以傳參下標(biāo))

  • 多個(gè)字符從左往右依次比較
    console.log ( "abc" > "b" );//false 先比較'a' 和 'b'回俐, 'a' 與 'b'不等,則直接>得出結(jié)果
    console.log ( "abc" > "aad" );//true 先比較'a'和'a'稀并,兩者相等仅颇,繼續(xù)比較

  • 第二個(gè)字符 'b' 與 'a' ,得出結(jié)果
    console.log ( "a".charCodeAt () );//數(shù)字97
    console.log ( "b".charCodeAt () );//數(shù)字98

  • 特殊情況(無視規(guī)則):如果數(shù)據(jù)類型是undefined與null,碘举,得出固定的>結(jié)果
    console.log ( undefined == undefined );//true
    console.log ( undefined == null );//true
    console.log ( null == null );//true

  • 特殊情況(無視規(guī)則):NaN與任何數(shù)據(jù)比較都是NaN
    console.log ( NaN == NaN );//false

坑三:復(fù)雜數(shù)據(jù)類型在隱式轉(zhuǎn)換時(shí)會(huì)先轉(zhuǎn)成String忘瓦,然后再轉(zhuǎn)成Number運(yùn)算

如何完善a,使其正確打印1

var = ???
if (a == 1 && a == 2 && a == 3)
      console.log ( "1" );
 }

原理分析:

  • 復(fù)雜數(shù)據(jù)類型轉(zhuǎn)number順序如下:
    1.先使用valueOf()方法獲取其原始值引颈,如果原始值不是number類型耕皮,則使用 toString()方法轉(zhuǎn)成string
    2.再將string轉(zhuǎn)成number運(yùn)算


console.log ( [ 1,2] == '1,2' );//true 先將左邊數(shù)組轉(zhuǎn)成string,然后右邊也是string則轉(zhuǎn)成unicode編碼運(yùn)算
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]

  • 分析:
    邏輯與運(yùn)算一假則假蝙场,要想if分支語(yǔ)句小括號(hào)條件成立凌停,則必須要讓a的值同時(shí)等于1 且 等于 2 且等于3。
    乍看之下售滤,好像根本不可能實(shí)現(xiàn)罚拟,但是復(fù)雜數(shù)據(jù)類型會(huì)先調(diào)用valueOf()方法,然后轉(zhuǎn)成number運(yùn)算。
    而對(duì)象的valueOf()方法是可以重寫的完箩。

    var a = {
    i : 0,//聲明一個(gè)屬性i
    valueOf:function ( ) {
    return ++a.i;//每調(diào)用一次赐俗,讓對(duì)象a的i屬性自增一次并且返回
    }
    }
    if (a == 1 && a == 2 && a == 3){//每一次運(yùn)算時(shí)都會(huì)調(diào)用一次a的valueOf()方法

   console.log ( "1" );

}

坑四:邏輯非隱式轉(zhuǎn)換與關(guān)系運(yùn)算符隱式轉(zhuǎn)換搞混淆

前方高能,請(qǐng)注意~

空數(shù)組的toString()方法會(huì)得到空字符串弊知,而空對(duì)象的toString()方法會(huì)得到字符串[object Object] (注意第一個(gè)小寫o阻逮,第二個(gè)大寫O喲)

常見面試題

//大坑
console.log ( [] == 0 );//true
console.log ( ! [] == 0 );//true

//神坑
console.log ( [] == ! [] );//true
console.log ( [] == [] );//false

//史詩(shī)級(jí)坑
console.log({} == !{});//false
console.log({} == {});//false

原理分析

1.關(guān)系運(yùn)算符:將其他數(shù)據(jù)類型轉(zhuǎn)成數(shù)字
2.邏輯非:將其他數(shù)據(jù)類型使用Boolean()轉(zhuǎn)成布爾類型
* 以下八種情況轉(zhuǎn)換為布爾類型會(huì)得到false
* 0 、-0秩彤、NaN夺鲜、undefined、null呐舔、''(空字符串)、false慷蠕、document.all()
* 除以上八種情況之外所有數(shù)據(jù)都會(huì)得到true

原理
(1)[].valueOf().toString() 得到空字符串
(2)Number('') == 0 成立
console.log ( [] == 0 );//true

原理 :本質(zhì)是 ![] 邏輯非表達(dá)式結(jié)果 與 0 比較關(guān)系
(1)邏輯非優(yōu)先級(jí)高于關(guān)系運(yùn)算符 ![] = false (空數(shù)組轉(zhuǎn)布爾得到true珊拼,然后取反得到false)
(2)false == 0 成立
console.log ( ! [] == 0 );//true

原理 :本質(zhì)其實(shí)是 空對(duì)象{}!{} 這個(gè)邏輯非表達(dá)式結(jié)果做比較
(1) {}.valueOf().toString() 得到字符串 '[object Object]'
(2) !{} = false
(3) Number('[object Object]') == Number(false)
console.log({} == !{});//false
//引用類型數(shù)據(jù)存在堆中,棧中存儲(chǔ)的是地址流炕,所以他們的結(jié)果是false
console.log({} == {});//false

原理:本質(zhì)是 空數(shù)組[]![] 這個(gè)邏輯非表達(dá)式結(jié)果做比較
(1) [].valueOf().toString() 得到空字符串 ''
(2) ![] = false
(3) Number('') == Number(false) 成立 都是0
console.log ( [] == ! [] );//true
//引用類型數(shù)據(jù)存在堆中澎现,棧中存儲(chǔ)的是地址仅胞,所以他們的結(jié)果是false
console.log ( [] == [] );//false
console.log ( {}.valueOf ().toString () )//[object Object]
console.log ( [].valueOf ().toString () );//'' 空字符串



?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市剑辫,隨后出現(xiàn)的幾起案子干旧,更是在濱河造成了極大的恐慌,老刑警劉巖妹蔽,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件椎眯,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡胳岂,警方通過查閱死者的電腦和手機(jī)编整,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來乳丰,“玉大人掌测,你說我怎么就攤上這事〔埃” “怎么了汞斧?”我有些...
    開封第一講書人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)什燕。 經(jīng)常有香客問我粘勒,道長(zhǎng),這世上最難降的妖魔是什么秋冰? 我笑而不...
    開封第一講書人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任仲义,我火速辦了婚禮,結(jié)果婚禮上剑勾,老公的妹妹穿的比我還像新娘埃撵。我一直安慰自己,他們只是感情好虽另,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開白布暂刘。 她就那樣靜靜地躺著,像睡著了一般捂刺。 火紅的嫁衣襯著肌膚如雪谣拣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評(píng)論 1 285
  • 那天族展,我揣著相機(jī)與錄音森缠,去河邊找鬼。 笑死仪缸,一個(gè)胖子當(dāng)著我的面吹牛贵涵,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼宾茂,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼瓷马!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起跨晴,我...
    開封第一講書人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤欧聘,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后端盆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體怀骤,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年爱谁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了晒喷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡访敌,死狀恐怖凉敲,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情寺旺,我是刑警寧澤爷抓,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站阻塑,受9級(jí)特大地震影響蓝撇,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜陈莽,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一渤昌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧走搁,春花似錦独柑、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至曲稼,卻和暖如春索绪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背贫悄。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工瑞驱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人窄坦。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓钱烟,卻偏偏與公主長(zhǎng)得像晰筛,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子拴袭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

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

  • 強(qiáng)制轉(zhuǎn)換 強(qiáng)制轉(zhuǎn)換主要指使用Number、String和Boolean三個(gè)構(gòu)造函數(shù)曙博,手動(dòng)將各種類型的值拥刻,轉(zhuǎn)換成數(shù)字...
    燈火闌珊Zone閱讀 390評(píng)論 0 3
  • 運(yùn)算符是處理數(shù)據(jù)的基本方法,用來從現(xiàn)有的值得到新的值父泳。JavaScript 提供了多種運(yùn)算符般哼,本章逐一介紹這些運(yùn)算...
    徵羽kid閱讀 659評(píng)論 0 0
  • 01javascript語(yǔ)法規(guī)范 <!DOCTYPE html> javascript語(yǔ)法...
    ouyangqinbin閱讀 1,300評(píng)論 0 0
  • 1、js數(shù)據(jù)類型 js中有7種數(shù)據(jù)類型惠窄,可以分為兩類:原始類型蒸眠、對(duì)象類型: 基礎(chǔ)類型(原始值): Undefine...
    好奇男孩閱讀 9,792評(píng)論 1 16
  • 使用Number函數(shù),可以將任意類型的值轉(zhuǎn)化成數(shù)值杆融。 下面分成兩種情況討論楞卡,一種是參數(shù)是原始類型的值,另一種是參數(shù)...
    青春前行閱讀 489評(píng)論 0 0