Summary of four methods for detecting data types in JavaScript

Detect data type 1: typeof

The returned results are all strings, and the string contains the corresponding data typenumber/string/boolean/undefined/symbol/object/function；

Limitations: DetectionnullThe return isobject, when detecting other special objects such as arrays and regulars, the returned results areobject, it is impossible to distinguish specific types.

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

Detect data type 2: instanceof

Used to detect whether an instance belongs to this class. The underlying mechanism of its detection is that all classes appear on its prototype chain, and the detection results are true.

Limitations: Because it can be based on__proto__orprototypeChange the trend of the prototype chain, so based oninstanceofThe detected results are not necessarily accurate. The value of the basic data type is not even an object, let alone a__proto__Although it is also an instance of the class to which it belongs, the method on the prototype of the class can also be called in JS, butinstanceofI don't recognize it.

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

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

Detect data type 3: constructor

This is the property on the prototype of the class to which the instance belongs, pointing to the class itself, but it can also be modified, andinstanceofsimilar.

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

let n=12;
( === Number); //true

Detect data type 4: ([value]) / ({}).([value])

This method is not used to convert to a string, but returns information of the class to which the current instance belongs. The format of the return result is[object class information],Right now[object Object/Array/RegExp/Date/Function/Null/Undefined/Number/String/Boolean/Symbol...]。

This method has basically no limitations and is the relatively most accurate way to detect data types.

((12)); //[object Number]
(([])); //[object Array]
(({})); //[object Object]

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

Although detecting data type 4 is relatively best, the format is a little more cumbersome. Can you find a way to encapsulate a method? The output result is similar totypeofThat kind of output directlynumber、date、regexpThere is indeed this kind of thing.

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

"Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach(function anonymous(item) {
    class2type["[object " + item + "]"] = ();
});
(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[(obj)] || "object" : typeof obj;
}

This isjQueryThe method used to detect data in can meet the needs we mentioned.

Of course, nowadays, it is used in the company's projects.jQueryThere are not many questions in the interview, and even fewer ones will be asked in the interview, but many of the methods and ideas are still worth our study.

This is the end of this article about the four methods of detecting data types in JavaScript. For more related content on JavaScript, please search for my previous articles or continue browsing the related articles below. I hope you will support me in the future!