JavaScript中怎么检测数据类型

本篇内容介绍了“JavaScript中怎么检测数据类型”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

检测数据类型1：typeof

其返回结果都是字符串，字符串中包含了对应的数据类型 number/string/boolean/undefined/symbol/object/function；

局限性：检测null返回的是object，检测其他如数组、正则等特殊对象时，返回的结果都是object，无法区分具体类型。

console.log(typeof 12); //=>"number"
console.log(typeof null); //=>"object"
console.log(typeof []); //=>"object"
console.log(typeof /^$/); //=>"object"

检测数据类型2：instanceof

用于检测某个实例是否属于这个类，其检测的底层机制是所有出现在其原型链上的类，检测结果都是true

局限性：由于可以基于__proto__或者prototype改动原型链的动向，所以基于instanceof检测出来的结果并不一定是准确的。而基本数据类型的值，连对象都不是，更没有__proto__，虽说也是所属类的实例，在JS中也可以调取所属类原型上的方法，但是instanceof是不认的。

console.log(12 instanceof Number); //false
console.log(new Number(12) instanceof Number); //true
console.log([] instanceof Array); //true
console.log([] instanceof Object); //true

function Fn() {}
Fn.prototype.__proto__ = Array.prototype;
let f = new Fn();
console.log(f instanceof Array); //true

检测数据类型3：constructor

这是实例所属类原型上的属性，指向的是类本身，但其也是可以进行修改，与instanceof类似。

let arr = [];
console.log(arr.constructor); //ƒ Array() { [native code] }
console.log(arr.constructor === Array); //true

let n=12;
console.log(n.constructor === Number); //true

检测数据类型4：Object.prototype.toString.call([value]) / ({}).toString.call([value])  

该方法不是用来转换为字符串的，而是返回当前实例所属类的信息，其返回结果的格式为[object 所属类信息]，即[object Object/Array/RegExp/Date/Function/Null/Undefined/Number/String/Boolean/Symbol...]。

这种方式基本上没有什么局限性，是检测数据类型相对来说最准确的方式。

console.log(Object.prototype.toString.call(12)); //[object Number]
console.log(Object.prototype.toString.call([])); //[object Array]
console.log(Object.prototype.toString.call({})); //[object Object]

function fn () {}
console.log(({}).toString.call(fn)); //[object Function]
console.log(({}).toString.call(/^$/)); //[object RegExp]
console.log(({}).toString.call(new Date)); //[object Date]

虽然检测数据类型4相对来说最好，但格式稍微繁琐一些，是不是可以想办法封装一个方法，输出结果类似于typeof那种，直接输出如number、date、regexp这种，确实是有的。

var class2type = {};
var toString = class2type.toString; //=>Object.prototype.toString
var hasOwn = class2type.hasOwnProperty; //=>Object.prototype.hasOwnProperty
var fnToString = hasOwn.toString; //=>Function.prototype.toString
var ObjectFunctionString = fnToString.call(Object); //=>Object.toString() =>"function Object() { [native code] }"

"Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach(function anonymous(item) {
    class2type["[object " + item + "]"] = item.toLowerCase();
});
console.log(class2type);
/* [object Boolean]: "boolean"
[object Number]: "number"
[object String]: "string"
[object Function]: "function"
[object Array]: "array"
[object Date]: "date"
[object RegExp]: "regexp"
[object Object]: "object"
[object Error]: "error"
[object Symbol]: "symbol"
*/

function toType(obj) {
    //=>obj may be null / undefined
    //=>return "null"/"undefined"
    if (obj == null) {
        return obj + "";
    }

    return typeof obj === "object" || typeof obj === "function" ? class2type[toString.call(obj)] || "object" : typeof obj;
}

这是jQuery中用来检测数据的方法，可以达到我们说的需求。

“JavaScript中怎么检测数据类型”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！