javascript 判断数据类型的几种方式

47 阅读1分钟

typeof 类型判断

缺点:无法区分null 、对象、数组,Map,Set,WeakMap,WeakSet、RegExp等

注意:通过构造函数创建的变量typeof 后是都是object

var a = ''
console.log(typeof a)  // string
 
a = 0
console.log(typeof a)  // number
 
a = null
console.log(typeof a)  // object
 
a = undefined
console.log(typeof a)  // undefined
 
a = true
console.log(typeof a)  // boolean
 
a = Symbol()
console.log(typeof a)  // symbol
 
a = {}
console.log(typeof a)  // object
 
a = []
console.log(typeof a)  // object
 
a = function(){}
console.log(typeof a)  // function
 
a = /\d+/
console.log(typeof a)  // object
 
a = new Date()
console.log(typeof a)  // object
 
a = new Map()
console.log(typeof a)  // object
 
a = new Set()
console.log(typeof a)  // object
 
a = new WeakMap()
console.log(typeof a)  // object
 
a = new WeakSet()
console.log(typeof a)  // object

instanceof 判断

缺点:

  1. 只能判断通过构造函数创建的变量,字面量创建的变量无法判断
  2. 只能区分对象是否存在目标对象的原型链上
var a = ''
console.log(a instanceof String)  // false
 
a = new String('')
console.log(a instanceof String)  // true
 
// Vue2.6源码,使用 instanceof
function Vue(options){
    if(this instanceof Vue){
    }
}
 
a = new Vue({})
console.log(a instanceof Vue) // true

构造函数的名称判断

缺点:

  1. 不能判断null和undefined
  2. 构造函数的指向是可以改变的,因此会存在类型判断不准确
var a = ''
console.log(a.constructor) // ƒ String() { [native code] }
 
a = new String('')
console.log(a.constructor) // ƒ String() { [native code] }
console.log(a.constructor.name)  // String
 
a = 1
console.log(a.constructor.name) // Number
 
a = false
console.log(a.constructor.name) // Boolean
 
a = []
console.log(a.constructor.name) // Array
 
a = {}
console.log(a.constructor.name) // Object
 
a = new Date()
console.log(a.constructor.name) // Date
 
a = function(){}
console.log(a.constructor.name) // Function
 
a = /\d+/
console.log(a.constructor.name) // RegExp
 
a = Symbol()
console.log(a.constructor.name) // Symbol
 
a = new Map()
console.log(a.constructor.name) // Map
 
a = new Set()
console.log(a.constructor.name) // Set
 
a = new WeakMap()
console.log(a.constructor.name) // WeakMap
 
a = new WeakSet()
console.log(a.constructor.name) // WeakSet

toString方法判断

优点:能够校验所有的数据类型

缺点:不能判断谁是谁的实例

var toString = Object.prototype.toString
 
var a = null
console.log(toString.call(a))  // [object Null]
 
a = undefined
console.log(toString.call(a))  // [object Undefined]
 
a = ''
console.log(toString.call(a))  // [object String]
 
a = 1
console.log(toString.call(a))  // [object Number]
 
a = false
console.log(toString.call(a))  // [object Boolean]
 
a = {}
console.log(toString.call(a))  // [object Object]
 
a = []
console.log(toString.call(a))  // [object Array]
 
a = function(){}
console.log(toString.call(a))  // [object Function]
 
a = Symbol()
console.log(toString.call(a))  // [object Symbol]
 
a = /\d+/
console.log(toString.call(a))  // [object RegExp]
 
a = new Map()
console.log(toString.call(a))  // [object Map]
 
a = new Set()
console.log(toString.call(a))  // [object Set]
 
a = new WeakMap()
console.log(toString.call(a))  // [object WeakMap]
 
a = new WeakSet()
console.log(toString.call(a))  // [object WeakSet]