總結的JS數據類型斷定（很是全面）

時間 2019-12-07

原文原文鏈接

用typeof 來檢測數據類型

Javascript自帶兩套類型：基本數據類型（undefined，string，null，boolean，function，object）和對象類型。javascript

可是若是嘗試用typeof 來檢測對象類型都一概返回"object"並不能加以區分java

typeof null  // "object"
typeof []    // "object"
typeof document.childNodes  //"object"
typeof /\d/  //"object"
typeof new Number() //"object"

用 constructor 屬性來檢測類型的構造函數

[].constructor === Array    //true
document.childNodes === NodeList    //true
/\d/.constructor === RegExp     //true

function isRegExp(obj) {
    return obj && typeof obj === "object" && obj.constructor === RegExp;
}  //檢測正則表達式對象

function isNull(obj){
    return obj === null;
}

用construct檢測能夠完成大多數的類型檢測，null特殊直接比較。然而iframe中的數組類型確沒法檢測出正確類型，這是用construct檢測的一個缺陷；同時在舊版本IE下DOM和BOM的construct是沒法訪問的node

利用 Object.prototype.toString 來判斷

Object.prototype.toString.call([])  //"[object Array]"
Object.prototype.toString.call(/\d/)  // "[object RegExp]"
Object.prototype.toString.call(1)//"[object Number]"

來看看jQuery源碼中是如何使用toString方法的正則表達式

