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. C# 中关于 T 泛型【C# 基础】

    〇.前言 C# 里面的泛型不仅可以使用泛型函数.泛型接口,也可以使用泛型类.泛型委托等等.在使用泛型的时候,它们会自行检测你传入参数的类型,因此它可以为我们省去大量的时间,不用一个个编写方法的重载.与 ...

  2. 【HCDG城市行东莞站】松山湖开发者村助力企业释放数字新动能

    本文分享自华为云社区<[HCDG城市行东莞站]从"数据治理"洞察"数字化运营之道",松山湖开发者村助力企业释放数字新动能!>,作者:华为云社区精选. ...

  3. Redis从入门到放弃(11):雪崩、击穿、穿透

    1.前言 Redis作为一款高性能的缓存数据库,为许多应用提供了快速的数据访问和存储能力.然而,在使用Redis时,我们不可避免地会面对一些常见的问题,如缓存雪崩.缓存穿透和缓存击穿.本文将深入探讨这 ...

  4. 【matplotlib基础】--子图

    使用Matplotlib对分析结果可视化时,比较各类分析结果是常见的场景.在这类场景之下,将多个分析结果绘制在一张图上,可以帮助用户方便地组合和分析多个数据集,提高数据可视化的效率和准确性. 本篇介绍 ...

  5. C++ 算法竞赛、02 周赛篇 | AcWing 第2场周赛

    AcWing 第2场周赛 竞赛 - AcWing 3626 三元一次方程 AcWing 3626. 三元一次方程 - AcWing 两层循环 #include <iostream> usi ...

  6. Linux下Python环境安装

    Linux通常都附带Python环境,但是Linux附带的大多数Python都是2.7.5版本.如果我们想使用Python3或者Anaconda3,最好安装一个新的Python3环境,但不要尝试删除P ...

  7. 【算法】湖心岛上的数学梦--用c#实现一元多次方程的展开式

    每天清晨,当第一缕阳光洒在湖面上,一个身影便会出现在湖心小岛上.她坐在一块大石头上,周围被茂盛的植物环绕,安静地沉浸在数学的世界中. 这个姑娘叫小悦,她的故事在这个美丽的湖心小岛上展开.每天早晨,她都 ...

  8. 实现自动扫描工作区npm包并同步cnpm

    省流版: npx cnnc 为避免包名重复,取了2个单词的首尾,cnpm sync 前言 在开发一个多npm包的项目时,时常会一次更新多个包的代码,再批量发布到 npm 镜像源后. 由于国内网络环境的 ...

  9. 【解惑】孜孜不倦,用足球赛程详解c#中的yield return用法

    在一个知名企业赞助的足球联赛中,有256支球队参赛.为了确保比赛的顺利进行,企业指派了小悦负责熬夜加班制定每一个球队的赛程.尽管她对足球的了解并不多,但是她对待工作的认真态度却让人钦佩. 在小悦的努力 ...

  10. 如何在.NET电子表格应用程序中创建流程图

    前言 流程图是一种常用的图形化工具,用于展示过程中事件.决策和操作的顺序和关系.它通过使用不同形状的图标和箭头线条,将任务和步骤按照特定的顺序连接起来,以便清晰地表示一个过程的执行流程. 在企业环境中 ...