Summary of various methods for JS data type detection

background

As we all know, js is a dynamic weakly typed scripting language that uses a dynamic type system and prototype-based inheritance.

The lack of static constraints on types means that program errors caused by data types cannot be discovered in time during the compilation phase. In order to write robust code, various checks and compatibilities must be performed at runtime. Therefore, the ability to skillfully and accurately detect data types has become one of the most important foundations for mastering this language.

What are the methods for determining data types?

In general, there are roughly the following types: typeof, instanceof, Object.prototype.toString, constructor, duck typing, and detection methods for specific types Array.isArray(), Number.isNaN(). Although there are many methods, their usage scenarios are different.

1. Use typeof to determine the basic data type:

The return values ​​are undefined, string, number, boolean, object, function, and symbol.

It can be seen that typeof, as an officially provided type detection operator, is very reliable in detecting basic data types and functions such as undefined, string, boolean, and symbol. The main reason for the poor performance is

1) Cannot distinguish between specific object types (Array, Date, regExp).
2) typeof null === 'object' // is true. . . .

Defect 2) can be avoided by adding one more sentence when determining the type of the object reference: typeof x === 'object' && x !== null. However, the inability to distinguish the specific types of objects is indeed a big pain point.

2. Use instanceof to determine the object data type

This operator is used to detect whether the prototype of a constructor appears in the prototype chain of the target object.

This is a predictive detection method. It does not directly return the data type as a string like typeof. Instead, you need to predict the constructor of the object type and finally return a boolean value.

The detection rule can actually be seen from the name, which determines whether the instance is created by a certain constructor. Now that we know the principle, let's implement our own instanceof.

function myInstanceof(target,constructor){
  const baseType = ['string', 'number', 'boolean', 'undefined', 'symbol']
    if (baseType.includes(typeof(target))) { return false }
    //The prototype chain is actually a linked list composed of objects. Traversing this linked list,
  let prototype = Object.getPrototypeOf(target);
    while(prototype){
        //Once there is an object on the chain that matches, return true
      if (prototype === constructor.prototype) {
        return true
      }else{
        prototype = Object.getPrototypeOf(prototype)
      }
    }
    return false
}
console.log(myInstanceof([],Array))

In js, we can broadly think that everything originates from objects, because although instances are created through constructors, the constructor itself is just an emotionless production machine. The soul and character (public properties and methods) of the instance are all shared from the prototype object pointed to by the prototype property of the constructor, and prototype objects are all pure objects, which are created by the Object constructor, which will cause the following consequences.

For arrays, when traversing the objects on the prototype chain, Array.prototype Object.prototype will appear.

In addition, it is impossible to judge the basic data types created by literal value. for example

How to make up for the above defects? The answer is to use the following constructor instead of instanceof in the above special scenarios.

3. Use the constructor attribute

First of all, let’s be clear. The constructor is a property on the prototype, and the instance inherits from the prototype, so this property can also be directly accessed on the instance.
First, let's look at the universal performance of contructor

Unexpectedly good performance, except for null and undefined, the basic (wrapper) type or object type with a contructor attribute can be accurately judged.

It can accurately distinguish Array|Object because it does not traverse the entire prototype chain like instanceof, but only makes judgments on the instance. But there is also a fatal flaw. This attribute on the instance is too easy to be modified. Once modified, this method becomes meaningless.

4. toString Method

First of all, js's object type or basic type of packaging object has a toString method. Inherited from Object.prototype.toString(), the call returns the string tag "[object Type]" of the corresponding type.

This method is like a random punch to kill the master, and it feels like an unintentional planting of willows that leads to a forest of willows. Its original function is just to get a string representing the object. Now it is used in js type detection, and its performance is very good. It performs very well for basic types and object types. If we have to point out a disadvantage, we can only say that the returned string is a bit complicated and not very convenient to use. Now let's simplify it.

Write a simplified version first

function isType(type,value){
    return Object.prototype.toString.call(value) === `[object ${type}]`
}
console.log(isType('Array',[]))
console.log(isType('Number',1))

This is not very convenient to use. Type parameters such as 'Array' and 'Number' are easy to be misspelled. Therefore, it is hoped that the method can preset parameters and construct a function factory to call and return functions such as isArray. In the IDE, function names have better code hints than strings and are less prone to spelling errors.

function isType(type){
    return function(value){
        return Object.prototype.toString.call(value) === `[object ${type}]`
    }
}

const isArray = isType('Array')
const isNumber = isType('Number')
console.log(isArray([]),isNumber(1))

