1.typeof:返回一个字符串,表示操作数的类型。

语法:

    typeof(变量)
//or
typeof 变量

示例:

    console.log(typeof 2)//number
    console.log(typeof true)//boolean
    console.log(typeof 'str')//string
    console.log(typeof function () {
    })//function
    console.log(typeof console.log);//function
    console.log(typeof {})//object
    console.log(typeof [])//object
    console.log(typeof (new Date()))//object
    console.log(typeof window)////object
    console.log(typeof undefined)//undefined
    console.log(typeof null)//object
    console.log(typeof Symbol());      //symbol(es6)
    console.log(typeof 23423n);        //bigint(谷歌67版本新提出)

总结:

  • typeof 的返回类型为字符串,值有:number、boolean、string、object、function、undefined、symbol、bigint
  • typeof 一般用来判断基本数据类型,除了判断null会输出"object",其它都是正确的
  • typeof 判断引用数据类型时,除了判断函数会输出"function",其它都是输出"object"

注意:这里涉及两个经常考的面试题!

  • null 的数据类型是object (null是一个空的引用对象,是一个占位符)
  • console.log 的数据类型是function
  • 对于引用数据类型的判断,使用typeof并不准确,所以可以使用instanceof来判断引用数据类型

2.instanceof:用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。可以正确判断对象的类型,其内部运行机制是判断在其原型链中能否找到该类型的原型。

语法:

obj1 instanceof obj2 //obj1 是否是 obj2的实例

示例:

    console.log(2 instanceof Number)//false
console.log(true instanceof Boolean)//false
console.log('str' instanceof String)//false
console.log([] instanceof Array)//true
console.log(function () {
} instanceof Function)//true
console.log({} instanceof Object)//true

总结:

  • instanceof 只能正确判断引用数据类型,而不能判断基本数据类型。
  • instanceof 返回值为布尔值

注意:

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

3.constructor:该属性本来是原型对象上的属性,指向构造函数。但是根据实例对象寻找属性的顺序,若实例对象上没有实例属性或方法时,就去原型链上寻找,因此,实例对象也是能使用constructor属性的。

示例:

    var num = 123;
console.log(num.__proto__)//Number {0, constructor: ƒ, toExponential: ƒ, toFixed: ƒ, toPrecision: ƒ, …}
console.log(num.constructor)// Number() { [native code] }
console.log(num.constructor == Number)//true

补充:

    function Person() {
} var Tom = new Person();
// undefined和null没有constructor属性,所以只有在确定待判断的值不是undefined和null才能使用
console.log(Tom.constructor == Person)//true
console.log((123).constructor == Number)//true
console.log('abcdef'.constructor == String)//true
console.log((true).constructor == Boolean)//true
console.log([1, 2, 3, 4].constructor == Array)//true
console.log(new Date().constructor == Date)//true
console.log(new Error().constructor == Error)//true
console.log(window.constructor == Window)//true

总结:

所有对象(使用 Object.create(null) 创建的对象除外)都将具有 constructor 属性。在没有显式使用构造函数的情况下,创建的对象(例如对象和数组文本)将具有 constructor 属性,这个属性指向该对象的基本对象构造函数类型。  

注意:

  • null和undefined是无效的对象,所以他们不会有constructor属性!
  • 函数的constructor是不稳定的,主要是因为开发者可以重写prototype,如果创建一个对象来改变它的原型,constructor 就不能用来判断数据类型了:
    function Fn() {
}
var f_test = new Fn()
console.log(f_test.constructor == Fn)//true
```
修改其prototype后
```
Fn.prototype = new Array()
var f_test = new Fn()
console.log(f_test.constructor == Fn)//false
console.log(f_test.constructor == Array)//true

4.Object.prototype.toString.call()

   官网解释:每个对象都有一个 toString() 方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。默认情况下,toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 "[object type]",其中 type 是对象的类型。以下代码说明了这一点:

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

示例:

    console.log(Object.prototype.toString.call(''));              // [object String]
console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call(true)); // [object Boolean]
console.log(Object.prototype.toString.call(Symbol())); // [object Symbol]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(new Function())); // [object Function]
console.log(Object.prototype.toString.call(new Date())); // [object Date]
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call(new RegExp())); // [object RegExp]
console.log(Object.prototype.toString.call(new Error())); // [object Error]
console.log(Object.prototype.toString.call(document)); // [object HTMLDocument]
console.log(Object.prototype.toString.call(window)); // [object global] window 是全局对象 global 的引用

参考:JS中检测数据类型的四种方法

