JS灵巧判断7种类型的方式

类型:

JavaScript 中有七种内置类型:
  1. 空值 (null)
  2. 未定义 (undefined)
  3. 布尔值 (boolean)
  4. 数字 (number)
  5. 字符串 (string)
  6. 对象 (object)
  7. 符号 (symbol,ES6中新增)

在 JS 中呢,有很多坑,本文章将结合 undersoce.js源码 和我所总结的方法准确判断这六种类型,第七种也会提供一种判断思路;

image

先来一个小测试:

首先,大家都熟悉的一种判断方式 typeof,这是一种虽然老掉牙但是有些实用的方式 :

typeof null         // "object"         <= 在后面文章里你会看到,巨坑!!!

typeof undefined            // "undefined"

typeof true         // "boolean"

typeof 42               // "number"

typeof "42"         // "string"

typeof {life: 42}               // "object"

typeof Symbol()             // "symbol"


// ------------后面3种是单独提出来的注意事项------------------

typeof void 0              // "undefined"   <= 这是一个非常实用的技巧,我将在后面解释;

typeof [1,2,3]             // "object"  <= 数组 其实也是对象,巨坑!!!

typeof function a() { }     // "function" 
image

巧用 “ ! ” 号:

!null              // true             <= 这是一个非常巧妙的技巧,下面将解释;

!undefined         // true             <= 这是一个非常巧妙的技巧,下面将解释;

------------我们不一样!!!------------

!123              // false

!true             // false

!{a: 123}         // false

!function a() { }         // false

!'123'            // false

有了这个区别,我们可以做一些有趣的事情,这是在 undersoce.js 源码里面学到的技巧,这样能够准确地排除 null 和 undefined

image

无敌法 “ .toString.call() ”:

当然 Object.prototype.toString.call 也可以换成 Object.prototype.toString.apply

Object.prototype.toString.call(null)        // "[object Null]"

Object.prototype.toString.call(undefined)   // "[object Undefined]"

Object.prototype.toString.call(123)         // "[object Number]"

Object.prototype.toString.call(true)        // "[object Boolean]"

Object.prototype.toString.call('123')       // "[object String]"

Object.prototype.toString.call({a: 123})    // "[object Object]"

Object.prototype.toString.call(Symbol())    // "[object Symbol]"


// ---------------单独出来讲的几个注意事项---------------------

Object.prototype.toString.call([1,2,3]) // "[object Array]"

Object.prototype.toString.call(function a() { })    // "[object Function]" 其实函数也是object类型

Object.prototype.toString.call(new Date)    // "[object Date]"  日期对象

Object.prototype.toString.call(Math)        // [object Math]    数学函数对象

Object.prototype.toString.call(function a() { })    // "[object Function]" 其实函数也是object类型

注1:这种方式存在兼容性问题,具体兼容性问题点击 这里 ,JavaScript 1.8.5,无法完全检测上述情况。

注2:使用这套技巧,能够准确地分辨这7种类型甚至更多更精确,而 typeof 却无法区分完全!!!!!

image

来看看 " constructor "吧:

这种方式是判断对象的构造函数是谁,至于什么是构造函数我将在另一篇文章写道;

var n1 = null;
n.constructor             // 报错:因为 null 是 JS 原型链的起点,没有构造函数;

var u = undefined;
u.constructor             // 报错:它也没有构造函数;

var a = [1, 2, 3];
a.constructor === Array;   // true  数组

var n = 123;
n.constructor === Number;  // true  数字

var s1 = '123';
abc.constructor === String  // true 字符串

var o = {a: 123};
o.constructor === Object;   // true 对象

var s = Symbol()
abc.constructor === Symbol  // true 符号

------------------单独出来讲的几个注意事项----------------------

var arr = [1, 2, 3];
arr.constructor === Array   // true 数组 能够很好地区分

var fun = function a() { };
fun.constructor === Function  // true 函数

var abc = new Date();
abc.constructor === Date;    // true 日期 

var abc = new RegExp();
abc.constructor === RegExp; // true 正则 

var abc = Math
abc.constructor === Math;   // false 不可以像Object.prototype.toString.call()一样区分;

abc.constructor === Object   // true 事实上没有Math这个构造函数,Math的构造函数在 Object上的

image

最后一招 “ instanceof ”:

