JavaScript判断变量类型的几种方式
目录
方式一:typeof
-
常用于判断基本数据类型,对于引用数据类型除了
typeof function
返回'function'
,其他都返回'object'
。 -
且
typeof null
也是返回'object'
- 原因:JavaScript 在底层存储变量时,会在变量的机器码1-3位存储变量的类型信息,对象类型的1-3位是
000
,而null
的机器码是全0
,所以typeof
检测的时候将null
也判定为是对象。
- 原因:JavaScript 在底层存储变量时,会在变量的机器码1-3位存储变量的类型信息,对象类型的1-3位是
方法一代码示例:
let num = 123
let str = 'hello'
let bool = true
let s = Symbol('hello')
let obj = {a:'hi'}
let arr = ['a','b','c']
let fun = function(){
console.log('hello')
}
console.log('typeof num '+ typeof num)
console.log('typeof str '+ typeof str)
console.log('typeof bool '+ typeof bool)
console.log('typeof null '+ typeof null)
console.log('typeof undefined '+ typeof undefined)
console.log('typeof s '+ typeof s)
console.log('typeof obj '+ typeof obj)
console.log('typeof arr ' + typeof arr)
console.log('typeof fun ' + typeof fun)
运行结果:
方式二:instanceof
-
instanceof
判断方法:如a instanceof B
- 如果
B
函数的显示原型对象prototype
在a的隐式原型链上,则返回true,否则返回false。
- 如果
-
不可以用于简单数据类型的检测,检测过程繁琐且对于简单数据类型中的null、undefined、symbol检测不出来。
方法二代码示例:
let num = 123
let str = 'hello'
let bool = true
let s = Symbol('hello')
let obj = {a:'hi'}
let arr = ['a','b','c']
let fun = function(){
console.log('hello')
}
console.log(num instanceof Number) //false
console.log(str instanceof String) //false
console.log(bool instanceof Boolean )//false
console.log(undefined instanceof Object)//false
console.log(null instanceof Object) //false
console.log(s instanceof Symbol ) //false
console.log(obj instanceof Object ) //true
console.log(arr instanceof Array) //true
console.log(fun instanceof Function ) //true
运行结果:
方式三:constructor
- 每个函数都有一个
prototype
属性,它默认指向一个空的object
对象,叫做函数的原型对象,这个原型对象上有一个属性叫做constructor
,它默认指向函数对象。当使用实例对象获取constructor
属性时,在自身属性上找不到,则会沿着原型链去查找,且找到的这个constructor
属性指向这个实例对象的构造函数。因此可以通过constructor
属性来判断引用数据类型。
方法三代码示例:
let num = 123
let str = 'hello'
let bool = true
let s = Symbol('hello')
let obj = {a:'hi'}
let arr = ['a','b','c']
let fun = function(){
console.log('hello')
}
console.log(num.constructor === Number) //true
console.log(str.constructor === String) //true
console.log(bool.constructor === Boolean)//true
console.log(s.constructor === Symbol) //true
console.log(obj.constructor === Object) //true
console.log(arr.constructor === Array) // true
console.log(fun.constructor === Function) //true
运行结果:
方式四:Object.prototype.toString.call()
- Object的每一个实例都有toString方法,这个方法在Object构造函数的prototype上,Object.prototype.toString方法会输出对象的字符串表示:[Object 类型]
- Object.prototype.toString()方法是Object构造函数的prototype上的toString方法,只有这个方法是会输出调用改方法的对象的字符串表示。其他数据类型对toString方法基本都进行了改写(可以看下面代码实例中的对比),因此若通过实例对象直接调用toString方法无法获取到Object.prototype.toString()方法,只有通过Object.prototype.toString.call()/apply()调用,以实现数据类型的判断。
- 这四种方法中各种数据类型都能检测且检测精准的就是Object.prototype.toString.call()。包括null、undefined都可以精确的检测出。
方法四代码示例:
let num = 123
let str = 'hello'
let bool = true
let s = Symbol('hello')
let obj = {a:'hi'}
let arr = ['a','b','c']
let fun = function(){
console.log('hello')
}
console.log(num.toString())
console.log(Object.prototype.toString.call(num))
console.log(str.toString())
console.log(Object.prototype.toString.call(str))
console.log(bool.toString())
console.log(Object.prototype.toString.call(bool))
console.log(s.toString())
console.log(Object.prototype.toString.call(s))
console.log(obj.toString())
console.log(Object.prototype.toString.call(obj))
console.log(arr.toString())
console.log(Object.prototype.toString.call(arr))
console.log(fun.toString())
console.log(Object.prototype.toString.call(fun))
console.log(Object.prototype.toString.call(null))
console.log(Object.prototype.toString.call(undefined))
运行结果:
总结
以上四种方式即为JavaScript中判断变量数据类型的四种方式。如代码或思路有任何不足,欢迎补充。