首页> JAVASCRIPT教程

关于js typeof 与 instanceof 判断数据类型区别及开发使用

withpy 2021-10-29

简介我们经常会遇到判断一个变量的数据类型或该变量是否为空值的情况,你是如何去选择判断类型操作符的?本文来记录一下我们开发人员必须掌握关于 typeof 和 instanceof 的知识点及在开发中的使用建议,同时在面试过程中也经常会遇到这样的问题,需要的朋友可参考下文章内容

前言:

日常的开发中,我们经常会遇到判断一个变量的数据类型或者该变量是否为空值的情况,你是如何去选择判断类型的操作符的?本文来总结记录一下我们开发人员必须掌握的关于 typeof instanceof 的知识点以及在开发中的使用建议,同时在面试过程中也经常会遇到这样的问题。

1、typeof 操作符

typeof 操作符,确定任意变量的数据类型,确切说,它是判断一个变量是否为字符串、数值、布尔值或 undefined 的最好方式。其返回值为字符串类型,其使用方法如下:typeof 是一个操作符,不是一个函数,但是使用可以将变量作为参数传入: a、typeof  operand b、typeof (operand)

(1)返回值为字符串类型,其中:

返回值

含义值

"undefined"

未定义

"boolean"

布尔值

"string"

字符串

"number"

数值

 "object"

对象(而不是函数)或 null

"function"

函数

"symbol"

符号

(2)常见使用方法

        console.log(typeof undefined);//'undefined'
        console.log(typeof true);//'bpplean'
        console.log(typeof ("number"));  //'string'
        console.log(typeof "number");  //'string' 
        console.log(typeof 1);//'number'
        console.log(typeof Symbol());//'symbol'
        //对于Array,Null等特殊对象使用typeof一律返回object,这正是typeof的局限性
        console.log(typeof null);   //'object'
        console.log(typeof [1, 2, 3]);//'object'
        console.log(typeof undefined);  //'undefined'
        //通过 typeof 操作符来区分函数和其他对象
        function f1() { console.log(111); }
        console.log(typeof f1);  //'function'  
        console.log(typeof f1());  // 111 'undefined'

(3)不能通过typeof 来判断一个变量是否存在

        var a;
        if (a === undefined) {
            console.log("变量不存在")
        } else {
            console.log("变量存在")
        }
     // 变量不存在

2、instanceof 操作符

typeof虽然对原始值很有用,但它对引用值的用处不大。我们通常不关心一个值是不是对象,而是想知道它是什么类型的对象。为了解决这个问题,ECMAScript 提供了 instanceof 操作符。使用如下:

        function f1() { console.log(111); }
        console.log(f1 instanceof Object);//true
        console.log(f1 instanceof Function);//true
        console.log(f1 instanceof RegExp);//false

所有引用值都是 Object 的实例,因此通过 instanceof 操作符检测任何引用值和Object 构造函数都会返回 true

类似地,如果用 instanceof 检测原始值,则始终会返回 false ,因为原始值不是对象。

instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。其实现原理如下:

  function myInstanceof(left, right) {
    let proto = Object.getPrototypeOf(left), // 获取对象的原型
    prototype = right.prototype; // 获取构造函数的 prototype 对象
  // 判断构造函数的 prototype 对象是否在对象的原型链上
    while (true) {
      if (!proto) return false;
      if (proto === prototype) return true;
      proto = Object.getPrototypeOf(proto);
    }
 }

3、typeof 和 instanceof 的区别以及开发中的使用建议

typeof instance 都是判断数据类型的方法,区别如下:

typeof会返回一个变量的基本类型,instanceof返回的是一个布尔值

instanceof 可以准确地判断复杂引用数据类型,但是不能正确判断基础数据类型

typeof 也存在弊端,它虽然可以判断基础数据类型(null 除外),但是引用数据类型中,除了function 类型以外,其他的也无法判断

可以看到,上述两种方法都有弊端,并不能满足所有场景的需求

如果需要通用检测数据类型,建议采用Object.prototype.toString,调用该方法,统一返回格式“[object Xxx]”的字符串。使用如下:

        console.log(Object.prototype.toString.call(undefined))  //"[object Undefined]"
        console.log(Object.prototype.toString.call(true))  // "[object Boolean]"
        console.log(Object.prototype.toString.call('1'))  // "[object String]"
        console.log(Object.prototype.toString.call(1))    // "[object Number]"
        console.log(Object.prototype.toString.call(Symbol()))    // "[object Symbol]"
        console.log(Object.prototype.toString.call({}))   // "[object Object]"
        console.log(Object.prototype.toString.call(function () { }))   // "[object Function]"
        console.log(Object.prototype.toString.call([]))       //"[object Array]"
        console.log(Object.prototype.toString.call(null))    //"[object Null]"
        console.log(Object.prototype.toString.call(/123/g))     //"[object RegExp]"
        console.log(Object.prototype.toString.call(new Date()))  //"[object Date]"

总结:

到此这篇关于关于js typeof instanceof 判断数据类型区别及开发使用的文章就介绍到这了,更多相关js typeof instanceof 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

相关文章

  • java 实现黄金分割数的示例详解

    这篇文章主要介绍了java 实现黄金分割数的示例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  • 利用zabbix监控ogg进程(Linux平台)

    这篇文章主要介绍了利用zabbix监控ogg进程(Linux平台)的方法,帮助大家更好的理解和使用zabbix,感兴趣的朋友可以了解下

  • java8快速实现List转map 、分组、过滤等操作

    这篇文章主要介绍了java8快速实现List转map 、分组、过滤等操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  • python判断自身是否正在运行的方法

    今天小编就为大家分享一篇python判断自身是否正在运行的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  • 对python3 sort sorted 函数的应用详解

    今天小编就为大家分享一篇对python3 sort sorted 函数的应用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  • CentOS 7 安装Chrome浏览器的方法

    这篇文章主要介绍了CentOS 7 安装Chrome浏览器的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