JS中檢測資料型別的方法及封裝一個通用的方法-有解無憂

檢測資料型別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中用來檢測資料的方法，可以達到我們說的需求，

當然，現在公司的專案中用jQuery的已經不多了，面試會問的就更少了，但是其中的很多方法和思想還是值得我們去研究，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/145130.html

標籤：JavaScript

上一篇：axios分步式回傳資料介面

下一篇：JS中的常用陣列方法