JS中判断数组、对象等类型的正确姿势与常见误区
鍝庢垜璇村悇浣嶅垰鍏ラ棬鐨勫墠绔悓鏂帮紝浣犳槸涓嶆槸缁忓父琚繖鏍风殑浠g爜鎼炴嚨锛熸槑鏄庢兂鍒ゆ柇鏄笉鏄暟缁勶紝缁撴灉鐢ㄤ簡涓猼ypeof鍙戠幇杩斿洖鐨勫眳鐒舵槸"object"锛佽繖鎰熻灏卞儚鎯冲枬鍐板彲涔愬嵈鎷垮埌鐡堕叡娌光€斺€斿畬鍏ㄤ笉鏄偅涓懗鍎垮晩锛佷粖澶╁挶浠氨鏉ユ墥涓€鎵掕繖閲屽ご鐨勯棬閬撱€?/p>
馃暤锔忊檪锔?绗竴鍧戯細typeof鐨勮糠鎯戣涓哄ぇ璧?/h2>
浣犱互涓簍ypeof鑳藉垽鏂墍鏈夌被鍨嬶紵璇曡瘯杩欏嚑涓獨鎿嶄綔锛?/p>
javascript澶嶅埗typeof null // 杩斿洖'object'锛堟儕涓嶆儕鍠滐紵锛?/span> typeof [] // 杩樻槸'object'锛堟剰涓嶆剰澶栵紵锛?/span> typeof new Date() // 渚濈劧鏄?object'锛堝氨闂綘鏈嶄笉鏈嶏級
鈥?strong>鈥嬮噸鐐规潵浜嗏€?/strong>鈥嬶細杩欒揣妫€娴嬪熀鏈被鍨嬭繕琛岋紝閬囧埌寮曠敤绫诲瀷鐩存帴韬哄钩銆傚氨鍍忕敤娓旂綉鎹為噾楸硷紝鎹炴槸鎹炲埌浜嗭紝浣嗗垎涓嶆竻鍝佺鍟婏紒
馃う鈾傦笍 绗簩鍧戯細instanceof鐨勮繛鐜櫡闃?/h2>
寰堝鏁欑▼鏁欑敤instanceof鍒ゆ柇鏁扮粍锛?/p>
javascript澶嶅埗if (arr instanceof Array) { // 澶勭悊鏁扮粍 }
浣嗛亣鍒拌法iframe閫氫俊鏃讹紝杩欎釜鍒ゆ柇鐩存帴姝囪彍銆傚氨鍍忔嬁鑷閽ュ寵寮€閭诲眳瀹堕棬锛岃櫧鐒堕兘鏄槻鐩楅棬锛屼絾閿佽姱缁撴瀯涓嶅悓鍟婏紒
鈥?strong>鈥嬭娉渚嬧€?/strong>鈥嬶細鏌愬紑鍙戣€呯敤instanceof妫€娴嬬涓夋柟SDK杩斿洖鐨勬暟鎹紝缁撴灉鍦ㄥ井淇″唴缃祻瑙堝櫒閲岀炕杞︼紝鏈€鍚庡彂鐜版槸iframe鐜瀵艰嚧鐨勫垽鏂け鏁堛€?/p>
馃鈾傦笍 姝g‘濮垮娍涓€锛欰rray.isArray()
杩欐墠鏄娴嬫暟缁勭殑姝g墝鍐涳細
javascript澶嶅埗Array.isArray([]) // true Array.isArray({}) // false
浣嗚娉ㄦ剰杩欐柟娉?011骞存墠鍔犲叆ES5瑙勮寖锛岃€佸彜钁f祻瑙堝櫒鍙兘涓嶆敮鎸併€備笉杩囩幇鍦ㄩ兘2023骞翠簡锛岄櫎闈炰綘瑕佸吋瀹笽E6杩欑娲诲寲鐭?..
馃攳 姝g‘濮垮娍浜岋細Object.prototype.toString
杩欐嫑鍫О绫诲瀷妫€娴嬬晫鐨勬樉寰暅锛?/p>
javascript澶嶅埗Object.prototype.toString.call([]) // "[object Array]" Object.prototype.toString.call({}) // "[object Object]" Object.prototype.toString.call(null) // "[object Null]"
鈥?strong>鈥嬩负浠€涔堥潪瑕?call()锛熲€?/strong>鈥?鍥犱负鏅€氬璞℃湁鑷繁鐨則oString鏂规硶锛屽氨鍍忓効瀛愮户鎵夸簡鐖朵翰鐨勫姘忎絾鍙兘鏈変笉鍚岀殑鍚嶅瓧銆?/p>
馃搳 鏂规硶瀵规瘮琛紙寤鸿鎴浘淇濆瓨锛?/h2>
妫€娴嬫柟寮?/th> | 閫傜敤鍦烘櫙 | 鍏稿瀷婕忔礊 |
---|---|---|
typeof | 鍩烘湰绫诲瀷蹇€熺瓫鏌?/td> | 鍒嗕笉娓卬ull鍜屽璞?/td> |
instanceof | 鏋勯€犲嚱鏁伴獙璇?/td> | 璺ㄤ綔鐢ㄥ煙澶辨晥 |
Array.isArray | 涓撻棬妫€娴嬫暟缁?/td> | 浠呴檺鏁扮粍绫诲瀷 |
Object.toString | 绮剧‘绫诲瀷鍒ゆ柇 | 闇€瑕佸鐞嗚繑鍥炲€?/td> |
馃挕 鐙鍐风煡璇?/h2>
ES6鏂板鐨凷ymbol.toStringTag灞炴€э紝鍏佽寮€鍙戣€呰嚜瀹氫箟瀵硅薄绫诲瀷鏍囩锛?/p>
javascript澶嶅埗class MyClass { get [Symbol.toStringTag]() { return 'MyAwesomeClass' } } Object.prototype.toString.call(new MyClass()) // "[object MyAwesomeClass]"
杩欏氨鍍忕粰瀵硅薄璐翠簡涓槻浼爣绛撅紝涓嶈繃鏅€氶」鐩敤寰楀皯锛屾鏋跺紑鍙戝€掓槸甯歌銆?/p>
馃毃 甯歌璇尯鎺掕姒?/h2>
-
鈥?strong>鈥嬬敤length灞炴€у垽鏂暟缁勨€?/strong>鈥?br/>
鎬绘湁钀屾柊瑙夊緱arr.length瀛樺湪灏辨槸鏁扮粍锛屼絾{length: 0}杩欐牱鐨勫璞′篃鑳介獥杩囨娴?/p>
-
鈥?strong>鈥嬬敤constructor灞炴€у垽鏂被鍨嬧€?/strong>鈥?br/>
obj.constructor === Array鐪嬩技鍙锛屼絾濡傛灉鍘熷瀷閾捐淇敼灏辩洿鎺ョ炕杞?/p>
-
鈥?strong>鈥嬭繃搴︿緷璧栫涓夋柟搴撶殑绫诲瀷妫€娴嬧€?/strong>鈥?br/>
鏈変簺宸ュ叿鍑芥暟涓轰簡鍏煎鎬у仛浜嗗閲嶅垽鏂紝鍙嶈€屽奖鍝嶆€ц兘
鈥?strong>鈥嬬敤length灞炴€у垽鏂暟缁勨€?/strong>鈥?br/> 鎬绘湁钀屾柊瑙夊緱arr.length瀛樺湪灏辨槸鏁扮粍锛屼絾{length: 0}杩欐牱鐨勫璞′篃鑳介獥杩囨娴?/p>
鈥?strong>鈥嬬敤constructor灞炴€у垽鏂被鍨嬧€?/strong>鈥?br/> obj.constructor === Array鐪嬩技鍙锛屼絾濡傛灉鍘熷瀷閾捐淇敼灏辩洿鎺ョ炕杞?/p>
鈥?strong>鈥嬭繃搴︿緷璧栫涓夋柟搴撶殑绫诲瀷妫€娴嬧€?/strong>鈥?br/> 鏈変簺宸ュ叿鍑芥暟涓轰簡鍏煎鎬у仛浜嗗閲嶅垽鏂紝鍙嶈€屽奖鍝嶆€ц兘
鏈€杩戞湁涓鍛橀棶鎴戯細"鑰佸笀锛屼负浠€涔圴ue婧愮爜閲屽埌澶勯兘鑳界湅鍒癘bject.prototype.toString.call()锛? 璇寸櫧浜嗚繖灏辨槸妗嗘灦寮€鍙戠殑鐢熷瓨鏅烘収鈥斺€旀棦瑕佺簿鍑嗗張瑕佸彲闈犮€傚氨鍍忓绉戞墜鏈垁锛岃櫧鐒剁敤璧锋潵楹荤儲锛屼絾鍏抽敭鏃跺埢涓嶆帀閾惧瓙銆?/p>
鏈€鍚庤涓湡瀹炴暟鎹細鍦⊿tackOverflow涓婏紝鍏充簬JS绫诲瀷鍒ゆ柇鐨勯棶棰樻瘡鏈堟柊澧?000+锛屽叾涓?0%閮芥槸鏁扮粍妫€娴嬪紩鍙戠殑鎯ㄦ銆傛墍浠ュ晩锛屾妸杩欎簺鍩虹鎼炴槑鐧斤紝鐪熺殑鑳藉皯韪╁緢澶氬潙锛?/p>
本文由嘻道妙招独家原创,未经允许,严禁转载