js检测数据类型得四种方式的更多相关文章

  1. JS中检测数据类型的四种方式及每个方式的优缺点

    //1.typeof 用来检测数据类型的运算符 //->typeof value //->返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number". ...

  2. js 复制文本的四种方式

    js 复制文本的四种方式 一.总结 一句话总结:js文本复制主流方法:document的execCommand方法 二.js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.c ...

  3. js 实现复制功能的四种方式的优劣对比

    今日网上浏览别人项目,看到有人用了document.execCommand这个属性,于是想起之前我选用Clipboard.js 来实现.对于这种不常用的属性还是不太放心,于是随手查了下关于复制的资料, ...

  4. JS中检测数据类型的几种方式及优缺点【转】

    1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string&quo ...

  5. JS中检测数据类型的几种方式及优缺点

    1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string&quo ...

  6. JS中检测数据类型的四种方法

    1.typeof 用来检测数据类型的运算符->typeof value->返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."st ...

  7. js中检测数据类型的几种方式

    1.typeof 一元运算符,用来检测数据类型.只可以检测number,string,boolean,object,function,undefined. 对于基本数据类型是没有问题的,但是遇到引用数 ...

  8. js动态引入的四种方式

    index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...

  9. 在javaScript中检测数据类型的几种方式

    类型检测的方法 typeof instanceof Object.protype.toString constructor duck type:鸭子类型 typeof 返回一个字符串,适合函数对象和基 ...

  10. js判断数据类型的四种方法

    1.typeof typeof是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型.返回的结果用该类型的字符串(全小写字母)形式表示,包括number,string,boolean,und ...

随机推荐

  1. K8S | Service服务发现

    服务发现与负载均衡. 一.背景 在微服务架构中,这里以开发环境「Dev」为基础来描述,在K8S集群中通常会开放:路由网关.注册中心.配置中心等相关服务,可以被集群外部访问: 对于测试「Tes」环境或者 ...

  2. 一款开源免费、更符合现代用户需求的论坛系统:vanilla

    对于个人建站来说,WordPress相信很多读者都知道了.但WordPress很多时候我们还是用来建立自主发布内容的站点为主,适用于个人博客.企业主站等.虽然有的主题可以把WordPress变为论坛, ...

  3. [python]使用faker库生成测试数据

    简介 Faker库可用于随机生成测试用的虚假数据. 可生成的数据参考底部的参考链接. 安装: python -m pip install faker 快速入门 from faker import Fa ...

  4. MyBatis-Plus批量插入方法saveBatch

    1. saveBatch能否提高插入的效率? 先说结论,saveBatch()方法也是一条一条的插入,也就是说它会产生多条insert语句,而不是一条insert语句,所以它不是真正的批量插入,更不能 ...

  5. 第一个程序PingPong

    功能需求 如图所示,开启两个ping类型的服务ping1和ping2,ping1给ping2发消息,ping2收到回应ping1,ping1收到再回应ping2,不断循环. 服务模块 Skynet提供 ...

  6. RabbitMQ 如何实现延迟队列?

    延迟队列是指当消息被发送以后,并不是立即执行,而是等待特定的时间后,消费者才会执行该消息. 延迟队列的使用场景有以下几种: 未按时支付的订单,30 分钟过期之后取消订单. 给活跃度比较低的用户间隔 N ...

  7. Stream流的应用

    Stream流的应用 Collectors.groupingBy(ShopCartItemDto::getShopId) stream()方法将该列表转化为一个流,可以对其中的元素进行操作. coll ...

  8. 【RocketMQ】【源码】延迟消息实现原理

    RocketMQ设定了延迟级别可以让消息延迟消费,延迟消息会使用SCHEDULE_TOPIC_XXXX这个主题,每个延迟等级对应一个消息队列,并且与普通消息一样,会保存每个消息队列的消费进度(dela ...

  9. Z-Blog火车头免登录发布教程+插件3.2+支持最新Z-Blog1.7

    Z-Blog免登录采集评论,之前没有加入评论接口,今天把评论接口写好了,写一下简单的教程,(采集评论规则是一件很麻烦的事)有时候采集文章的时候也采集评论,今天教大家怎样用我的Z-Blog免登录采集插件 ...

  10. 2023 ICPC 网络赛 II

    开场顺着读了 AC 不会,B 是 KDT 优化建图板子,让 zsy 确认了一下并制止他现在做.把 D 转化转化成了经典问题·,当时以为是网络流,所以 zsy 签完 M 就上去写了,写一半发现假了,问了 ...