美文网首页
js检测数据类型的几种方法

js检测数据类型的几种方法

作者: Lusia_ | 来源:发表于2018-04-25 18:44 被阅读35次

1、typeof

console.log(typeof "");
console.log(typeof 1);
console.log(typeof true);
console.log(typeof null);
console.log(typeof undefined);
console.log(typeof []);
console.log(typeof function(){});
console.log(typeof {});

对应的控制台输出如下图:


image

可以看出typeof可以判断基本数据类型,但是对引用数据类型不起作用。

2、instanceof

console.log("1" instanceof String);
console.log(1 instanceof Number);
console.log(true instanceof Boolean);
console.log([] instanceof Array);
console.log(function(){} instanceof Function);
console.log({} instanceof Object);
console.log(null instanceof Null);
console.log(undefined instanceof Undefined);

对应的控制台输出如下图:


屏幕快照 2018-04-25 下午6.18.45.png

可以看到以对象字面量创建的基本数据类型,不是所属类型的实例。引用数据类型的可以返回所属类型的实例。但是通过new关键字去创建基本数据类型,就可以。

new Number(1) instanceof Number
//返回true

3、constructor

console.log(("1").constructor === String);
console.log((1).constructor === Number);
console.log((true).constructor === Boolean);
//console.log((null).constructor === Null);
//console.log((undefined).constructor === Undefined);
console.log(([]).constructor === Array);
console.log((function() {}).constructor === Function);
console.log(({}).constructor === Object);

对应控制台中输出:


按照上图constructor看起来可以检测出所有的数据类型,那看一下下面的例子:

function Fn(){};
Fn.prototype=new Array();
var f=new Fn();
console.log(f.constructor===Fn);
console.log(f.constructor===Array);
image

结果是f的constructor指向了新的原型。

4、Object.prototype.toString.call

var a = Object.prototype.toString;

console.log(a.call("a"));
console.log(a.call(1));
console.log(a.call(true));
console.log(a.call(null));
console.log(a.call(undefined));
console.log(a.call([]));
console.log(a.call(function() {}));
console.log(a.call({}));

输出结果:


屏幕快照 2018-04-25 下午6.34.31.png

再试一下改变原型,是否还可以正确输出:

function Fn(){};

Fn.prototype=new Array();

var f=new Fn();
console.log(Object.prototype.toString.call(Fn));
console.log(Object.prototype.toString.call(f));

输出结果:


屏幕快照 2018-04-25 下午6.38.46.png

所以最好使用Object.prototype.toString.call(data)检测数据的类型更好一些。

相关文章

网友评论

      本文标题:js检测数据类型的几种方法

      本文链接:https://www.haomeiwen.com/subject/xfiylftx.html