js几种数据类型的判断方法

前言

在处理数据时,数据类型的判断是经常用到的逻辑,但是判断方法有很多,选哪个方法呐?要就要看自己的业务场景了,下边来简单说下各种方法和他们的不同之处。

我这里在列举这几种判断方法的同时,主要是按照自己的理解来解释下原理,为什么他们的判断结果是这样子,所以有点啰嗦~见谅😀
发现我的理解有偏差的地方,请大家帮忙指出~谢谢~😚

1、typeof方法

说到类型判断第一个进入脑海的方法大概就是typeof了

  • 调用格式

typeof 123 //'number'
typeof '123' //'string'
typeof (6==7) //'boolean'
typeof undefined //'undefined'
typeof Symbol('1') //'symbol'
typeof []  //'object'
typeof {}  //'object'
typeof null //'object'
  • 判断特点:

通过前边的调用结果我们也发现,typeof只能判断简单数据类型以及symbol和undefined的具体数据类型;
Array、Object和null的判断结果都是'object'。
这是为什么呐?

  • 判断分析:

    js 在底层存储变量的时候,会在变量的机器码的低位1-3位存储其类型信息:

    • 000:对象(包括所有的可以被实例化对象,Array类型的数据也在其中)
    • 010:浮点数
    • 100:字符串
    • 110:布尔
    • 1:整数

    undefined和null有点特殊:
    undefined:用 −2^30 整数来表示;
    null:所有机器码均为0

typeof就是根据低位的1-3位来判断类型的,能够准确区分出number、string和boolean类型。
对象类型低位全是000,没法去区分是什么对象类型,而且还有一个大的误区,null的所有机器码都是0,当然也包括低3位,所以也被认为是object类型。
这样也就解释了我们上边每个类型的判断结果了。

  • 使用注意

本着存在即合理的理念,我们也不能说typeof判断方法是不好的,当我们了解了他的判断结果后,可以选择性的去使用。
一般用来判断当前变量是不是赋值或有没有创建。

2、instanceof方法

从字面上来看,这方法是通过判断目标数据是不是对应的构造函数的实例,来判断数据类型

  • 调用格式

'' instanceof String // false
123 instanceof Number // false
true instanceof Boolean // false
Symbol(1) instanceof Symbol // false
[] instanceof Array //true
({}) instanceof Object //true

undefined和null在判断的时候会报错,因为null和undefined都没有对应的构造函数。

  • 判断分析

其实这方法是判断当前数据是不是对应构造函数的实例,如果是的话,就属于构造函数对应的类型。
so:
1. 字面量创建的字符串、布尔值、数字是简单数据类型,不属于不是构造函数new的实例对象。所以无法通过instanceof判断类型;

String的实例字符串对象

2、Symbol不是一个构造函数,没办法去new一个实例,所以它也无法通过instanceof判断;
3、而数组和对象是符合条件的,他们是对象类型,同时也可以通过Array和Object去new出来一个实例对象。可以通过这个方法判断数据类型。
4、undefined和null作为特殊数据类型,他们的所属类是NullUndefined,但是浏览器把这两个类保护起来了,不允许我们在外面访问使用。去用这个方法判断的时候,会直接报错。大家可以试一下,我这里就不写报错过程了

  • 使用注意

这个方法可以用来区分对象类型的具体类型,但是没法判断其他类型的数据,使用场景比较小。

3、constructor方法

constructor字面上的意思就是通过判断当前数据的构造函数来判断数据类型

  • 调用

'123'.constructor == String //true
(123).constructor == Number //true
true.constructor == Boolean //true
[].constructor == Array //true
({}).constructor == Object //true
Symbol(1).constructor === Symbol //true
  • 判断分析

通过上边的调用很明显就是判断当前数据的constructor属性的指向。如果当前数据的构造函数和制定的构造函数相等,就判断其为对应的类型。

我画了一个简单的原型链示意图:

原型图

上图中Person是构造函数,person1是它的实例对象,实例对象本身是没有constructor属性的,但是根据原型链的继承原理,我们会继续到它的__proto__(原型)上去找,在原型上有个 constructor属性,指向了构造函数Person。

而我们这个方法基本上也是这个原理:
1、作为简单数据类型的'123'、123和true,它们本身不是构造函数的实例,但是他们身上有__proto__属性分别指向了String、Number、Boolaen的原型对象。而这个原型下边的constructor属性指向了对应的构造函数。


2、Symbol本身不是构造函数,但是通过Symbol(1)创建的Symbol类型的值却有一个'constructor'属性指向了Symbol函数,所以他也可以通过这个方法判断数据类型。

3、 关于undefined和null这两个大冤种,大家看下边的截图就明白了:
大冤种的无奈

  • 使用注意

通过上边的介绍我们发现了,constructor方法是除了undefined和null之外,其他常见数据类型都能判断,到现在我们发现这些方法都有自己的缺陷,不仅感叹:“世间安有双全法,不负如来不负卿”。
但是接下来这个方法就是我们期盼已久的全能型选手了~

4、Object.prototype.toString.call()

直接上调用方法示例:

Object.prototype.toString.call('123')
==>'[object String]'
Object.prototype.toString.call(123)
==>'[object Number]'
Object.prototype.toString.call([123])
==>'[object Array]'
Object.prototype.toString.call(true)
==>'[object Boolean]'
Object.prototype.toString.call({a:123})
==>'[object Object]'
Object.prototype.toString.call(Symbol(1))
==>'[object Symbol]'
Object.prototype.toString.call(null)
==>'[object Null]'
Object.prototype.toString.call(undefined)
==>'[object Undefined]'
  • 判断分析

通过以上的示例大家也发现了这个方法可以判断所有类型,其实是因为js中有句话:万物皆对象,Object中有toString方法,所有对象最后原型链的尽头都是Object的原型。
通过call()来改变了方法的this指向,this指向了我们需要判断的数据,也就返回了各自对应的type。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容