詳解JavaScript類型判斷的四種方法
JavaScript有八種內(nèi)置類型,除對(duì)象外,其他統(tǒng)稱為“基本類型”。
空值(null) 未定義(undefined) 布爾值(boolean) 數(shù)字(number) 字符串(string) 對(duì)象 (object) 符號(hào)(symbol, ES6中新增) 大整數(shù)(BigInt, ES2020 引入)Symbol: 是ES6中引入的一種原始數(shù)據(jù)類型,表示獨(dú)一無二的值。
BigInt:是 ES2020 引入的一種新的數(shù)據(jù)類型,用來解決 JavaScript中數(shù)字只能到 53 個(gè)二進(jìn)制位(JavaScript 所有數(shù)字都保存成 64 位浮點(diǎn)數(shù),大于這個(gè)范圍的整數(shù),無法精確表示的問題。具體可查看:新數(shù)據(jù)類型 — BigInt
一、typeof
typeof是一個(gè)操作符而不是函數(shù),其右側(cè)跟一個(gè)一元表達(dá)式,并返回這個(gè)表達(dá)式的數(shù)據(jù)類型。返回的結(jié)果用該類型的字符串(全小寫字母)形式表示,包括以下 8 種:number、boolean、symbol、string、object、undefined、function 、bigInt等。
typeof原理是不同的對(duì)象在底層都表示為二進(jìn)制,在Javascript中二進(jìn)制前(低)三位存儲(chǔ)其類型信息。
000: 對(duì)象 010: 浮點(diǎn)數(shù) 100:字符串 110:布爾 1:整數(shù)console.log(typeof undefined) // undefindconsole.log(typeof null) // objectconsole.log(typeof true) // booleanconsole.log(typeof 43) // numberconsole.log(typeof ’21’) // stringconsole.log(typeof {a:1}) // objectconsole.log(typeof Symbol()) // symbolconsole.log(typeof 123n) // bigintfunction a() {}console.log(typeof a) // functionvar date = new Date()var error = new Error()console.log(typeof date) // objectconsole.log(typeof error) // object
二、instanceof
instanceof 是用來判斷 A 是否為 B 的實(shí)例,表達(dá)式為:A instanceof B,如果 A 是 B 的實(shí)例,則返回 true,否則返回 false。 在這里需要特別注意的是:instanceof 檢測(cè)的是原型
通俗一些講,instanceof 用來比較一個(gè)對(duì)象是否為某一個(gè)構(gòu)造函數(shù)的實(shí)例。注意,instanceof可以準(zhǔn)確的判斷復(fù)雜數(shù)據(jù)類型,但是不能正確判斷基本數(shù)據(jù)類型
console.log(12 instanceof Number) // falseconsole.log(’22’ instanceof String) // falseconsole.log(true instanceof Boolean) // falseconsole.log(null instanceof Object) // falseconsole.log(undefined instanceof Object) // false console.log([] instanceof Array) // trueconsole.log({a: 1} instanceof Object) // trueconsole.log(json instanceof Object) // truefunction a() {}console.log(a instanceof Function) // trueconsole.log(new Date() instanceof Date) //trueconsole.log(reg instanceof RegExp) //trueconsole.log(error instanceof Error) // true
三、Object.prototype.toString.call()
toString() 是 Object 的原型方法,調(diào)用該方法,默認(rèn)返回當(dāng)前對(duì)象的 [[Class]] 。這是一個(gè)內(nèi)部屬性,其格式為 [object Xxx] ,其中 Xxx 就是對(duì)象的類型。
對(duì)于 Object 對(duì)象,直接調(diào)用 toString() 就能返回 [object Object] 。而對(duì)于其他對(duì)象,則需要通過 call / apply 來調(diào)用才能返回正確的類型信息。
console.log(Object.prototype.toString.call(1)) // [object Number]console.log(Object.prototype.toString.call(1n)) // [object BigInt]console.log(Object.prototype.toString.call(’123’)) // [object String]console.log(Object.prototype.toString.call(true)) // [object Boolean]console.log(Object.prototype.toString.call(undefined)) // [object Undefined]console.log(Object.prototype.toString.call(null)) // [object Null]console.log(Object.prototype.toString.call({})) // [object Object]console.log(Object.prototype.toString.call([])) // [object Array]console.log(Object.prototype.toString.call(function a() {})) // [object Function]console.log(Object.prototype.toString.call(Symbol())) // [object Symbol]console.log(Object.prototype.toString.call(Math)) // [object Math]console.log(Object.prototype.toString.call(JSON)) // [object JSON]console.log(Object.prototype.toString.call(new Date())) // [object Date]console.log(Object.prototype.toString.call(new RegExp())) // [object RegExp]console.log(Object.prototype.toString.call(new Error)) // [object Error]console.log(Object.prototype.toString.call(window) // [object Window]console.log(Object.prototype.toString.call(document) // [object HTMLDocument]
使用該方法我們可以封裝一個(gè)isType方法來對(duì)類型進(jìn)行判斷
let isType = (type, obj) => { return Object.prototype.toString.call(obj) === `[object ${type}]`}console.log(isType(’Number’, 12)) // trueconsole.log(isType(’Number’, ’12’)) // false
或者
let type = function(o) { let s = Object.prototype.toString.call(o); return s.match(/[object (.*?)]/)[1].toLowerCase();};console.log(type(12)) // numberconsole.log(type(’12’)) // stringconsole.log(type({})) // objectconsole.log(type([])) // array
四、constructor
constructor屬性,可以得知某個(gè)實(shí)例對(duì)象,到底是哪一個(gè)構(gòu)造函數(shù)產(chǎn)生的。
constructor屬性表示原型對(duì)象與構(gòu)造函數(shù)之間的關(guān)聯(lián)關(guān)系,如果修改了原型對(duì)象,一般會(huì)同時(shí)修改constructor屬性,防止引用的時(shí)候出錯(cuò)。所以,修改原型對(duì)象時(shí),一般要同時(shí)修改constructor屬性的指向。
console.log(’22’.constructor === String) // trueconsole.log(true.constructor === Boolean) // trueconsole.log([].constructor === Array)// trueconsole.log(document.constructor === HTMLDocument) // trueconsole.log(window.constructor === Window) // trueconsole.log(new Number(22).constructor === Number) // trueconsole.log(new Function().constructor === Function) // trueconsole.log((new Date()).constructor === Date) // trueconsole.log(new RegExp().constructor === RegExp) // trueconsole.log(new Error().constructor === Error) // true
注意:
1、null 和 undefined 是無效的對(duì)象,因此是不會(huì)有 constructor 存在的,這兩種類型的數(shù)據(jù)需要通過其他方式來判斷。
2、函數(shù)的 constructor 是不穩(wěn)定的,這個(gè)主要體現(xiàn)在自定義對(duì)象上,當(dāng)開發(fā)者重寫 prototype 后,原有的 constructor 引用會(huì)丟失,constructor 會(huì)默認(rèn)為 Object
以上就是JavaScript類型判斷的四種方法的詳細(xì)內(nèi)容,更多關(guān)于JavaScript類型判斷的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁2. Android實(shí)現(xiàn)圖片自動(dòng)切換功能(實(shí)例代碼詳解)3. javascript設(shè)計(jì)模式 ? 建造者模式原理與應(yīng)用實(shí)例分析4. jsp+mysql實(shí)現(xiàn)網(wǎng)頁的分頁查詢5. ASP.NET MVC通過勾選checkbox更改select的內(nèi)容6. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼7. 使用AJAX(包含正則表達(dá)式)驗(yàn)證用戶登錄的步驟8. Python使用oslo.vmware管理ESXI虛擬機(jī)的示例參考9. JavaScript Tab菜單實(shí)現(xiàn)過程解析10. ThinkPHP5 通過ajax插入圖片并實(shí)時(shí)顯示(完整代碼)
