js中检测数据类型的常用方法(数据类型检测)

在此总结自己常用的几种js判断数据类型的方法。
定义几个变量备用:

let a="string";
let b=111;
let c={};
let d=[1,2,3];
let e=function () {
    console.log("eee");
}
let f = undefined;
let g = null;
let h = new Date();
let i = /test/;
let j = true;

1. typeof

console.log(typeof a);//string
console.log(typeof b);//number
console.log(typeof c);//object
console.log(typeof d);//object
console.log(typeof e);//function
console.log(typeof f);//undefined
console.log(typeof g);//object
console.log(typeof h);//object
console.log(typeof i);//object
console.log(typeof j);//boolean
  1. typeof可以检测出的数据类型为:
    string、
    number、
    function、
    undefined、
    boolean
  2. typeof 不能判断出object中的对象、数组等方法。typeof null也为object
  3. 此方法的返回值都是字符串数据类型。
    console.log(typeof b=="number");//true
    console.log(typeof (typeof b));//string

2. instanceof

instanceof 检测对象数据类型(js中一切接对象) 表示当左侧为右侧的实例时返回true。

console.log(a instanceof String);//false
console.log(b instanceof Number);//false
console.log(c instanceof Object);//true
console.log(d instanceof Array);//true
console.log(e instanceof Function);//true
console.log(h instanceof Date);//true
console.log(i instanceof RegExp);//true
  1. instanceof 表示当左侧为右侧的实例时返回true。所以 a 和 b 返回的是false。这是因为这里 a 和 b 为保存字符串和数字类型值得变量。不是他们的实例:
    let a=new String('string');
    let b=new Number(111);
    console.log(a instanceof String);//true
    console.log(b instanceof Number);//true
    这样通过new一个实例就为true了。
    举这个例子只是说明instanceof的使用,现实中通过instanceof检测string和number类型没有太大意义,一般不使用。
  2. 注意 instanceof 后对象类型的大小写。
  3. 此方法常用一些数据类型的判断中:
    if(d instanceof Array){//如果d为数组执行某方法
    console.log(d);
    }
    此方法有个问题:d不仅为Array的实例,也为Object的实例。
    console.log(c instanceof Object);//true
    console.log(d instanceof Object);//true
    console.log(e instanceof Object);//true
    所以此方法常用在判断中,只需要判断d是否为Array数据类型即可。

3. constructor

constructor 为实例原型上的方法,指向他的构造函数。

console.log(c.constructor===Object);//true
console.log(d.constructor===Array);//true
console.log(e.constructor===Function);//true
console.log(h.constructor=== Date);//true
console.log(i.constructor=== RegExp);//true
console.log(c.constructor===Object);//true
console.log(d.constructor===Object);//false
console.log(e.constructor===Object);//false
console.log(h.constructor=== Object);//false
console.log(i.constructor=== Object);//false

cosntructor可以解决instanceof的部分问题,之所以说是部分问题是因为:

function One() {}
function Two() {}
One.prototype = new Two();//此时将One构造函数的原型指向Two构造函数的一个实例。
let obj = new One();

console.log(obj.constructor === One);//false
console.log(obj.constructor === Two);//true

修改obj的原型为Two的实例,这时obj的constructor为Two。

这是因为:已经将One构造函数的原型指向Two构造函数的实例。虽然obj为One构造函数的实例,但是它的原型已经为Two构造函数的实例,已经没有constructor方法,根据原型链会继续向上寻找。找到的是Two

解决办法为重新手动赋值一下obj的constructor

function One() {}
function Two() {}
One.prototype = new Two();
let obj = new One();
obj.constructor=One;

console.log(obj.constructor === One);//true
console.log(obj.constructor === Two);//false

4. Object.prototype.toString.call()

let a = "string";
let b = 111;
let c = {};
let d = [1, 2, 3];
let e = function () {
    console.log("eee");
}
let f = undefined;
let g = null;
let h = new Date();
let i = /test/;
let j = true;

console.log(Object.prototype.toString.call(a) === '[object String]');//true
console.log(Object.prototype.toString.call(b) === '[object Number]');//true
console.log(Object.prototype.toString.call(c) === '[object Object]');//true
console.log(Object.prototype.toString.call(d) === '[object Array]');//true
console.log(Object.prototype.toString.call(e) === '[object Function]');//true
console.log(Object.prototype.toString.call(f) === '[object Undefined]');//true
console.log(Object.prototype.toString.call(g) === '[object Null]');//true
console.log(Object.prototype.toString.call(h) === '[object Date]');//true
console.log(Object.prototype.toString.call(i) === '[object RegExp]');//true

console.log(Object.prototype.toString.call(c) === '[object Object]');//true
console.log(Object.prototype.toString.call(d) === '[object Object]');//false
console.log(Object.prototype.toString.call(e) === '[object Object]');//false

虽然很长、很繁琐但是能够准确地判断数据类型了。

5. jquery.type()

jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( null ) === "null"
jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( /test/ ) === "regexp"

如果使用jquery可以使用jquery.type方法:很强大,还费别的劲儿干嘛。

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