The idea of ​​higher-order functions is used here, retaining parameters + returning a new function. It can be imagined that in js, bind can not only bind this, but also retain parameters + return a new function, which is also suitable here.

function isType(type,value){
    return Object.prototype.toString.call(value) === `[object ${type}]`
}

const isArray = isType.bind(null,'Array')
const isNumber = isType.bind(null,'Number')
console.log(isArray([]),isNumber(1))

Going a step further, we can use the idea of ​​parameter currying to transform

function isType(type,value){
    return Object.prototype.toString.call(value) === `[object ${type}]`
}
function curring (fn,...args1) {
    let len ​​= fn.length;
    return function(...args2){
        const args = args1.concat(args2);
        if (args.length < len) {
            return curring(fn,...args)
        }else{
            return fn(...args)
        }
    }
}
const isArray = curring(isType,'Array')
const isNumber = curring(isType,'Number')
console.log(isArray([]),isNumber(1))

Finally, enrich the supported types and you are done.

const types = [
    'Null',
    'Undefined',
    'String',
    'Number',
    'Boolean',
    'Object',
    'Array',
    'Date',
    'Function',
    'RegExp',
    'Symbol',
    'Math',
]
const checkTypeUtil = {}
types.forEach((type)=>{
    checkTypeUtil[`is${type}`] = curring(isType,type)
})
export {
 checkTypeUtil
}
console.log(checkTypeUtil.isArray([]))

5. Use Array.isArray to determine the array

As mentioned above, instanceof can be used to detect arrays. However, in the multi-window environment created by iframe, because the window global environment needs to be isolated, Array and Array.prototype must be different in each window. Therefore, iframeA.Array.prototype ≠ iframeB.Array.prototype, so iframeA.arr instanceof iframeB.Array must return false. This is a low-probability event, but in the scenario of using iframe, passing values ​​to each other is also very likely to happen. Using Array.isArray provided by ES6 does not have this problem and can accurately judge the array.

You can pollify like this

if (!Array.isArray) {
  Array.isArray = function(x) {
    return Object.prototype.toString.call(x) === '[object Array]';
  };
}

6. Distinguish between ArrayLike and Array

The definition of the array class is:

• Has a length property, and other properties (indexes) are non-negative integers (indexes in the object are treated as strings
• Does not have the methods that arrays have

function isLikeArray(x){
    if(!(typeof x === 'object' && x !== null)){
        return false
    }
    return typeof x.length === 'number' && x.length >= 0 && !Array.isArray(x)
}

Array-like objects can be converted to real arrays using Array.from Array.prototype.slice.call(val).

7. Determine whether an object is a pure object (or ordinary object)

Definition of pure object: specifically refers to objects created in the following three ways

• new Object
• Object literal creation {}
• Object.create(null)

The jquery and lodash source codes are detected using the following method

const funcToString = Function.prototype.toString
const objectCtorString = funcToString.call(Object)

function isPlainObject(value){
    // Use toString to exclude other data types first if(!value || !Object.prototype.toString.call(value) === "[object Object]"){
        return false
    }
    const proto = Object.getPrototypeOf(value)
    if(proto === null){//Compatible with Object.create(null) return true
    }
    const Ctor = Object.prototype.hasOwnProperty.call(proto,'constructor') && proto.constructor;
    if(typeof Ctor !== 'function'){
        return false
    }
    // Here we use the string to determine whether the constructor is an Object instead of directly using instanceof to avoid the problem of different objects in multiple window environments mentioned above if(funcToString.call(Ctor) === objectCtorString){
        return true
    }
    return false
}
console.log(isPlainObject(Object.create(null)))
console.log(isPlainObject(new Object))
console.log(isPlainObject({a:1}))

8. How to detect NaN? What is the difference between Number.isNaN and isNaN?

Conclusion: Number.isNaN will strictly determine whether the passed value is directly equal to NaN.

isNaN will first perform a Number() conversion and then determine whether it is NaN.

9. Duck Typing

In fact, the above use of constuctor to determine the data type is the use of this method. To determine whether an animal is a duck, we can make a rough judgment based on simple empirical judgments such as whether it looks like a duck and quacks like a duck.

For example, to determine whether an object is a Promise, you can do this

function isPromise(x){
    if (!(x instanceof Promise)) {
        return false
    }
    return typeof x.then === 'function'
}

Summarize

This is the end of this article about JS data type detection. For more relevant JS data type detection content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!