1. 主页 > 好文章

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>
  1. 鈥?strong>鈥嬬敤length灞炴€у垽鏂暟缁勨€?/strong>鈥?br/> 鎬绘湁钀屾柊瑙夊緱arr.length瀛樺湪灏辨槸鏁扮粍锛屼絾{length: 0}杩欐牱鐨勫璞′篃鑳介獥杩囨娴?/p>

  2. 鈥?strong>鈥嬬敤constructor灞炴€у垽鏂被鍨嬧€?/strong>鈥?br/> obj.constructor === Array鐪嬩技鍙锛屼絾濡傛灉鍘熷瀷閾捐淇敼灏辩洿鎺ョ炕杞?/p>

  3. 鈥?strong>鈥嬭繃搴︿緷璧栫涓夋柟搴撶殑绫诲瀷妫€娴嬧€?/strong>鈥?br/> 鏈変簺宸ュ叿鍑芥暟涓轰簡鍏煎鎬у仛浜嗗閲嶅垽鏂紝鍙嶈€屽奖鍝嶆€ц兘


鏈€杩戞湁涓鍛橀棶鎴戯細"鑰佸笀锛屼负浠€涔圴ue婧愮爜閲屽埌澶勯兘鑳界湅鍒癘bject.prototype.toString.call()锛? 璇寸櫧浜嗚繖灏辨槸妗嗘灦寮€鍙戠殑鐢熷瓨鏅烘収鈥斺€旀棦瑕佺簿鍑嗗張瑕佸彲闈犮€傚氨鍍忓绉戞墜鏈垁锛岃櫧鐒剁敤璧锋潵楹荤儲锛屼絾鍏抽敭鏃跺埢涓嶆帀閾惧瓙銆?/p>

鏈€鍚庤涓湡瀹炴暟鎹細鍦⊿tackOverflow涓婏紝鍏充簬JS绫诲瀷鍒ゆ柇鐨勯棶棰樻瘡鏈堟柊澧?000+锛屽叾涓?0%閮芥槸鏁扮粍妫€娴嬪紩鍙戠殑鎯ㄦ銆傛墍浠ュ晩锛屾妸杩欎簺鍩虹鎼炴槑鐧斤紝鐪熺殑鑳藉皯韪╁緢澶氬潙锛?/p>

本文由嘻道妙招独家原创,未经允许,严禁转载