• 技术文章 >web前端 >js教程

    javascript怎么判断数据类型

    青灯夜游青灯夜游2021-06-09 14:26:53原创104

    js判断数据类型的方法:1、利用typeof操作符,语法“typeof 变量”;2、利用instanceof运算符;3、利用constructor属性,语法“变量.constructor==数据类型”;4、利用toString()函数。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    javascript判断数据类型的方法

    1、typeof

      typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。

      返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 7 种:string、number、boolean、symbol、undefined、object、function 等。

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

    总结:

      其中,null 有属于自己的数据类型 Null ,引用类型中的数组、日期、正则 也都有属于自己的具体类型,而 typeof 对于这些类型的处理,只返回了处于其原型链最顶端的 Object 类型。

    2、instanceof

      instanceof 检测的是原型,表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。

    [] instanceof Array; // true
    new Date() instanceof Date;// true
     
    function Person(){};
    new Person() instanceof Person;//true
     
    [] instanceof Object; // true
    new Date() instanceof Object;// true
    new Person instanceof Object;// true

      虽然 instanceof 能够判断出 [ ] 是Array的实例,但它认为 [ ] 也是Object的实例,为什么呢?

      从 instanceof 能够判断出 [ ].__proto__ 指向 Array.prototype,而 Array.prototype.__proto__ 又指向了Object.prototype,最终 Object.prototype.__proto__ 指向了null,标志着原型链的结束。因此,[ ]、Array、Object 就在内部形成了一条原型链,如下图所示:

       从原型链可以看出,[] 的 __proto__ 直接指向Array.prototype,间接指向 Object.prototype,所以按照 instanceof 的判断规则,[] 就是Object的实例。依次类推,类似的 new Date()、new Person() 也会形成一条对应的原型链 。

      因此,instanceof 只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型。

      针对数组的这个问题,ES5 提供了 Array.isArray() 方法 。该方法用以确认某个对象本身是否为 Array 类型,而不区分该对象在哪个环境中创建。

    if (Array.isArray(value)){
       //对数组执行某些操作
    }

      Array.isArray() 本质上检测的是对象的 [[Class]] 值。

      [[Class]] 是对象的一个内部属性,里面包含了对象的类型信息,其格式为 [object Xxx],Xxx 就是对应的具体类型 。对于数组而言,[[Class]] 的值就是 [object Array] 。

    【相关推荐:javascript学习教程

    3、constructor

      当一个函数 F被定义时,JS引擎会为F添加 prototype 原型,然后再在 prototype上添加一个 constructor 属性,并让其指向 F 的引用。如下图所示:

      当执行 var f = new F() 时,F 被当成了构造函数,f 是F的实例对象,此时 F 原型上的 constructor 传递到了 f 上,因此 f.constructor == F

      可以看出,F 利用原型对象上的 constructor 引用了自身,当 F 作为构造函数来创建对象时,原型上的 constructor 就被遗传到了新创建的对象上, 从原型链角度讲,构造函数 F 就是新对象的类型。这样做的意义是,让新对象在诞生以后,就具有可追溯的数据类型。

      同样,JavaScript 中的内置对象在内部构建时也是这样做的,如下图所示。

    总结:

      1. null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。

      2. 函数的 constructor 是不稳定的,这个主要体现在自定义对象上,当开发者重写 prototype 后,原有的 constructor 引用会丢失,constructor 会默认为 Object。

    4、toString

      toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。

      对于 Object 对象,直接调用 toString() 就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。

      语法:Object.prototype.toString.call(value);

    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 global] window 是全局对象 global 的引用

    更多编程相关知识,请访问:编程视频!!

    以上就是javascript怎么判断数据类型的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript 数据类型
    上一篇:JavaScript如何获取id属性 下一篇:JavaScript中typeof怎么用
    第16期线上培训班

    相关文章推荐

    • javascript怎么判断是否是json格式• javascript设置编码的方法有哪些• javascript数组排序方法是什么• javascript print方法怎么用• javascript中如何产生两个随机数

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网