面试题中经常会考js数据类型检测,今天我来分享一下js中常用的四种方法判断数据类型,欢迎指点更正。 废话不多说,直入正题。

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 {});

看看控制台输出什么

可以看到,typeof对于基本数据类型判断是没有问题的,但是遇到引用数据类型(如:Array)是不起作用的。

2.instanceof

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

暂且不考虑null和undefined(这两个比较特殊),看看控制台输出什么

可以看到前三个都是以对象字面量创建的基本数据类型,但是却不是所属类的实例,这个就有点怪了。后面三个是引用数据类型,可以得到正确的结果。如果我们通过new关键字去创建基本数据类型,你会发现,这时就会输出true,如下:

接下再来说说为什么null和undefined为什么比较特殊,实际上按理来说,null的所属类就是Null,undefined就是Undefined,但事实并非如此:控制台输出如下结果:

l浏览器压根不认识这两货,直接报错。在第一个例子你可能已经发现了,typeof null的结果是object,typeof undefined的结果是undefined

尤其是null,其实这是js设计的一个败笔,早期准备更改null的类型为null,由于当时已经有大量网站使用了null,如果更改,将导致很多网站的逻辑出现漏洞问题,就没有更改过来,于是一直遗留到现在。作为学习者,我们只需要记住就好。

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);

(这里依然抛开null和undefined)乍一看,constructor似乎完全可以应对基本数据类型和引用数据类型,都能检测出数据类型,事实上并不是如此,来看看为什么:

 function Fn(){};

 Fn.prototype=new Array();

 var f=new Fn();

 console.log(f.constructor===Fn);
console.log(f.constructor===Array);

我声明了一个构造函数,并且把他的原型指向了Array的原型,所以这种情况下,constructor也显得力不从心了。

看到这里,是不是觉得绝望了。没关系,终极解决办法就是第四种办法,看过jQuery源码的人都知道,jQuery实际上就是采用这个方法进行数据类型检测的。

4.Object.prototype.toString.call()

 var a = Object.prototype.toString;

 console.log(a.call("aaa"));
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({}));

可以看到,所有的数据类型,这个办法都可以判断出来。那就有人质疑了,假如我把他的原型改动一下呢?如你所愿,我们看一下:

可以看到,依然可以得到正确的结果。好了,今天就说到这里,欢迎关注我的博客,一起交流学习前端知识。

js检测数据类型四种办法的更多相关文章

  1. JS函数的四种调用模式

    函数在js中具有四种身份,分别为函数.方法.构造函数.apply或call调用 函数调用    函数调用模式中this指全局对象(window) var f1 = function() { alert ...

  2. node.js取参四种方法req.body,req.params,req.param,req.body

    参考:https://my.oschina.net/u/2519530/blog/535309 获取请求很中的参数是每个web后台处理的必经之路,nodejs的 express框架 提供了四种方法来实 ...

  3. Mybatis中实体类属性和数据列之间映射的四种办法

    http://blog.csdn.net/lmy86263/article/details/53150091 Mybatis不像hibernate中那么自动化,通过@Column注解或者直接使用实体类 ...

  4. JS创建对象的四种简单方式 (工厂模式和自定义构造函数创建对象的区别)

    // 对象:特指的某个事物,具有属性和方法(一组无序的属性的集合) // 特征------>属性 // 行为------>方法 // 创建对象的四种方式 1 // 1.字面量的方式,就是实 ...

  5. python面对对象编程-------5:获取属性的四种办法:@property, __setattr__(__getattr__) ,descriptor

    一:最基本的属性操作 class Generic: pass g= Generic() >>> g.attribute= "value" #创建属性并赋值 > ...

  6. JS检测数据类型

    如果你要判断的是基本数据类型或JavaScript内置对象,使用toString: 如果要判断的时自定义类型,请使用instanceof. 1.typeof typeof操作符返回的是类型字符串,它的 ...

  7. js检测数据类型的方法你都掌握了几个?

    //1.typeof检测/*var obg = {};var ary = [];var reg = /^$/;var fn = function () {};var num = 1;var bool ...

  8. mongodb shell 运行js脚本的四种方式

    1. 交互式 mongo shell   大部分的 mongodb 教程,在第一章都会讲解这种方式. mongo 127.0.0.1:27017 use test db.users.findOne() ...

  9. Qt新建线程的方法(四种办法,很详细,有截图)

    看了不少Qt线程的东西,下面总结一下Qt新建一个线程的方法. 一.继承QThread 继承QThread,这应该是最常用的方法了.我们可以通过重写虚函数void QThread::run ()实现我们 ...

随机推荐

  1. WPF中利用控件的DataContext属性为多个TextBox绑定数据

    工作上需要从给定的接口获取数据,然后显示在界面的编辑框中,以往肯定会一个一个的去赋值,但这样太麻烦而且效率很低,不利于维护,于是想到了数据绑定这一方法,数据绑定主要利用INotifyPropertyC ...

  2. vue 限制输入字符长度

    一.watch方法: <input v-model="textareaValue" type="textarea" placeholder="请 ...

  3. LODOP中的纯文本和超文本打印项

    LODOP中的的打印项,有超文本也有纯文本,超文本指的是用html语言,html里的标签为值的打印项,该种打印项会经过浏览器解析,LODOP本身不带解析超文本的引擎,调用的windows底层引擎,与i ...

  4. 网络基础之HTTP、TCP/IP、Socket

    一.HTTP相关 https://www.cnblogs.com/sunny-sl/p/6529830.html https://www.cnblogs.com/ranyonsue/p/5984001 ...

  5. ERROR 1045 (28000): Access denied for user 'xxx'@'localhost' (using password: YES)【奇葩的bug】

    #  Bug描述 今天周末,在家里学点新技术,虽然公司分配的任务没有完成(滑稽滑稽) 我先创建了一个mysql数据库,用root用户创建一个新用户,毕竟项目中使用root是非常危险的,尤其是我这样的实 ...

  6. win10应用商店打不开,错误代码0x80131500

    我也突然遇到这个问题,一开始找各种方法也解决不了.然后在外网找到方法. 很多人只是把代理开了,只要关了就可以了.这点不累述,都会提到. 我的win10应用商店有两个错误代码0x80131500和0x8 ...

  7. C++:位操作基础篇之位操作全面总结

    位操作篇共分为基础篇和提高篇,基础篇主要对位操作进行全面总结,帮助大家梳理知识.提高篇则针对各大IT公司如微软.腾讯.百度.360等公司的笔试面试题作详细的解答,使大家能熟练应对在笔试面试中位操作题目 ...

  8. JSP总结(三)——JSP中九大内置对象(汇总)

    注:后缀为汇总的基本上是整理一些网上的. 一.九大内置对象分类: 1. request  请求对象 类型 javax.servlet.ServletRequest        作用域 Request ...

  9. np.array.all()和np.array.any()函数

    np.array.all()是对np.array中所有元素进行与操作,然后结果返回True或False np.array.any()是对np.array中所有元素进行或操作,然后结果返回True或Fa ...

  10. pta寒假作业2

    题目二币值转换 题目代码 #include<stdio.h> int main (void) { int n, initial_n; scanf("%d", & ...