JS data type

In js, data can be divided into the following two types according to the different storage methods (see link at the end of this article) :

  • The original type

    string, number, boolean, undefined, null, symbol

  • Reference types

    Object (Array, Function, RegExp, Date)

Data type judgment

Determine the type of data This section lists four methods and describes the range and limitations of each method. If you are not familiar with the prototype chain, please read the relevant prototype chain knowledge first (see the end of the article).

  1. typeof

    Typeof is generally only used to determine the original type (excluding NULL) and returns a string of that type

    console.log(typeof 'str');  // string
    console.log(typeof 1);      // number
    console.log(typeof true); // boolean
    console.log(typeof undefined); // undefined
    console.log(typeof Symbol()); // symbol
    Copy the code

    Note: Typeof cannot be used to judge null in primitive types and reference type object. The result will return the string object(except for Function types, which return Function, but object on IE 6, 7, and 8).

    console.log(typeof null);  // object
    console.log(typeof {}); // object
    console.log(typeof alert); // function
    console.log(typeof []); // object
    console.log(typeof new RegExp()); // object
    console.log(typeof new Date()); // object
    Copy the code
  2. contructor

    Constructor refers to the constructor of the instance

    Define a constructor Animal and new instance dog

    const Animal = function (name) {this.name = name};   // Declare a constructor
    let dog = new Animal('dog'); // Generate instance dog
    Copy the code

    / / attach a constructor property to Animal. / / attach a constructor property to Animal. / / attach a constructor to Animal. Animal. The prototype. The constructor = = = Animal / / true, according to the prototype chain for principle, Console (dog.prototype) // Animal; // Animal; // Animal; console(dog.prototype) // Animal

    console.log('1'.constructor === String);  // true
    console.log(new Number(1).constructor === Number); // true
    console.log(true.constructor === Boolean); // true
    console.log(alert.constructor === Function); // true
    console.log([].constructor === Array); // true
    console.log(new Date().constructor === Date); // true
    Copy the code

    Note:

    1. null.undefinedIs an invalid object and therefore will not existconstructorYes, these two types of data need to be judged in other ways.
    2. Constructor is unstable. This is mainly true of custom objects. When developers rewrite Prototype, the original constructor reference is lost and constructor defaults to Object

    Use constructor to judge that types are too restrictive and inaccurate, error-prone, use them sparingly, or not at all!

  3. instanceof

    Unlike typeof and constructor, instanceof is generally used to determine the typeof reference and returns a Boolean value, such as:

    [] instanceof Array // true

    Instanceof determines the type of the current data by determining whether the prototype of the current instance is the same object as the prototype of the constructor

    const self_instanceof = function (instance, constructor) {
        let instance_proto = instance.__proto__;
        let constructor_proto = constructor.prototype;
    
        while(true) {
            // Return false when the destination is found
           if (instance_proto === null) {return false};
           // Find returns true
           if (instance_proto === constructor_proto) {return true};
            // When the instance is not the same as the constructor prototype, continue up the prototype chaininstance_proto = instance_proto.__proto__; }}console.log([] instanceof Array)   // true
    console.log(self_instanceof([], Array))  // true
    Copy the code

    When a page has multiple IFrames, that is, there are multiple global variables window, the judgment of Instanceof will be interfered by data from different IFrames, resulting in unreliability

    Let arrB = []; let arrB = []; ArrB instanceof Array // False if instanceof is used in pageA, arrB instanceof Array // is false because the arrB is constructed from the Array on pageB

    To avoid this problem, use the Array static method array. isArray provided by Es6, or the toString method we’ll mention soon, to determine array. isArray(arrB) // true

  4. toString

    ToString is a method on Object.prototype, Commonly used way as the Object. The prototype. ToString. Call (target), the return value is a Object type string, this method can largely determine all of the data type (except for the custom data types)

    // Define the judgment type function
    let getType = target= > Object.prototype.toString.call(target)
    
    console.log(getType(' ')); // [object String]
    console.log(getType(2)); // [object Number]
    console.log(getType(true)); // [object Boolean]
    console.log(getType(undefined)); // [object Undefined]
    console.log(getType(null)); // [object Null]
    console.log(getType(Symbol())); // [object Symbol]
    console.log(getType({})); // [object Object]
    console.log(getType([])); // [object Array]
    console.log(getType(alert)); // [object Function]
    console.log(getType(new RegExp())); // [object RegExp]
    console.log(getType(new Date())); // [object Date]
    Copy the code

    This method is accurate and stable and recommended

Above is a few views of type judgement, have improper place, still ask big men to correct!

Please refer to relevant knowledge points and articles:

JS prototype chain and inheritance don’t get confused again