注意:使用对象必须是一个 object ;

// 语法: object instanceof constructor;

var n1 = 123;            // n 是类型为 Number 的元素!!!不是对象!!!
typeof n1;               // "number"    回想一下我们有7种类型
n1 instanceof Number;     // false   function Number() { }

var n2 = new Number(123)  // 现在 n2 是一个 object 元素!!!
typeof n2;               // "object"
n2 instanceof Number;     // true

正如,上述方式所说,这种方式只适合判断 object !!!

var a = [1, 2, 3];      // 在最开始就声明了,数组也是对象,此法可以用来判断数组;

a instanceof Array;     // 而这个对象的构造函数是 function Array() { }

// 虽然 typeof null 也是 object 但这是最底层的元素

在这里我就不过多举例子了,你如果不知道原型链的东西,那就先记住 instanceof 能判断数组吧!!

阅读声明:法1都是来源于 underscore.js 源码:

空值 (null):

法1:直接用严格等于判断。
var isNull = function (obj) {
    return obj === null;
};

这是最直接并且有效的方式;

法2:巧妙地利用 ! null 的结果为 true:
var isNull = function (obj) {
    return !obj && typeof obj === "object";
};

此方法虽然很巧妙,但是没有法1直接;

未定义 (undefined)

法1:这是最推荐的方式。
var isUndefined = function (obj) {
    return obj === void 0;
}

很多常见的工具库都采用这种方式,极力推荐!!!;

法2:直接利用 typeof 判断:
var isUndefined = function (obj) {
    return typeof obj === "undefined";
}

这种方式,也是相对稳定的;

注意:

  1. 在全局条件下 undefined 是不可以被修改的。
  2. 在局部条件下 undefined 在某种情况下是可以被修改的。
  3. 请狠狠地戳这里,看官方文档解释。
(function(undefined) {
   console.log(undefined);        // "123"
})('123')

布尔值 (boolean)

这里其实我也有疑惑,为什么 underscore.js 会这样判断,读者知道可以联系我;

var toString = Object.prototype.toString;

var isBoolean = function (obj) {
    return obj === true || obj === false || toString.call(obj) === '[object Boolean]';
}

类似地,我们采用 .constructor 和 typeof 的方式也可以实现判断。

数字 (number)

var toString = Object.prototype.toString;

var isNumber = function (obj) {
    return toString.call(obj) === '[object Number]';
}

类似地,我们采用 constructortypeof 的方式也可以实现判断。

字符串 (string)

var toString = Object.prototype.toString;

var isString = function (obj) {
    return toString.call(obj) === '[object String]';
}

类似地,我们采用 constructortypeof 的方式也可以实现判断。

对象 (object)

var toString = Object.prototype.toString;

var isObject = function (obj) {
    var type = typeof obj;
    return type === 'function' || type === 'object' && !!obj;
}

这里,是我最疑惑的地方,为什么要用 !!obj

  1. typeof null === object 结果为 true ;
  2. 最开始我已经讲了一种,!obj 的方式,nullundefined 返回结果都为 true 而其他类型为 false;
  3. 以上面这种实现方式,如果传递值为 null 的时候,就会被 !!obj 过滤掉;

或者动手试试,将 && !!obj 删掉,看看能否达到预期效果。

其他:

其实上文已经给出思路实现,Date, Math, RegExp等内置对象,我就不详谈了,用得较少:

数组(Array)

法1: 最稳妥的办法:
Object.prototype.toString.call([1,2,3]) // "[object Array]"

老老实实地用这个方法吧!!!

法2:instanceof 法,仅为拓展:
var a = [1, 2, 3];      // 在最开始就声明了,数组也是对象,此法可以用来判断数组;

a instanceof Array;     // 而这个对象的构造函数是 function Array() { }
法3:构造函数法,仅为拓展
var a = [1, 2, 3];
a.constructor === Array;   // true  数组

注:如果 a = null ,还要报错,这种方式坚决不推荐!!!

法4:检查原型的构造函数,仅为拓展:
var a = [1, 2, 3];

a.__proto__.constructor === Array

其实法2-4都是属于一种思路,判断这个对象的构造函数是否为数组,仅仅实现方式不同罢了。

参考和鸣谢:

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

推荐阅读更多精彩内容