美文网首页
js中五种检测数据类型方法

js中五种检测数据类型方法

作者: 希染丶 | 来源:发表于2019-05-27 10:56 被阅读0次

    背景

    最近公司项目不多,静下心来整理一些东西(不加班的feel倍儿爽)。
    js判断数据类型算是很常用的代码了,不管是项目中还是面试,必不可少啊,值得一记。

    方法

    1.typeOf

    typeOf 为一个一元运算符,放在一个运算数之前,运算数可以是任何类型。
    返回结果为一个字符串,该字符串对应运算数的数据类型。

    用法:typeOf + 运算数 或 typeOf (运算数)

    结果展示:

    typeof Symbol(); // symbol 有效,symbol为es6中第七种数据类型
    typeof ''; // string 有效
    typeof 1; // number 有效
    typeof true; //boolean 有效
    typeof undefined; //undefined 有效
    typeof new Function(); // function 有效
    typeof null; //object 无效
    typeof [] ; //object 无效
    typeof new Date(); //object 无效
    typeof new RegExp(); //object 无效
    

    注意:
    typeof null 的问题
    不同的对象在底层都表示为二进制,在 JavaScript 中二进制前三位都为 0 的话会被判
    断为 object 类型, null 的二进制表示是全 0,自然前三位也是 0,所以执行 typeof 时会返回“ object ”,typeOf对null束手无策。

    typeOf [] 的问题
    JS中因为数组也是属于对象的,所以判断是不是数组,typeOf表示:不好办啊

    同理,日期类型Date()和正则表达式RegExp() 也是属于对象,所以Date()/RegExp()/[]/null 不能用typeOf来检测

    2.instanceof

    用法: object instanceof constructor

    instanceof 同为一元运算符,用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性

    看起来比较绕,上例子

    var a = new Array();
    a instanceof Array; 
    

    instanceof 可以检测 某个对象是否为数组、日期、regexp() 类型

    注意:
    因为undefined 和null 类型,访问不到内部,所以不能用instanceof判断

    3.constructor

    constructor作用和instanceof非常相似。但constructor检测 Object与instanceof不一样,还可以处理基本数据类型的检测。

    var a = 'abc';
    a.constructor===String;//true
    a.constructor===Array;//false
    a.constructor===RegExp;//false
    (1).constructor===Number;//true
    var reg = /[0-9]/;
    reg.constructor===RegExp;//true
    reg.constructor===Object;//false
    
    

    注意:
    1.constructor 不能用于判断null和undefined (不存在constructor)
    2.如果object被重新覆盖,检测结果就会不准确

    4.严格运算符 ===

    只能用于判断null 和 undefined

    var a = null
    typeof a // "object"
    a === null // true
    

    5.Object.prototype.toString.call()

    这个方法就比较花里胡哨了,在以前的项目中也基本没用过这个方式。

    toString方法,在Object原型上的返回,是数据的格式。因为不同类型的toString方法,都被重写。
    所以obj.toString和Object.prototype.toString.call(obj)的结果不同。

    优点:可以判断所有类型
    缺点:得到的结果为'[object String]'类型的字符串,需要处理一下格式。

    console.log(Object.prototype.toString.call("jerry"));//[object String]
    console.log(Object.prototype.toString.call(12));     //[object Number]
    console.log(Object.prototype.toString.call(true));   //[object Boolean]
    console.log(Object.prototype.toString.call(undefined));//[object Undefined]
    console.log(Object.prototype.toString.call(null));   //[object Null]
    console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
    console.log(Object.prototype.toString.call(function(){}));    //[object Function]
    console.log(Object.prototype.toString.call([]));        //[object Array]
    console.log(Object.prototype.toString.call(new Date));        //[object Date]
    console.log(Object.prototype.toString.call(/\d/));        //[object RegExp]
    

    总结

    综上,可以得出结论

    Symbol、string、number、boolean、function、undefined 使用 typeOf()

    null、[]、obj、Date()、RegExp() 使用instanceof

    或者所有的类型检测都用Object.prototype.toString.call(),更有逼格。

    即可做到正确检测。
    就酱。

    相关文章

      网友评论

          本文标题:js中五种检测数据类型方法

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