zoukankan      html  css  js  c++  java
  • js 判断数据类型

     

    首先来提问一个:typeof是否能正确判断类型?

    答案是:不可以,因为由于历史原因,在判断原始类型时,typeof null会等于object。而且对于对象来说,除了函数,都会转换成object。例子如下:

    typeof 1 // 'number'
    typeof "1" // 'string'
    typeof null //
    
    typeof [] // 'object'
    typeof {} // 'object'
    typeof window.alert // 'function'
     

    再来提问一个,instanceof是否能正确判断类型?

    答案是:还是不可以,虽然instanceof是通过原型链来判断的,但是对于对象来说,Array也会被转换成Object,而且也不能区分基本类型stringboolean。例如:

    function Func() {}
    const func = new Func()
    console.log(func instanceof Func) // true
    
    const obj = {}
    const arr = []
    obj instanceof Object // true
    arr instanceof Object // true
    arr instanceof Array // true
    
    const str = "abc"
    const str2 = new String("abc")
    str instanceof String // false
    str2 instanceof String // true
     

    所以该怎么办呢?这时候我们可以使用:Object.prototype.toString.call() 因为每个对象都有一个toString()方法,当要将对象表示为文本值或以预期字符串的方式引用对象时,会自动调用该方法。默认情况下,Object派生的每个对象都会继承toString()方法。如果此方法未在自定义对象中被覆盖,toString()返回[Object type],其中type是对象类型。所以就有以下例子:

    Object.prototype.toString.call(new Date()) // [object Date]
    Object.prototype.toString.call("1") // [object String]
    Object.prototype.toString.call(1) // [object Numer]
    Object.prototype.toString.call(undefined) // [object Undefined]
    Object.prototype.toString.call(null) // [object Null]

    所以综合上述知识点,我们可以封装出以下通用类型判断方法:

    var type = function(data) {
          var toString = Object.prototype.toString;
          var dataType =
            data instanceof Element
              ? "element" // 为了统一DOM节点类型输出
              : toString
                  .call(data)
                  .replace(/[objects(.+)]/, "$1")
                  .toLowerCase()
          return dataType
    };

    使用方法如下:

    type("a") // string
    type(1) // number
    type(window) // window
    type(document.querySelector("h1")) // element

    转载自 掘金 陈大鱼头 链接:https://juejin.im/post/5e16b8b2e51d456f60137a50

  • 相关阅读:
    阿里云容器服务多项重磅发布:高效智能、安全无界的新一代平台
    400倍加速, PolarDB HTAP实时数据分析技术解密
    先行一步,7大技术创新和突破,阿里云把 Serverless 领域的这些难题都给解了
    一图看懂云栖大会「云原生」重磅发布
    云栖发布|企业级互联网架构全新升级 ,助力数字创新
    3000份限量款云小宝手办全网首发,等你带回家!
    基于Delta lake、Hudi格式的湖仓一体方案
    git的clone和github的fork
    对vue的solt的理解
    对云信SDK的研究1
  • 原文地址:https://www.cnblogs.com/xyptechnology/p/12175035.html
Copyright © 2011-2022 走看看