JS 数据的类型判断

Question

基本类型：String、Number、Boolean、Symbol、Undefined、Null

引用类型：Object

基本类型

也称为简单类型，由于其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈中，即按值访问

引用类型

也称为复杂类型，由于其值的大小会改变，所以不能将其存放在栈中，否则会降低变量查询速度。 其值存储在堆中，而存储在变量处的值，是一个指针，指向存储对象的内存处，即按址访问。 引用类型除 Object 外，还包括 Function 、Array、RegExp、Date 等等

typeof

typeof '' 
// string 有效
typeof 1 
// number 有效
typeof Symbol() 
// symbol 有效
typeof true 
//boolean 有效
typeof undefined 
//undefined 有效
typeof null 
//object 无效
typeof []  
//object 无效
typeof new Function() 
// function 有效
typeof new Date() 
//object 无效
typeof new RegExp() 
//object 无效

instanceof

是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false

[] instanceof Array
//true
new Date() instanceof Date
//true
new RegExp() instanceof RegExp
//true
new Function() instanceof Function
//true

但是上面四种 instanceof Object 也为 true

constructor

''.constructor === String
//true
new Number(1).constructor === Number
//true
Symbol().constructor === Symbol
//true
true.constructor === Boolean
//true
[].constructor === Array
//true
new Function().constructor === Function
//true
new RegExp().constructor === RegExp
//true
new Date().constructor === Date
//true
new Error().constructor === Error
//true
document.constructor === HTMLDocument
//true
window.constructor === Window
//true

• null 和 undefined 是无效的对象，因此是不会有 constructor 存在的，这两种类型的数据需要通过其他方式来判断。
• 函数的 constructor 是不稳定的，这个主要体现在自定义对象上，当开发者重写 prototype 后，原有的 constructor 引用会丢失，constructor 会默认为 Object

Object.prototype.toString()

Object.prototype.toString.call('')                // [object String]
Object.prototype.toString.call(1)                 // [object Number]
Object.prototype.toString.call(true)              // [object Boolean]
Object.prototype.toString.call(Symbol())          // [object Symbol]
Object.prototype.toString.call(undefined)         // [object Undefined]
Object.prototype.toString.call(null)              // [object Null]
Object.prototype.toString.call(new Function())    // [object Function]
Object.prototype.toString.call(new Date())        // [object Date]
Object.prototype.toString.call([])                // [object Array]
Object.prototype.toString.call(new RegExp())      // [object RegExp]
Object.prototype.toString.call(new Error())       // [object Error]
Object.prototype.toString.call(document)          // [object HTMLDocument]
Object.prototype.toString.call(window)            // [object Window] window 是全局对象 global 的引用

综合

function getType (o) {
    return Object.prototype.toString.call(o).slice(8, -1).toLowerCase()
}

const dataType = function (o) {
  const TYPE = getType(o)
  return {
    value () {
      return TYPE
    },
    is (type) {
      if (!type) {
        console.warn('请检查 type 传值')
      }
      return TYPE === type.toLowerCase()
    },
    isFunction () {
      return this.is('Function')
    },
    isRegExp () {
      return this.is('RegExp')
    },
    isString () {
      return this.is('String')
    },
    isArray () {
      return this.is('Array')
    },
    isObject () {
      return this.is('Object')
    },
    isNumber () {
      return this.is('Number')
    },
    isBoolean () {
      return this.is('Boolean')
    },
    isNull () {
      return this.is('null')
    },
    isUndefined () {
      return this.is('undefined')
    },
    isEmptyArray () {
      return this.is('Array') && JSON.stringify(o) === '[]'
    },
    isEmptyObject () {
      return this.is('Object') && JSON.stringify(o) === '{}'
    }
  }
}

/**
 * 将 dataType[method](o) 与 dataType(o)[method]() 对应
 * dataType.typeof(o) 与 dataType(o).value() 对应
 * dataType.is(o, type) 与 dataType(o).is(type) 对应
 */
const methods = ['is', 'isFunction', 'isRegExp', 'isString', 'isArray', 'isObject', 'isNumber', 'isBoolean', 'isNull', 'isUndefined', 'isEmptyArray', 'isEmptyObject', 'typeof']

methods.forEach(method => {
  dataType[method] = function (o, ...args) {
    let type = dataType(o)
    if (method === 'typeof') {
      method = 'value'
    }
    return type[method](...args)
  }
})

export default dataType