JavaScript Judgment Data Type Several Methods and Difference Introduction

  • 2021-08-10 06:42:09
  • OfStack

There are five methods for judging data types: typeof, instanceof, constructor, Object. prototype. toString. call (), jquery. type ()

1. typeof method

typeof is an operator that determines the basic data type (only number, string, boolean, null, symbol, function, object can be returned)
The return values are divided into the following types
For basic types. All return correct results except that the null value returns object
For reference values, object type is returned except function which returns function type
Example:


console.log(
 typeof 100, //"number"
 typeof 'abc', //"string"
 typeof false, //"boolean"
 typeof undefined, //"undefined"
 typeof null, //"object"
 typeof [1,2,3], //"object"
 typeof {a:1,b:2,c:3}, //"object"
 typeof function(){console.log('aaa');}, //"function"
 typeof new Date(), //"object"
 typeof /^[a-zA-Z]{5,20}$/, //"object"
 typeof new Error() //"object"
 typeof new Number(100), //'object'
 typeof new String('abc'),// 'string'
 typeof new Boolean(true),//'boolean'
)

2. instanceof method

The expression is: A instanceof B, judging whether A is an instance of B, if A is an instance of B, returning true, otherwise returning false, judging the data type by the construction type


console.log(
 100 instanceof Number, //false
 'dsfsf' instanceof String, //false
 false instanceof Boolean, //false
 undefined instanceof Object, //false
 null instanceof Object, //false
 [1,2,3] instanceof Array, //true
 {a:1,b:2,c:3} instanceof Object, //true
 function(){console.log('aaa');} instanceof Function, //true
 new Date() instanceof Date, //true
 /^[a-zA-Z]{5,20}$/ instanceof RegExp, //true
 new Error() instanceof Error //true
)
// Note:  instanceof  Back 1 It must be an object type, and the case can't be wrong. Try this method 1 Some conditional selection or branching 

Also note that both null and undefined return false, because their type is themselves, and false is not created by Object, so false is returned.

3. constructor method

constructor is a property on an prototype object that points to the constructor,


var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = {name:'wenzi', age:25};
var func = function(){ console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error= new Error();

function Person(){
 
}
var tom = new Person();

// undefined And null No constructor Attribute 
console.log(
 tom.constructor==Person,
 num.constructor==Number,
 str.constructor==String,
 bool.constructor==Boolean,
 arr.constructor==Array,
 json.constructor==Object,
 func.constructor==Function,
 date.constructor==Date,
 reg.constructor==RegExp,
 error.constructor==Error
);
// All results are true

Note: Except for undefined and null, other types can be judged by the constructor attribute

Method 4: Object. prototype. toString method

Used to detect object types


var toString = Object.prototype.toString;

toString.call(123); //"[object Number]"
toString.call('abcdef'); //"[object String]"
toString.call(true); //"[object Boolean]"
toString.call([1, 2, 3, 4]); //"[object Array]"
toString.call({name:'wenzi', age:25}); //"[object Object]"
toString.call(function(){ console.log('this is function'); }); //"[object Function]"
toString.call(undefined); //"[object Undefined]"
toString.call(null); //"[object Null]"
toString.call(new Date()); //"[object Date]"
toString.call(/^[a-zA-Z]{5,20}$/); //"[object RegExp]"
toString.call(new Error()); //"[object Error]"

toString is a method on the prototype object of Object, which returns the specific type of its caller by default. More strictly speaking, it is the object type pointed by this when toString is running, and the returned type format is [object, xxx]. xxx is the specific data type, including String, Number, Boolean, Undefined, Null, Function, Date, Array, RegExp, Error, HTMLDocument and so on

5. Invincible and omnipotent method: jquery. type ()

If the object is undefined or null, the corresponding "undefined" or "null" is returned.


jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"

If the object has 1 internal [[Class]] and 1 browser's built-in object [[Class]], we return the corresponding [[Class]] name


jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
jQuery.type( /test/ ) === "regexp"

All other 1 cuts will return its type "object".
6. You can also encapsulate a function to get the exact type of variable yourself


function gettype(obj) {
 var type = typeof obj;

 if (type !== 'object') {
 return type;
 }
 // If not object Type of data, directly use typeof You can tell 

 // If it is object Type data, which must be used to accurately judge the type Object.prototype.toString.call(obj) The way to judge 
 return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');
}

Summarize


Related articles: