在此总结自己常用的几种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
- typeof可以检测出的数据类型为:
string、
number、
function、
undefined、
boolean- typeof 不能判断出object中的对象、数组等方法。typeof null也为object
- 此方法的返回值都是字符串数据类型。
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
- 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类型没有太大意义,一般不使用。- 注意 instanceof 后对象类型的大小写。
- 此方法常用一些数据类型的判断中:
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方法:很强大,还费别的劲儿干嘛。