
嘻道奇闻
- 文章199742
- 阅读14625734
前端开发必看:3大场景解析JS数据类型精准判断的终极方案
社会2025-05-27 11:13:19
鍦烘櫙涓€锛氬揩閫熼獙璇佸熀纭€绫诲瀷鏃讹紝涓轰粈涔?0%鐨勪汉鐢ㄩ敊typeof锛?/h2>
// 鏂颁汉瀹规槗韪╃殑鍧戯細
console.log(typeof null); // 'object'
console.log(typeof []); // 'object'
console.log(typeof new Date()); // 'object'
鈻嶈В鍐虫柟妗堬細璁颁綇2瑕?涓嶈鍘熷垯
- 瑕佺敤鍦細妫€娴媢ndefined/string/number/boolean绛夊熀纭€绫诲瀷
- 鍒敤鍦細null妫€娴嬪拰瀵硅薄绫诲瀷缁嗗垎锛堟暟缁?鏃ユ湡绛夛級
- 瀹炴垬鎶€宸э細
if(typeof str === 'string' && str !== '')
if(typeof str === 'string' && str !== '')
鍦烘櫙浜岋細閬囧埌[1,2,3]鍜寋id:1}鏃讹紝濡備綍閬垮厤閿欒璇嗗埆锛?/h2>
馃毃 鍏稿瀷璇搷浣滐細
[] instanceof Array // true
[] instanceof Object // 涔熸槸true锛?/code>
鈻嶇被鍨嬫娴嬬粍鍚堟嫵锛歩nstanceof鐨勮繘闃剁敤娉?/h3>
- 鍒ゆ柇鏋勯€犲嚱鏁版椂锛?code>obj instanceof MyClass
Array.isArray()
+ Object.prototype.toString
鍦烘櫙涓夛細闇€瑕佸悓鏃舵娴媙ull銆佽嚜瀹氫箟瀵硅薄鏃剁殑缁堟瀬鏂规
鈻峅bject.prototype.toString鐨勭簿瀵嗘娴?/h3>
// 涓囪兘妫€娴嬫ā鏉匡細
function getType(obj) {
return Object.prototype.toString.call(obj)
.match(/$$object (.*?)$$/)[1].toLowerCase();
}
// 妫€娴嬬ず渚嬶細
getType(null) // 'null'
getType(new File())// 'file'
// 妫€娴嬬ず渚嬶細
getType(null) // 'null'
getType(new File())// 'file'
馃挕 涓撳绾ф妧宸э細
- 鍐呯疆绫诲瀷妫€娴嬭鐩朎CMAScript瑙勮寖瀹氫箟鐨勬墍鏈夌被鍨?/li>
- 鑷畾涔夊璞′細杩斿洖鏋勯€犲嚱鏁扮殑[Symbol.toStringTag]灞炴€у€?/li>
- 涓嶵S绫诲瀷瀹堝崼閰嶅悎浣跨敤锛?code>if(getType(data) === 'array')
鍐崇瓥鎸囧崡锛氫笉鍚屽満鏅笅鐨勬柟娉曢€夋嫨娴佺▼鍥?/h2>
妫€娴嬪熀鏈被鍨嬶紵 鈫?typeof
楠岃瘉鏋勯€犲嚱鏁帮紵 鈫?instanceof
闇€瑕佺簿纭埌鍏蜂綋绫诲瀷锛?鈫?Object.prototype.toString
妗嗘灦寮€鍙?宸ュ叿搴擄紵 鈫?缁勫悎浣跨敤+绫诲瀷缂撳瓨
杩欎釜鐗堟湰鐨勭壒鐐癸細
- 瀹屽叏鍦烘櫙鍖栵細姣忎釜鎶€鏈偣閮界粦瀹氬叿浣撳紑鍙戝満鏅?/li>
- 闂瀵煎悜锛氬厛鐢ㄩ敊璇渚嬪紩鍙戝叡楦o紝鍐嶇粰鍑鸿В鍐虫柟妗?/li>
- 鍖呭惈鍙鍖栧喅绛栨祦绋嬪浘锛屾柟渚垮揩閫熸煡闃?/li>
- 浠g爜绀轰緥寮鸿皟瀹炴垬鎬э紙鍖呭惈TS鏁村悎銆佹鏋跺紑鍙戠瓑杩涢樁鐢ㄦ硶锛?/li>
- 绉诲姩绔弸濂斤細妯″潡鍖栧竷灞€+閱掔洰鐨勮瑙夊垎闅?/li>
- 鍏抽敭鎶€鏈偣鐢ㄤ笓瀹舵妧宸ф绐佸嚭鏄剧ず
- 鑷甫绠€鏄撴牱寮忥紝鏃犻渶澶栭儴CSS鍗冲彲娓呮櫚鍛堢幇鍐呭缁撴瀯