快捷導(dǎo)航

JavaScript中檢測(cè)數(shù)據(jù)類型的四種方法總結(jié)

更新時(shí)間：2023年04月14日 11:31:12 作者：施主來了

這篇文章主要為大家詳細(xì)介紹了四個(gè)JavaScript中檢測(cè)數(shù)據(jù)類型的常用方法，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以參考一下

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

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

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

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

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

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

局限性：由于可以基于__proto__或者prototype改動(dòng)原型鏈的動(dòng)向，所以基于instanceof檢測(cè)出來的結(jié)果并不一定是準(zhǔn)確的。而基本數(shù)據(jù)類型的值，連對(duì)象都不是，更沒有__proto__，雖說也是所屬類的實(shí)例，在JS中也可以調(diào)取所屬類原型上的方法，但是instanceof是不認(rèn)的。

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

檢測(cè)數(shù)據(jù)類型3：constructor

這是實(shí)例所屬類原型上的屬性，指向的是類本身，但其也是可以進(jìn)行修改，與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

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

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

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

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]

雖然檢測(cè)數(shù)據(jù)類型4相對(duì)來說最好，但格式稍微繁瑣一些，是不是可以想辦法封裝一個(gè)方法，輸出結(jié)果類似于typeof那種，直接輸出如number、date、regexp這種，確實(shí)是有的。

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中用來檢測(cè)數(shù)據(jù)的方法，可以達(dá)到我們說的需求。

當(dāng)然，現(xiàn)在公司的項(xiàng)目中用jQuery的已經(jīng)不多了，面試會(huì)問的就更少了，但是其中的很多方法和思想還是值得我們?nèi)パ芯俊?/p>

到此這篇關(guān)于JavaScript中檢測(cè)數(shù)據(jù)類型的四種方法總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript檢測(cè)數(shù)據(jù)類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: