详解JavaScript类型判断的四种方法
JavaScript有八种内置类型,除对象外,其他统称为“基本类型”。
- 空值(null)
- 未定义(undefined)
- 布尔值(boolean)
- 数字(number)
- 字符串(string)
- 对象(object)
- 符号(symbol,ES6中新增)
- 大整数(BigInt,ES2020引入)
Symbol:是ES6中引入的一种原始数据类型,表示独一无二的值。
BigInt:是ES2020引入的一种新的数据类型,用来解决JavaScript中数字只能到53个二进制位(JavaScript所有数字都保存成64位浮点数,大于这个范围的整数,无法精确表示的问题。具体可查看:新数据类型—BigInt
一、typeof
typeof是一个操作符而不是函数,其右侧跟一个一元表达式,并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示,包括以下8种:number、boolean、symbol、string、object、undefined、function、bigInt等。
typeof原理是不同的对象在底层都表示为二进制,在Javascript中二进制前(低)三位存储其类型信息。
- 000:对象
- 010:浮点数
- 100:字符串
- 110:布尔
- 1:整数
console.log(typeofundefined)//undefind console.log(typeofnull)//object console.log(typeoftrue)//boolean console.log(typeof43)//number console.log(typeof'21')//string console.log(typeof{a:1})//object console.log(typeofSymbol())//symbol console.log(typeof123n)//bigint functiona(){} console.log(typeofa)//function vardate=newDate() varerror=newError() console.log(typeofdate)//object console.log(typeoferror)//object
二、instanceof
instanceof是用来判断A是否为B的实例,表达式为:AinstanceofB,如果A是B的实例,则返回true,否则返回false。在这里需要特别注意的是:instanceof检测的是原型
通俗一些讲,instanceof用来比较一个对象是否为某一个构造函数的实例。注意,instanceof可以准确的判断复杂数据类型,但是不能正确判断基本数据类型
console.log(12instanceofNumber)//false console.log('22'instanceofString)//false console.log(trueinstanceofBoolean)//false console.log(nullinstanceofObject)//false console.log(undefinedinstanceofObject)//false console.log([]instanceofArray)//true console.log({a:1}instanceofObject)//true console.log(jsoninstanceofObject)//true functiona(){} console.log(ainstanceofFunction)//true console.log(newDate()instanceofDate)//true console.log(reginstanceofRegExp)//true console.log(errorinstanceofError)//true
三、Object.prototype.toString.call()
toString()是Object的原型方法,调用该方法,默认返回当前对象的[[Class]]。这是一个内部属性,其格式为[objectXxx],其中Xxx就是对象的类型。
对于Object对象,直接调用toString()就能返回[objectObject]。而对于其他对象,则需要通过call/apply来调用才能返回正确的类型信息。
console.log(Object.prototype.toString.call(1))//[objectNumber] console.log(Object.prototype.toString.call(1n))//[objectBigInt] console.log(Object.prototype.toString.call('123'))//[objectString] console.log(Object.prototype.toString.call(true))//[objectBoolean] console.log(Object.prototype.toString.call(undefined))//[objectUndefined] console.log(Object.prototype.toString.call(null))//[objectNull] console.log(Object.prototype.toString.call({}))//[objectObject] console.log(Object.prototype.toString.call([]))//[objectArray] console.log(Object.prototype.toString.call(functiona(){}))//[objectFunction] console.log(Object.prototype.toString.call(Symbol()))//[objectSymbol] console.log(Object.prototype.toString.call(Math))//[objectMath] console.log(Object.prototype.toString.call(JSON))//[objectJSON] console.log(Object.prototype.toString.call(newDate()))//[objectDate] console.log(Object.prototype.toString.call(newRegExp()))//[objectRegExp] console.log(Object.prototype.toString.call(newError))//[objectError] console.log(Object.prototype.toString.call(window)//[objectWindow] console.log(Object.prototype.toString.call(document)//[objectHTMLDocument]
使用该方法我们可以封装一个isType方法来对类型进行判断
letisType=(type,obj)=>{ returnObject.prototype.toString.call(obj)===`[object${type}]` } console.log(isType('Number',12))//true console.log(isType('Number','12'))//false
或者
lettype=function(o){ lets=Object.prototype.toString.call(o); returns.match(/\[object(.*?)\]/)[1].toLowerCase(); }; console.log(type(12))//number console.log(type('12'))//string console.log(type({}))//object console.log(type([]))//array
四、constructor
constructor属性,可以得知某个实例对象,到底是哪一个构造函数产生的。
constructor属性表示原型对象与构造函数之间的关联关系,如果修改了原型对象,一般会同时修改constructor属性,防止引用的时候出错。所以,修改原型对象时,一般要同时修改constructor属性的指向。
console.log('22'.constructor===String)//true console.log(true.constructor===Boolean)//true console.log([].constructor===Array)//true console.log(document.constructor===HTMLDocument)//true console.log(window.constructor===Window)//true console.log(newNumber(22).constructor===Number)//true console.log(newFunction().constructor===Function)//true console.log((newDate()).constructor===Date)//true console.log(newRegExp().constructor===RegExp)//true console.log(newError().constructor===Error)//true
注意:
1、null和undefined是无效的对象,因此是不会有constructor存在的,这两种类型的数据需要通过其他方式来判断。
2、函数的constructor是不稳定的,这个主要体现在自定义对象上,当开发者重写prototype后,原有的constructor引用会丢失,constructor会默认为Object
以上就是JavaScript类型判断的四种方法的详细内容,更多关于JavaScript类型判断的资料请关注毛票票其它相关文章!