zoukankan      html  css  js  c++  java
  • js检测数据类型

    一、JS中数据类型

    • 基本数据类型(Undefined、Null、Boolean、Number、String)
    • 复杂数据类型 (Object)

    二、判断数据类型
    下面将对如下数据进行判断它们的类型

    var bool = true
    var num = 1
    var str = 'abc'
    var und = undefined
    var nul = null
    var arr = [1,2,3]
    var obj = {name:'haoxl',age:18}
    var fun = function(){console.log('I am a function')}

    1. 使用typeof

    console.log(typeof bool); //boolean
    console.log(typeof num);//number
    console.log(typeof str);//string
    console.log(typeof und);//undefined
    console.log(typeof nul);//object
    console.log(typeof arr);//object
    console.log(typeof obj);//object
    console.log(typeof fun);//function

    结论:由结果可知typeof可以测试出```number```、```string```、```boolean```、```undefined```及```function```,而对于```null```及数组、对象,typeof均检测出为object,不能进一步判断它们的类型。
    2. 使用instanceof

    console.log(bool instanceof Boolean);// false
    console.log(num instanceof Number);// false
    console.log(str instanceof String);// false
    console.log(und instanceof Object);// false
    console.log(arr instanceof Array);// true
    console.log(nul instanceof Object);// false
    console.log(obj instanceof Object);// true
    console.log(fun instanceof Function);// true
    
    var bool2 = new Boolean()
    console.log(bool2 instanceof Boolean);// true
    
    var num2 = new Number()
    console.log(num2 instanceof Number);// true
    
    var str2 = new String()
    console.log(str2 instanceof String);// true
    
    function Person(){}
    var per = new Person()
    console.log(per instanceof Person);// true
    
    function Student(){}
    Student.prototype = new Person()
    var haoxl = new Student()
    console.log(haoxl instanceof Student);// true
    console.log(haoxl instanceof Person);// true

    结论:从结果中看出instanceof不能区别undefined和null,而且对于基本类型如果不是用new声明的则也测试不出来,对于是使用new声明的类型,它还可以检测出多层继承关系。

    3. 使用constructor
    undefined和null没有contructor属性

    console.log(bool.constructor === Boolean);// true
    console.log(num.constructor === Number);// true
    console.log(str.constructor === String);// true
    console.log(arr.constructor === Array);// true
    console.log(obj.constructor === Object);// true
    console.log(fun.constructor === Function);// true
    
    console.log(haoxl.constructor === Student);// false
    console.log(haoxl.constructor === Person);// true

    结论:constructor不能判断undefined和null,并且使用它是不安全的,因为contructor的指向是可以改变的
    4. 使用Object.prototype.toString.call

    console.log(Object.prototype.toString.call(bool));//[object Boolean]
    console.log(Object.prototype.toString.call(num));//[object Number]
    console.log(Object.prototype.toString.call(str));//[object String]
    console.log(Object.prototype.toString.call(und));//[object Undefined]
    console.log(Object.prototype.toString.call(nul));//[object Null]
    console.log(Object.prototype.toString.call(arr));//[object Array]
    console.log(Object.prototype.toString.call(obj));//[object Object]
    console.log(Object.prototype.toString.call(fun));//[object Function]
    
    function Person(){}
    function Student(){}
    Student.prototype = new Person()
    var haoxl = new Student()
    console.log(Object.prototype.toString.call(haoxl));//[object Object]

    结论:原理(摘自高级程序设计3):在任何值上调用 Object 原生的 toString() 方法,都会返回一个 [object NativeConstructorName] 格式的字符串。每个类在内部都有一个 [[Class]] 属性,这个属性中就指定了上述字符串中的构造函数名。

    但是它不能检测非原生构造函数的构造函数名。

  • 相关阅读:
    JAVA内部类详解
    表、栈和队列
    大型网站架构演化<二>
    eclipse中build path 中JDK与java compiler compliance level的问题(转)
    XFire构建服务端Service的两种方式
    SpringMVC简单例子
    Mybatis
    java静态代码块 类加载顺序问题。
    Tomcat6.0数据源配置
    解析xml的几种方式
  • 原文地址:https://www.cnblogs.com/haoxl/p/9173476.html
Copyright © 2011-2022 走看看