[007] — four data type judgment methods that must be known in JS

The original intention of this series of articles is to “let each front-end engineer master the high frequency knowledge, for the work of power”. This is the front end of the seventh cut, I hope friends pay attention to the public number “kite”, armed with knowledge of their minds.

Js has a variety of data types (Number (value), String (String), Boolean (Boolean), Null, Undefined, Symbol, Object, function, etc.), it is inevitable to determine the data type in the development process, this paper summarizes the four judgment methods:

7.1 typeof

Typeof is an operator that can be used in two ways :(1) typeof(expression); (2) Typeof variable name; The return value is a string indicating the data type of the variable; Number, string, object, Boolean, function, undefined, and symbol are used to determine the types of number, string, object, Boolean, function, undefined, and symbol.

A profound

/ / string
console.log(typeof('lili')); // string
/ / digital
console.log(typeof(1)); // number
/ / a 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
Copy the code

7.2 instanceof

The instanceof operator checks whether the constructor’s prototype property appears on the prototype chain of an instance object and returns a Boolean value indicating whether a variable belongs to an instanceof an object. The syntax is as follows :(specific progression can be seen at the front end of the 100 cut [001])

object instanceof constructor
Copy the code

A profound

const arr = [1.2];
// Check if Object's prototype is in the array's prototype chain
console.log(arr instanceof Object); // true
// Array arR prototype
const proto1 = Object.getPrototypeOf(arr);
console.log(proto1); / / []
// Array arr prototype prototype
const proto2 = Object.getPrototypeOf(proto1);
console.log(proto2); / / []
/ / the Object prototype
console.log(Object.prototype);
// Check whether arR's prototype is equal to Object's prototype
console.log(proto1 === Object.prototype); // false
// Check whether the prototype of arR is equal to the prototype of Object
console.log(proto2 === Object.prototype); // true
Copy the code

7.3 the constructor

This approach involves the relationships between prototypes, constructors, and instances, which will be explained in more detail later.

When defining a function (constructor), the JS engine adds a Prototype to it, with its corresponding constructor property pointing to the constructor, so that the prototype and constructor know each other. When a constructor is instantiated, the corresponding instance is created, and the instance has access to the constructor property on the corresponding stereotype so that the instance knows by whom it was created and can learn about the data type of the new object after it is created.

A profound

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]
Copy the code

Although this method can determine its data type, it has the following two disadvantages:

1. Null and undefined are invalid objects and therefore have no constructor, and 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

7.4 the toString ()

ToString () is a prototype method for Object that, by default, returns the current Object’s [[Class]]. This is an internal property of the form [object Xxx], where Xxx is the type of the object. So the use of the Object. The prototype. The toString () method can compare accurate judgement on the type of the variable. This type returns the following result for different types of variables:

Using this method, it is easy to build an authentication function 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{
        returnret; }}Copy the code

A profound

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

1. If you think this article is good, share and like it so that more people can see it

2. Pay attention to the public number of kite, and the number of the Lord together to kill the front hundred.