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. Windows 下搭建 Appium + Android+python 自动化测试环境

    前言 本来并不打算写这么一篇文章,但是实践下来发现网上的各种教程里大致有两个问题.一是文章有些跟不上时代,目前android开发和测试的技术更新都比较快,内容有些过期.二是细节部分不是太完整,拼拼凑凑 ...

  2. JS逆向实战21——某查查webpack密码加密

    声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 网站 aHR0cHM6Ly ...

  3. 论文解读(CBL)《CNN-Based Broad Learning for Cross-Domain Emotion Classification》

    Note:[ wechat:Y466551 | 付费咨询,非诚勿扰 ] 论文信息 论文标题:CNN-Based Broad Learning for Cross-Domain Emotion Clas ...

  4. 如何用PHP写接口

    当用PHP编写API接口时,可以使用PHP中的框架(如Laravel.Symfony.CodeIgniter等)来简化开发过程.接下来,以使用Laravel框架为例,提供一个简单的示例代码: 首先,确 ...

  5. 性能调优 session 1 - 计算机体系结构 量化研究方法

    近期本人参与的存储系统项目进入到性能调优阶段,当前系统的性能指标离项目预期目标还有较大差距.本人一直奉行"理论指导下的实践",尤其在调试初期,更要抓住主要矛盾,投入最少的资源来获取 ...

  6. QA|requests接口请求失败而postman请求成功原因排查|Requests

    requests接口请求失败而postman请求成功原因 代码如下 1 def ihrm_login(login_data, url1): 2 """login_data ...

  7. iOS交叉编译

    编译objc程序 ~/toolchain4/pre/bin/arm-apple-darwin9-gcc -arch arm -lobjc -framework CoreFoundation -fram ...

  8. springboot3框架搭建

    Spring Boot 3.0.0已经发布一段时间了,越来越多的公司考虑将技术框架升级到最新版本,JDK也相应要求JDK17以上.对应Spring Boot 2.x的版本,建议先升级到Spring B ...

  9. shell、python时间函数小结

    有时需要写一些定时任务脚本,简单总结一下,备忘. 1. 获取当前时间 python 在windows下精确到0.001秒,linux下时间精度为0.000001秒 >>> impor ...

  10. Vue3中的几个坑,你都见过吗?

    Vue3 目前已经趋于稳定,不少代码库都已经开始使用它,很多项目未来也必然要迁移至Vue3.本文记录我在使用Vue3时遇到的一些问题,希望能为其他开发者提供帮助. 1. 使用reactive封装基础数 ...