原生JS-----論資料類型檢測

標籤：類型比較   作用   系統預設   內容   類型   instance   htm   app   const   

常見的資料類型檢測的方法：

一、最為基礎的typeof

二、不可不知的instanceof

三、比instanceof更好的constructor

四、檢測值或者運算式的結果是否為NaN

五、易用的jQuery函數isArray,isFunction

六、高大上的原型方法Object.prototype.toString

typeof基礎資料型別 (Elementary Data Type)的檢測：

文法:typeof  被檢測的內容  或者 typeof（要檢測的內容）

範例：

<script>    var num=2;    console.log(typeof num);//string</script>

基本解析：

　　typeof是一個運算子，針對一個運算元（運算元可以是變數也可以是常量）進行運算，其傳回值是一個字串，傳回值包括"number","string","boolean","undefined","object","function".

<script>    var user;var obj={        user:‘‘HTML5學堂"    }    var h5course=function(){         console.log("碼農");          };     console.log(tyopeof 234);     console.log(tyopeof "html5");     console.log(tyopeof true);     console.log(tyopeof user);     console.log(tyopeof obj);     console.log(tyopeof h5course);</script>

typeof的局限性：

　　typeof的問題在於：針對物件類型資料，無法進行具體細化的檢測。對於數組、正則、對象{}、null等資料，雖然均屬於物件類型，但卻各不相同，使用typeof進行檢測時，均返回object

<script>     console.log(tyopeof null);     console.log(tyopeof {user:"html5"});     console.log(tyopeoft [4,5]);     console.log(tyopeof /\d{3}/);</script>

不可不知的instanceof：

面對typeof的類型檢測缺陷，可以使用instanceof來彌補

文法：要檢測的內容 instanceof 類型

範例：

<script>     console.log([4,5] instanceof Array);//true     console.log(/\d{3}/  instanceof RegExp);//true</script>

基本解析：

　　instanceof能夠用於資料類型的檢測，但是僅限於引用資料類型，無法檢測基礎資料型別 (Elementary Data Type)的值；檢測的傳回值內容是布爾值。此外，會受到原型鏈的影響，只要是在原型鏈上，傳回值都是true

instanceof的局限性：

　　局限一：不能夠檢測以“字面量”方式出現的基礎資料型別 (Elementary Data Type)

<script>    var str=‘‘HTML5學堂";    var str2=new String("碼農");     console.log(str instanceof String);//false     console.log(str2 instanceof String);//true</script>

　　代碼解析：str是使用字面量的方式建立的字串，而str2是使用String對象執行個體化的字串，檢測str時傳回值是false，而檢測str2時傳回值是true；

　　局限性二：會檢測該類所歸屬的原型鏈，只要在原型鏈當中能夠找到，檢測結果均為true，檢測結果有可能會出現問題

<script>    //範例一    var str=new String("碼農");     console.log(str instanceof String);//true     console.log(str instanceof Object);//true    //範例二：    var box=document.getElementsByTagName("body");    console.log(box[0] instanceof HTMLBodyElement);    console.log(box[0] instanceof Node);    console.log(box[0] instanceof Object);    //範例三    var arr=[‘htnl5‘,‘碼農‘];    console.log(arr  instanceof Array);    console.log(arr instanceof Object);</script>

　　代碼解析：

　　　　在此處如果不是很瞭解原型鏈可以換個角度來理解，例如：數組隸屬於對象，對於這種歸屬，檢測也是成功的

　　　　範例一中的字串，的確屬於string類型，但是他是通過String建構函式執行個體化得到的，String本身是一個字串對象，所以str也符合Object這個條件

　　　　範例二中的body標籤本身是一個對象，細化一些說是一個節點對象，在細化說一個body元素，所以三種檢測均為true，範例三中的數組同理（數組屬於對象的一個分類）

比instanceof更好的constructor：

　　文法：要檢測的內容.constructor===類型

　　範例：

 

<script>    console.log([4,5].constructor=== Array);    console.log(/\d{3}/.constructor===RegExp);    console.log(‘html5‘.constructor===String);    var num=234;    console.log(num.constructor===Number);</script>

 

　　基本解析;

　　　　constructor是對象的一個屬性，不是運算子，constructor屬性指向對象的建構函式。

　　　　constuctor的作用與instanceof基本類似，但是對instanceof的兩個缺陷均進行了彌補，也就是說：既能夠檢測基礎資料型別 (Elementary Data Type)，又不受原型鏈的影響。

<script>    //範例一    var box=document.getElementsByTagName("body");    console.log(box[0].constructor=== HTMLBodyElement);//true    console.log(box[0].constructor=== Node);//false    console.log(box[0].constructor=== Object);//false    //範例二    var arr=[‘htnl5‘,‘碼農‘];    console.log(arr.constructor=== Array);//true    console.log(arr.constructor===Object);//false</script>

　　constructor的局限性：

　　　　對於自己建立的建構函式，constructor的局限性會比較大，當然這裡不是我主要想說的東西，constructor屬性是異變的，可以進行定義，所以並不能夠保證他指向相應的建構函式。但是，對於系統的各類建構函式來說，還是可以正常使用的，畢竟我們平日裡並不會去修改系統預設對象的constructor的指向

<script>    function Me(){}    var demo=new Me();    console.log(demo.constructor);    //此處檢測的結果是：constructor指向建構函式Me，但是我們卻可以人工修改指向，比如修改為Peo；    function Peo(){}    demo.constructor=Peo;    console.log(demo.constructor);    //此處檢測的結果就變成了Peo</script>

　　相關說明：

　　　　如果希望瞭解instanceof和constructor的基本原理，需要掌握原型，瞭解建構函式的內在機制。

檢測值或者運算式的結果是否為NaN：

　　isNaN函數：

　　　　isNaN用於檢測值或者運算式“轉化為數字”時，是否為NaN,是NaN，結果為false，不是NaN結果為true。可以用於輔助parseFloat()和parseInt()進行進一步的結果檢測

<script>    console.log(isNaN(NaN));//false    console.log(isNaN(234));//false    console.log(isNaN("89"));//true</script>

易用的jQuery函數---isArray、isFunction等:

　　jQuery中提供了大量的資料類型的檢測方法，可以檢測資料屬於那種具體的物件類型，此處就不做解釋了，在JQ的API文檔中都可以查得到

Object.prototype.toString.call():

　　文法與範例

<script>    console.log(Object.prototype.toString.call(236));//[object Number] 　　console.log(Object.prototype.toString.call(null));//[object Null] 　　console.log(Object.prototype.toString.call(true));//[object Boolean]　　 console.log(Object.prototype.toString.call("碼農"));//[object String]　　 console.log(Object.prototype.toString.call(/\d/));//[object RegExp]　　 console.log(Object.prototype.toString.call([4,5]));//[object Array]</script>

　　基本解析：

　　　　Object.prototype.toString比較常用於判斷對象值屬於那種內建屬性，傳回值類型為字串，返回的字串格式為：“[object 資料類型]”.由於許多參考型別都重寫了Object繼承來的toString方法，所以通常使用call/apply方法，借用Object.prototype.toString函數來判斷資料類型

　　　　每一種資料類型所屬的類的原型上都有toString方法，例如：Number.prototype,String.prototype,Array.prototype等等。除了Object上的toString之外，其他原型上的toString都用於將數值轉化為字串

　　Plus:

　　　　可以藉助字串截取的方法，擷取Object.prototype.toString的結果，並進行處理，從而得到"Number","null"等資料類型字串，從而更方便進行資料類型比較/檢測。

<script>       var demo="測試用的資料";       var type=Object.prototype.toString.call(demo).slice(8,-|);      //slice(8,-|)表示從第八個字元開始截取，到倒數第一個字元之間的部分，不包括倒數第一個字元　　 console.log(type);//String</script>

 

原生JS-----論資料類型檢測