js four data type judgment methods

1. typeof

Typeof is an operator, which can be used in two ways: (1) typeof (expression); (2) Typeof variable name; The return value is a string used to describe the data type of the variable; So you can use this to judge number,   string,   object,   boolean,   function,   undefined,   symbol   The contents returned in each of these seven types are shown in the following table

typeresult
String'string'
Number'number'
Boolean'boolean'
Undefined'undefined'
Object'object'
Function function'function'
Symbol'symbol'

Small trial ox knife

//  character string
console.log(typeof('lili')); // string
//  number
console.log(typeof(1)); // number
//  Boolean value
console.log(typeof(true)); // boolean
// undefined
console.log(typeof(undefined)); // undefined
//  object
console.log(typeof({})); // object
//  array
console.log(typeof([])); // object
// null
console.log(typeof(null)); // object
//  function
console.log(typeof(() => {})); // function
//  Symbol value
console.log(typeof(Symbol())); // symbol

2. instanceof

The instanceof operator is used to detect the of the constructor   Whether the prototype attribute appears on the prototype chain of an instance object. The return value is a Boolean value, which is used to indicate whether a variable belongs to an instance of an object.

object instanceof constructor

Small trial ox knife

const arr = [1, 2];
//  Judge whether the prototype of the Object is on the prototype chain of the array
console.log(arr instanceof Object); // true
//  Prototype of array arr
const proto1 = Object.getPrototypeOf(arr);
console.log(proto1); // []
//  Prototype of array arr
const proto2 = Object.getPrototypeOf(proto1);
console.log(proto2); // []
//  prototype of Object
console.log(Object.prototype);
//  Judge whether the prototype of arr is equal to the prototype of Object
console.log(proto1 === Object.prototype); // false
//  Judge whether the prototype of the arr prototype is equal to the prototype of the Object
console.log(proto2 === Object.prototype); // true

3. constructor

In fact, this judgment method involves the relationship between prototype, constructor and instance. A deeper explanation will be put in the following content. Next, we only need to briefly understand the relationship between the three.

When defining a function (constructor), the JS engine will add a prototype for it. The prototype has its corresponding constructor attribute pointing to the constructor, so that the prototype and constructor know each other. When the constructor is instantiated, a corresponding instance will be generated. Its instance can access the constructor attribute on the corresponding prototype, so that the instance can know who generated itself, so that it can know its data type after the new object is generated.

Small trial ox knife

const val1 = 1;
console.log(val1.constructor); // [Function: Number]
const val2 = 'abc';
console.log(val2.constructor); // [Function: String]
const val3 = true;
console.log(val3.constructor); // [Function: Boolean]

Although this method can judge its data type, it has two disadvantages:

  1. null and undefined are invalid objects, so there will be no constructor. These two types of data need to be judged in other ways.

  2. The constructor of the function is unstable, which is mainly reflected in the user-defined Object. When the developer rewrites the prototype, the original constructor reference will be lost, and the constructor will default to Object

4. toString()

toString()   yes   Object   The prototype method of the current object. By calling this method, it returns [[Class]] of the current object by default. This is an internal attribute in the format [object Xxx]  , Where Xxx is the type of object. Therefore, the Object.prototype.toString() method can be used to accurately judge the type of variables. The results returned by this type for different variable types are as follows:

data typeresult
Number[object Number]
String[object String]
Object[object Object]
Array[object Array]
Boolean[object Boolean]
Function[object Function]
Null[object Null]
Undefined[object Undefined]
Symbol[object Symbol]

Using this method, it is easy to build a type discrimination function. The code is as follows:

function type(target) {
    const ret = typeof(target);
    const template = {
        "[object Array]": "array", 
        "[object Object]":"object",
        "[object Number]":"number - object",
        "[object Boolean]":"boolean - object",
        "[object String]":'string-object'
    }
    if(target === null) {
        return 'null';
    }
    else if(ret == "object"){
        const str = Object.prototype.toString.call(target);
        return template[str];
    }
    else{
        return ret;
    }
}

console.log(type({})); // object
console.log(type(123)); // number
console.log(type('123')); // string

 

Tags: Javascript Front-end css

Posted on Mon, 22 Nov 2021 01:41:26 -0500 by apw