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

    1.typeof进行判断

    typeof 是一个一元运算符,放在运算数之前,运算数可以是任意类型。它返回值是一个字符串,该字符串说明运算数的类型。typeof 一般只能返回如下几个结果: number、string、boolean、function、object、undefined。看下面例子:

    console.log(typeof '1');   //string
    console.log(typeof 1);     //number
    console.log(typeof true);  //boolean
    console.log(typeof {});   //object
    console.log(typeof []);   //object
    function t (){}
    console.log(typeof t);   //function
    console.log(typeof null);  //object
    console.log(typeof undefined); //undefined

     

    从上面例子可以看出通过typeof运算数组类似对象,返回的也是object,此时无法判断一个对象是不是数组。

    2.instanceof进行判断

    instanceof用于判断一个变量是否是某个对象的实例。

    看下面例子:

    console.log([] instanceof Array);//true
    console.log([] instanceof Object);//true

    从上面例子可以看出,还是没办法判断数组类型。

    3.constructor判断

    在W3C定义中:constructor属性返回对创建对象数组函数的引用,也就是返回对象相应的构造函数。

    console.log([].constructor == Array);//true
    console.log([].constructor == Object);//false
    console.log((1).constructor == Number);//true
    console.log('str'.constructor == String);//true
    console.log(true.constructor == Boolean);//true
    function t(){}
    console.log(t.constructor == Function);//true

    从上面可以看出通过数据的constructor属性可以判断数据类型。

    但是要注意的是:

    被判断的array必须是在当前页面声明的。比如,一个页面(父页面)有一个框架,框架中引用了一个页面(子页面),在子页面中声明了一个array,并将其赋值给父页面的一个变量,这时判断该变量,Array == array.constructor会返回false。

    原因:

    1>.array属于引用型数据,在传递过程中,仅仅是引用地址的传递。

    2>.每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的array,所对应的构造函数,是子页面的Array对象;父页面来进行判断,使用Array并不等于子页面的Array。

    4.完美的解决方案

    使用Object.prototype.toString.call来解决。

    下面是ECMA中对Object.prototype.toString的解释:

    Object.prototype.toString( )
    When the toString method is called, the following steps are taken:
    1. Get the [[Class]] property of this object.
    2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.
    3. Return Result (2)

    其过程简单说来就是:1>.获取对象的类名(对象类型)。2.然后将‘[object’ 、获取的类名、‘]’三者组合并返回

    console.log(Object.prototype.toString.call([]) === '[object Array]');//true
    console.log(Object.prototype.toString.call([]) === '[object Object]');//false
    console.log(Object.prototype.toString.call({}) === '[object Object]');//true
    console.log(Object.prototype.toString.call(1) === '[object Number]');//true
    console.log(Object.prototype.toString.call('1') === '[object String]');//true
    console.log(Object.prototype.toString.call(true) === '[object Boolean]');//true
    console.log(Object.prototype.toString.call(null) );// [object Null]
    console.log(Object.prototype.toString.call(undefined));//[object Undefined]
    function t(){}
    console.log(Object.prototype.toString.call(t) === '[object Function]');//true

    这种方式既解决了instanceof存在的跨页面问题,也解决了属性检测方式所存在的问题,实在是一种妙招,一个很好的解决方案。

  • 相关阅读:
    .NetCore Grpc 客服端 工厂模式配置授权
    DOCKER 拉取 dotnet 镜像太慢 docker pull mcr.microsoft.com too slow
    Introducing .NET 5
    VSCode 出现错误 System.IO.IOException: The configured user limit (128) on the number of inotify instances has been reached.
    Omnisharp VsCode Attaching to remote processes
    zookeeper3.5.5 centos7 完全分布式 搭建随记
    Hadoop2.7.7 centos7 完全分布式 配置与问题随记
    MySQL索引 索引分类 最左前缀原则 覆盖索引 索引下推 联合索引顺序
    SQL基础随记3 范式 键
    MySQL调优 优化需要考虑哪些方面
  • 原文地址:https://www.cnblogs.com/erduyang/p/4652912.html
Copyright © 2011-2022 走看看