/*
*  jQuery JavaScript Library v1.11.2
*/
var class2type = {};    //用來保存js數據類型

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {//構造class2type存儲經常使用類型的映射關係，遍歷基本類型並賦值，鍵值爲 [object 類型]
        class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

type: function( obj ) {
                if ( obj == null ) {//首先若是是null則返回null字符串
                        return obj + "";
                }
//接着判斷給定參數類型是否爲object或者function，是的話在映射表中尋找 toString後的鍵值名稱並返回，不是的話利用typeof就能夠獲得正確類型。
                return typeof obj === "object" || typeof obj === "function" ?
                        class2type[ toString.call(obj) ] || "object" :
                        typeof obj;
        },
/****************************/        
jQuery.type(/\d/)   //"regexp"
jQuery.type(new Number())   //"number"

這裏可以使用toString方法來檢測是由於不一樣對象都會從新定義本身的toString方法chrome

說說一些特殊類型的檢測

上述調試是在IE8中進行的，由於undefined 在javascript中並非關鍵字，在IE8如下（以後的版本不能夠賦值）是能夠賦值的，查看jQuery.type源碼可知，對於undefined檢測由是 typeof undefined完成的。jQuery.type並不能在舊的IE中檢測出undefined的正確性。想要得到純淨的undefined能夠使用void 0 數組

另外，對於DOM，BOM對象在舊的IE中使用Objec.prototype.toString檢測出來的值均爲「[object Object]」瀏覽器

可是在chrome下的結果卻徹底不一樣（chrome能夠檢測出真實類型）函數

瞭解一下jQuery檢測特殊類型

isWindow: function( obj ) {//ECMA規定window爲全局對象global，且global.window === global
                return obj != null && obj == obj.window;
        },
        
        isPlainObject: function( obj ) {
                var key;
                if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
                        return false;
                }

                try {//判斷它最近的原形對象是否含有isPrototypeOf屬性
                        if ( obj.constructor &&
                                !hasOwn.call(obj, "constructor") &&
                                !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
                                return false;
                        }
                } catch ( e ) {
                        return false;
                }
                if ( support.ownLast ) {
                        for ( key in obj ) {
                                return hasOwn.call( obj, key );
                        }
                }

mass Framework相對jQuery中改善的地方

var class2type = {//將可能出現的類型都映射在了class2type對象中，從而減小isXXX函數
        "[object HTMLDocument]": "Document",
        "[object HTMLCollection]": "NodeList",
        "[object StaticNodeList]": "NodeList",
        "[object DOMWindow]": "Window",
        "[object global]": "Window",
        "null": "Null",
        "NaN": "NaN",
        "undefined": "Undefined"
    };

type: function(obj, str) {
            var result = class2type[(obj == null || obj !== obj) ? obj : serialize.call(obj)] || obj.nodeName || "#"; //serialize == class2type.toString
            if (result.charAt(0) === "#") { //兼容舊式瀏覽器與處理個別狀況,如window.opera
                //利用IE678 window == document爲true,document == window居然爲false的神奇特性
                if (obj == obj.document && obj.document != obj) {//對DOM，BOM對象採用nodeType（單一）和item（節點集合）進行判斷
                    result = "Window"; //返回構造器名字
                } else if (obj.nodeType === 9) {
                    result = "Document"; //返回構造器名字
                } else if (obj.callee) {
                    result = "Arguments"; //返回構造器名字
                } else if (isFinite(obj.length) && obj.item) {
                    result = "NodeList"; //處理節點集合
                } else {
                    result = serialize.call(obj).slice(8, -1);
                }
            }
            if (str) {
                return str === result;
            }
            return result;
        }

類數組

類數組是一類特殊的數據類型存在，他們自己相似Array可是又不能使用Array的方法，他們有一個明顯的特色就是含有length屬性，並且鍵值是以整數有序的排列的。這樣的數組能夠經過 Array.slice() 這樣的方法轉換成真正的數組，從而使用Array提供的方法。spa

常見類數組：arguments，document.forms，document.getElementsByClassName(等一些列節點集合NodeList，HTMLCollection)，或者是一些特殊對象，以下所示：prototype

var arrayLike={  
     0:"a",  
     1:"b",  
     2:"c",  
     length:3  
}

一般狀況下經過Array.slice.call既能夠轉換類數組，可是舊IE的HTMLCollection，NodeList不是Object的子類，不能使用該方法，這時候須要構建一個空數組，而後將遍歷節點push就如空數組中，返回新生成的數組便可，同時要區別出window 和 string對象，由於這類的對象一樣含有length>=0（length不可被修改），可是不是類數組。

jQuery如何處理類數組的

makeArray: function( arr, results ) {
                var ret = results || [];

                if ( arr != null ) {
                        if ( isArraylike( Object(arr) ) ) {
                                jQuery.merge( ret,
                                        typeof arr === "string" ?
                                        [ arr ] : arr
                                );   //jQuery.merge 合併數組 ，如果字符串則封裝成數組河濱，不是則世界合併
                        } else {
                                push.call( ret, arr );
                        }
                }

                return ret;
        }

Ext.js是如何處理類數組的

toArray: function(iterable, start, end) {
                if (!iterable || !iterable.length) {
                    return [];   //非類數組類型直接返回[]
                }
                if (typeof iterable === 'string') {
                    iterable = iterable.split('');   //分解字符串
                }
                if (supportsSliceOnNodeList) {
                    return slice.call(iterable, start || 0, end || iterable.length); //對於NodeList支持
                }
                var array = [],
                    i;
                start = start || 0;
                end = end ? ((end < 0) ? iterable.length + end : end) : iterable.length;
                for (i = start; i < end; i++) {
                    array.push(iterable[i]);
                }
                return array;
            }

mass Framework.js是如何處理類數組的

slice: W3C ? function(nodes, start, end) {    //var W3C = DOC.dispatchEvent; IE9開始支持W3C的事件模型
            return factorys.slice.call(nodes, start, end);
        } : function(nodes, start, end) {
            var ret = [],
                    n = nodes.length;
            if (end === void 0 || typeof end === "number" && isFinite(end)) {
                start = parseInt(start, 10) || 0;
                end = end == void 0 ? n : parseInt(end, 10);
                if (start < 0) {
                    start += n;
                }
                if (end > n) {
                    end = n;
                }
                if (end < 0) {
                    end += n;
                }
                for (var i = start; i < end; ++i) {
                    ret[i - start] = nodes[i];
                }
            }
            return ret;
        }