1、typeof 用來檢測數據類型的運算符
typeof value 返回值首先是一個字符串,其次裡面包含了對應的數據類型,例如:"number"、"string"、"boolean"、"undefined"、"object"、"function"
局限性:
1)typeof null ->"object"
2)檢測的不管是數組還是正則都返回的是"object",所以typeof不能判斷一個值是否為數組
console.log(typeof [12, 23]);//->"Object"
2、instanceof/constructor
檢測某一個實例是否屬於某一個類
使用instanceof/constructor可以檢測數組和正則
console.log([] instanceof Array);//->true console.log(/^$/ instanceof RegExp);//->true console.log([] instanceof Object);//->true console.log([].constructor === Array);//->true console.log([].constructor === Object);//->false constructor可以避免instanceof檢測數組的時候,用Object也是true的問題 console.log({}.constructor === Object);//true<br>console.log([].constructor === Object);//false
局限性:
1)用instanceof檢測的時候,只要當前的這個類在實例的原型鏈上(可以通過原型鏈__proto__找到它),檢測出來的結果都是true
var oDiv = document.getElementById("div1"); //HTMLDivElement->HTMLElement->Element->Node->EventTarget->Object console.log(oDiv instanceof HTMLDivElement);//->true console.log(oDiv instanceof Node);//->true console.log(oDiv instanceof Object);//->true
2)基本數據類型的值是不能用instanceof來檢測的
console.log(1 instanceof Number);//->false
數組創建的兩種方式(對象、正則、函數...)
對於引用數據類型來說,我們兩種方式創建出來的都是所屬類的實例,而且都是對象數據類型的值,是沒有區別的
var ary = []; var ary = new Array;
對於基本數據類型來說,雖然不管哪一種方式創建出來的都是所屬類的一個實例(在類的原型上定義的方法都可以使用),但是字面量方式創建出來的是基本數據類型,而實例方式創建出來的是對象數據類型
var num1 = 1; var num2 = new Number("1"); console.log(typeof num1,typeof num2);//->"number" "object"
3)在類的原型繼承中,instanceof檢測出來的結果其實是不准確的
function Fn() {} var f = new Fn; console.log(f instanceof Array);//->false f不是一個數組,它就是一個普通的實例(普通的對象)
雖然Fn繼承了Array,但是f沒有length和數字索引哪些東西,所以f應該不是數組才對,但是用instanceof檢測的結果卻是true,因為f雖然不是數組,但是在f的原型鏈上可以找到Array
function Fn() { } Fn.prototype = new Array;//->Fn子類繼承了Array這個父類中的屬性和方法 var f = new Fn; console.log(f instanceof Array);//->true
3、Object.prototype.toString.call(value) ->找到Object原型上的toString方法,讓方法執行,並且讓方法中的this變為value(value->就是我們要檢測數據類型的值)
Object.prototype.toString常用來判斷對象值屬於哪種內置屬性,它返回一個JSON字符串——"[object 數據類型]"。
由於許多引用類型都重寫了Object繼承來的的toStrong方法,所以我們通常使用call或者apply借用Object.prototype.toString函數來判斷數據類型。
當然,這樣調用的默認前提是Object.prototype.toString沒有被重寫。
toString:一個方法,轉換為字符串數據類型用的方法
每一個數據類型所屬類的原型上都有toString方法,例如:Number.prototype/String.prototype/Array.prototype/Function.prototype...
除了Object上的toString,其他類原型上的toString都是把當前的數據值轉換為字符串的意思
null和undefined比較的特殊:他們所屬類Null/Undefined的原型上也有toString,只不過不讓我們用而已,不僅如此其實類的原型都給屏蔽了
HTML元素對象的toString:雖然它的原型鏈很長,但是在其它類的原型上都沒有toString,只有在最底層Object.prototype這上才有
var oDiv = document.getElementById("div1"); oDiv.toString(); //->調用的其實也是Object.prototype.toString... //alert、document.write 這兩種輸出的方式其實都是把要輸出的內容先轉換為字符串,然後再輸出的<br> alert([]); //->"" alert(true); //->"true" alert({}); //->這個就要調用Object.prototype上的toString了 ->"[object Object]" //定義toString變量是為了簡便書寫,同時降低作用域鏈檢索的性能損耗 var toString = Object.prototype.toString; console.log(toString.call(1));//[object Number] console.log(toString.call(undefined));//[object Undefined] console.log(toString.call(null));//[object Null] console.log(toString.call(false));//[object Boolean] console.log(toString.call("s"));//[object String] console.log(toString.call({}));//[object Object] console.log(toString.call(/[a]/g));//[object RegExp] console.log(toString.call(function(){}));//[object Function]
is系列函數的簡易實現
在明白數據類型怎麼檢測後,下面我們來簡單實現is系列檢測函數。
var dataType = { '[object Null]' : 'null', '[object Undefined]' : 'undefiend', '[object Boolean]' : 'boolean', '[object Number]' : 'number', '[object String]' : 'string', '[object Function]' : 'function', '[object Array]' : 'array', '[object Date]' : 'date', '[object RegExp]' : 'regexp', '[object Object]' : 'object', '[object Error]' : 'error' }, toString = Object.prototype.toString; function type(obj) { return dataType[toString.call(obj)]; } //生成is系列函數 function createValidType() { for(var p in dataType) { var objType = p.slice(8, -1); (function(objType) { window['is' + objType] = function(obj) { return type(obj) === objType.toLowerCase(); } })(objType) } } createValidType(); console.log(isObject({}));//true console.log(isDate(new Date()));//true console.log(isBoolean(false));//true console.log(isString(1));//false console.log(isError(1));//false console.log(isError(new Error()));//true console.log(isArray([]));//true console.log(isArray(1));//false
上面代碼裡分別實現了isNull、isUndefined、isBoolean、isNumber、isString、isFunction、isArray、isDate、isRegExp、isObject、isError這11個檢測函數。同時也實現了type函數,用以檢測數據類型。
console.log(type({}));//"object" console.log(type(new Date()));//"date" console.log(type(false));//"boolean" console.log(type(1));//"number" console.log(type(1));//"number" console.log(type(new Error()));//"error" console.log(type([]));//"array" console.log(type(1));//"number"
createValidType函數巧用閉包保存數據狀態的特性,批量生成is系列函數。
以上所述是小編給大家介紹的JS中檢測數據類型的幾種方式及優缺點小結,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!