Home > Web Front-end > JS Tutorial > Summary of data type detection methods in JavaScript

Summary of data type detection methods in JavaScript

黄舟
Release: 2017-03-14 15:08:54
Original
1197 people have browsed it

This article lists the general Js type detection methods, which is a small piece of building the Js knowledge system.

1. There are 5 basic data types in Js

Undefined, Null, Boolean, String, Number( Contains NaN)

NaN is not equal to any type of value, including NaN; isNaN is used to determine whether the value is of NaN type

2. Type judgment

1. isFinite (number)
Is it infinity? If not, return true. If it is NaN, or positive or negative infinity, or non-numeric type, return false

2. typeofoperator
When used, spaces or typeof(param)

return value

string
number
boolean
undefined
function
object null also returns object

Based on the above, the judgment type can be as follows:

var obtainType = function(o){
     var t;
     if(o === null ) return “null”;
     else if(o !== o) return “NaN”;
     else if( (t = typeof o) !== ‘object’) return t;
}
Copy after login

Null and NaN string number boolean undefined function can be identified.

Only object is left in the end, such as identification of arrays and identification of custom types

3. To identify native types such as arrays, the following can be used

function obtainType(type) {
    return function (obj) {
        return Object.prototype.toString.call(obj) === "[object " + type + "]"
    }
}

var isObject = isType("Object")
var isString = isType("String")
var isArray = Array.isArray || isType("Array")
var isFunction = isType("Function")
Copy after login

4. Custom type judgment

/**
 * 返回函数的名字,可能为空串;不是函数,返回null
 */
Function.prototype.getName = function () {
    if ("name" in this) return this.name;
    return this.name = this.toString().match(/function\s*([^(]*)\(/)[1];
};
Copy after login

Both native type and custom type objects can be judged, so

/**
 * 返回:null NaN undefined string number boolean
 * function Array String Object(包括一些自定义类型) 自定义类型
 */
var obtainType =function(o){
    /**
     * 获取参数类型
     * 对象直接量、Object.create、自定义构造函数的类属性皆为Object;
     * 识别出原生类型 (内置构造函数和宿主对象)
     */
    function classOf(obj){
        return Object.prototype.toString.call(obj).slice(8, -1);
    }

    /**
     * 返回函数的名字,可能为空串;不是函数,返回null
     */
    Function.prototype.getName = function () {
        if ("name" in this) return this.name;
        return this.name = this.toString().match(/function\s*([^(]*)\(/)[1];
    };
    var t, c, n;
    // 处理null值特殊情形
    if (o === null) return "null";
    // NaN:和自身值不相等
    if (o !== o) return "NaN";
    // 识别出原生值类型和函数、undefined
    if ((t = typeof o) !== "object") return t;
    // 识别出原生类型
    if ((c = classOf(o)) !== "Object") return c;
    // 返回自定义类型构造函数名字
    if (o.constructor && typeof o.constructor === "function" &&
        (n = o.constructor.getName()))
        return n;
    return "Object";
};
Copy after login

5.

var strObj = new String('abc');

typeof strObj // "object"

obtainType(strObj) // "String"
Copy after login

3. Others

1. Dom element judgment
if(dom.nodeType){…Dom…}
if(dom.createElement)

2. jQueryEtc. type judgment
$('#aa') instanceof jQuery//Does not support spanning multiple windows and framessubpages

3. if(a) a It is automatically converted to false when it is null undefined 0 "" NaN
Generally recommended writing method

// bad
if (name !== '') {
    // ...stuff...
}

// good
if (name) {
    // ...stuff...
}

// bad
if (collection.length > 0) {
    // ...stuff...
}

// good
if (collection.length) {
    // ...stuff...
}
Copy after login

The above is the detailed content of Summary of data type detection methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template