JavaScript中怎么檢測數(shù)據(jù)類型

本篇內(nèi)容介紹了“JavaScript中怎么檢測數(shù)據(jù)類型”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

檢測數(shù)據(jù)類型1：typeof

其返回結(jié)果都是字符串，字符串中包含了對應的數(shù)據(jù)類型 number/string/boolean/undefined/symbol/object/function；

局限性：檢測null返回的是object，檢測其他如數(shù)組、正則等特殊對象時，返回的結(jié)果都是object，無法區(qū)分具體類型。

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

檢測數(shù)據(jù)類型2：instanceof

用于檢測某個實例是否屬于這個類，其檢測的底層機制是所有出現(xiàn)在其原型鏈上的類，檢測結(jié)果都是true

局限性：由于可以基于__proto__或者prototype改動原型鏈的動向，所以基于instanceof檢測出來的結(jié)果并不一定是準確的。而基本數(shù)據(jù)類型的值，連對象都不是，更沒有__proto__，雖說也是所屬類的實例，在JS中也可以調(diào)取所屬類原型上的方法，但是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

檢測數(shù)據(jù)類型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

檢測數(shù)據(jù)類型4：Object.prototype.toString.call([value]) / ({}).toString.call([value])  

該方法不是用來轉(zhuǎn)換為字符串的，而是返回當前實例所屬類的信息，其返回結(jié)果的格式為[object 所屬類信息]，即[object Object/Array/RegExp/Date/Function/Null/Undefined/Number/String/Boolean/Symbol...]。

這種方式基本上沒有什么局限性，是檢測數(shù)據(jù)類型相對來說最準確的方式。

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]

雖然檢測數(shù)據(jù)類型4相對來說最好，但格式稍微繁瑣一些，是不是可以想辦法封裝一個方法，輸出結(jié)果類似于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中用來檢測數(shù)據(jù)的方法，可以達到我們說的需求。

“JavaScript中怎么檢測數(shù)據(jù)類型”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！