Several methods of detecting data class

Posted by ahzulfi on Mon, 07 Feb 2022 10:04:16 +0100

There are four ways to detect data types

typeof,instanceof,constructor,Object.prototype.toString.call(),jquery.type()

typeof

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'
);
  • For Number, String, Boolean, Undefined in the basic data type and Function in the reference data type, you can use typeof to detect the data type and return lowercase characters of the corresponding data type respectively.
  • The Number, Starting and Boolean created by the typeof detection constructor all return Object
    null in basic data type. Reference Array, object, Date, Regexp in the data type. typeof detection is not allowed. Will return lowercase objects

instanceof

  • In addition to using typeof to judge, you can also use instanceof. The instanceof operator needs to specify a constructor, or a specific type, which is used to judge whether the prototype of this constructor is on the prototype chain of a given formation.
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
)
  • number, string and Boolean in basic data types. Literal values cannot be detected by instanceof, but the values created by the constructor can be as follows
var num = new Number(123);
var str = new String('dsfsf');
var boolean = new Boolean(false);
  • It should also be noted that both null and undefined return false because their types are their own, not created by Object, so they return false

  • The returned values of this method are true and false. The usage is console Log (value, type). If the return value is true, the value is this type, and false is not

constructor

  • Constructor is a property on a prototype object that points to a constructor. According to the order of looking for the attributes of the listed objects, if there are no real attributes or methods on the real column formation, look for them on the prototype chain
    If the constructor of an instance of type is output, it is as follows:
console.log(new Number(123).constructor)
//ƒ Number() { [native code] }
  • You can see that it points to the constructor of Number. Therefore, you can use num.constructor==Number to judge whether a variable is of type Number
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 have 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
  • Except undefined and null, all other types can be judged by the constructor attribute.

  • Use object prototype. toString. Call() detects the object type
    You can get the type of each object through toString(). In order that each object can pass object prototype. toString(), which needs to be detected with function prototype. Call() or function prototype. Called in the form of apply (), pass the object to be checked as the first parameter, called thisArg.

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]"
In this way, you can see the use of Object.prototype.toString.call()It is the most accurate way to judge the type of a variable.
  • You can also encapsulate yourself
```javascript
function gettype(obj) {
  var type = typeof obj;

  if (type !== 'object') {
    return type;
  }
  //If it is not object type data, you can directly use typeof to judge it

  //If it is object type data, object must be used to accurately judge the type prototype. toString. Only call (obj) can be used to judge
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');
}
  • Type of can only detect the basic data type of number, but cannot detect the reference data type and null
  • The triggered off detection only returns TRUE or false. How come it is only the type currently defined? Returns TRUE if not false
  • Constructor is a property on a prototype object that points to a constructor. According to the order of looking for the attributes of the listed objects, if there are no real attributes or methods on the real column formation, look for them on the prototype chain

Topics: Javascript Front-end JQuery