Front-end 100 questions cut [007]-four data type judgment methods that must be known in js

The original intention of writing this series of articles is to "let every front-end engineer master high-frequency knowledge points to help work." This is the seventh cut of the front-end Hundred Topics. I hope that friends will pay attention to the official account "Kite-holder" and arm their minds with knowledge.

js has a variety of data types (Number (numerical value), String (string), Boolean (Boolean value), Null, Undefined, Symbol, Object, function, etc.). It is inevitable that the data type needs to be judged during the development process. This article summarizes four Kind of judgment method:

7.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 to indicate the data type of the variable; so you can use this To judge number , string , object , boolean , function , undefined , symbol These seven types of [the specific advanced levels are shown in the table below, see the content returned by the front end of each case]

Types of	result
String	'string'
Number	'number'
Boolean	'boolean'
Undefined	'undefined'
Object	'object'
function function	'function'
Symbol	'symbol'

Small scale chopper

// 字符串
console.log(typeof('lili')); // string
// 数字
console.log(typeof(1)); // number
// 布尔值
console.log(typeof(true)); // boolean
// undefined
console.log(typeof(undefined)); // undefined
// 对象
console.log(typeof({})); // object
// 数组
console.log(typeof([])); // object
// null
console.log(typeof(null)); // object
// 函数
console.log(typeof(() => {})); // function
// Symbol值
console.log(typeof(Symbol())); // symbol

7.2 instanceof

instanceof operator is used to detect prototype attribute of the constructor appears on the prototype chain of an instance object, and the return value is a Boolean value, which is used to indicate whether a variable belongs to an instance of an object. Its grammar is as follows: (For details, please refer to the front-end 100 questions cut [001])

object instanceof constructor

Small scale chopper

const arr = [1, 2];
// 判断Object的prototype有没有在数组的原型链上
console.log(arr instanceof Object); // true
// 数组arr的原型
const proto1 = Object.getPrototypeOf(arr);
console.log(proto1); // []
// 数组arr的原型的原型
const proto2 = Object.getPrototypeOf(proto1);
console.log(proto2); // []
// Object的prototype
console.log(Object.prototype);
// 判断arr的原型是否与Object的prototype相等
console.log(proto1 === Object.prototype); // false
// 判断arr的原型的原型是否与Object的prototype相等
console.log(proto2 === Object.prototype); // true

7.3 constructor

This kind of judgment method actually involves the relationship between prototype, constructor and instance. A more in-depth explanation will be put into the following content. The following only needs to briefly understand the relationship between these three.

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

Small scale chopper

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 determine its data type, there are two shortcomings:

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. This is mainly reflected in the custom object. When the developer rewrites the prototype, the original constructor reference will be lost, and the constructor will default to Object

7.4 toString()

toString() is Object . When this method is called, the [[Class]] of the current object is returned by default. This is an internal attribute whose format is [object Xxx] , where Xxx is the type of the object. Therefore, the Object.prototype.toString() method can be used to determine the type of the variable more accurately. The results returned by this type for different types of variables are as follows:

type of data	result
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 construct a type identification 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;
    }
}

Small scale chopper

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

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

2. Follow the official account holders, and kill the front-end 100 questions with the account owner.