首頁 > 文章 > web前端 > JS中資料類型檢測的四種方法簡單介紹

JS中資料類型檢測的四種方法簡單介紹

php是最好的语言原創: 2018-08-06 17:09:061529瀏覽

JS中我們只用一個var就能定義所有類型的變量，非常方便，但是也同樣給我們造成了困擾，如果我們想知道一個函數的返回值是什麼類型的，或者輸入的信息是什麼類型的時候就要透過資料進行檢測，所以我們該如何進行資料類型的檢測呢？

資料類型偵測方式：

typeof：用來偵測資料類型的運算子
##instanceof：用來偵測某個實例是不是屬於某個類別
constructor：建構子作用和instanceof非常相似
Object.prototype.toString .call(); 最準確的最常用的方法

#typeof typeof：用來偵測資料類型的運算子;使用方式是 typeof 偵測的內容。

使用typeof檢測資料類型，首先傳回的都是一個字串，字串中包含對應的資料類型；

var num  = 2;
console.log(typeof num); // ->控制台输出字符串numberconsole.log(typeof typeof typeof typeof function () {}); 
 // 输出的结果为字符串String，因为第一次使用typeof检测后结果为一个字符串数据类型的数据，以后每次检测都是String

typeof的局限性
1. typeof null 的結果為「object」
2. 不能具體細分是數組還是正規則，還是物件中的其他值，因為使用typeof檢測資料類型，對於物件資料類型中左右的值，最後回傳的結果都是「object」

#instanceof instanceof：用來偵測某個實例是否屬於某個類別;使用方法：實例 instanceof 類別名稱

instanceof的限制 1. 不能用來處理字面量創建出來的基本類型值：對於基本的資料類型來說，字面量方式創建出來的結果和實例方式創建出來的結果是有一定的區別的，從嚴格的意義上來講，只有實例創建出來的結果才是標準物件資料型別的值，也是標準的Number這一個類別的實例；字面量方式所建立的結果才是基本的資料型別值，不是嚴謹的實例，但由於JS的鬆散性，導致可以使用Number.prototype上提供的方法

 console.log(1 instanceof Number);//->控制台输出false
 console.log(new Number(1) instanceof Number);//-> 控制台输出true

instanceof只要在目前實例的原型鏈上，我們偵測出來的結果都為true
在類別的原型鏈繼承當中，我們最後偵測出來的結果未必正確

 function Fn() {
 }  
 var  ary = new Array;
 Fn.prototype = ary;//原型继承：让子类的原型等于父类的一个实例
 var  f =new Fn; // f->Fn.prototype->Array.prototype->Object.prototype
 console.log(f instanceof Array); //-> true

constructor：建構函數 constructor：建構子這個方法與instanceof非常相似

var obj = [];
console.log(obj.constructor === Array ); //->trueconsole.log(obj.constructor === RegExp); //->false//console还可以出来基本的数据类型var num = 1;
console.log(num.constructor === Number);//->true// constructor检测和instanceof一同，一般情况下是检测不了的var  reg = /^$/;
console.log(reg.constructor === RegExp);//-> trueconsole.log(reg.constructor === RegExp);//-> false

限制：我們可以把類別的原型進行重寫，在重寫的過程中很有可能出現把之前的constructor覆蓋了，這樣檢測出來的結果就是不準確的;對於特殊的數據類型null和undefined，它們的所屬類是Null和Undefined，但是瀏覽器吧這兩個類保護起來了，不允許我們進行存取使用

function Fn() {}  
Fn.prototype = new Array;var  f =new Fn;
console.log(f.constructor);//-> Array

Object.prototype.toString.call() 這種方法是我們真是專案中最長用的也是現在最準確的一種方式
首先取得Object原型上的toString方法，讓方法執行，並且改變方法中的this關鍵字的指向
在了解這種方式之前我們先了解下
toString#這個方法
toString:從字面上是轉換成字串，但是某些toString方法不僅僅是轉換成字串；對於Number、String、Boolean、Array 、RegExp、Date、Function原型上的toString方法都是①把目前的資料型別轉換為字串的型別（它們的作用只是用來轉成字串）；但是在Object原型上的toString方法不同於這些，②它的作用是傳回目前方法的執行主體（方法中的this）所屬的類別的詳細資訊。
第一中型別轉成字串

        //Number.prototype.toString方法是转化为字符串  
        console.log((1).toString()); //->这里的toString是Number.prototype.toString用法是转成字符串-> &#39;1&#39;
        console.log((1).__proto__.__proto__.toString());//[object Object]
        console.log((128).toString(2/8/10));//把数字转化为二进制、八进制、十进制

Object原型上的

 ({name:&#39;编程&#39;}).toString();
 console.log(obj.toString());//-> toString中的this是Obj，返回的是obj所属类的信息->[Object Object]第一个Object代表当前实例是对象数据类型的(这个是固定死的)，第二个Object代表的是obj所属的类是ObjectMath.toString();//->toString中的this是Math，返回的是Math所属类的信息 ->  [Object Math]console.log(Object.prototype.toString.call([]));                //->[object Array]console.log(Object.prototype.toString.call(/^$/));               //->[object Array]console.log(({}).toString.call(new  Date));                      //->[object Date]console.log(Object.prototype.toString.call(1));                  //->[object Number]console.log(Object.prototype.toString.call(&#39;编程&#39;));             //->[object String]console.log(Object.prototype.toString.call(null));               //->[object Null]console.log(Object.prototype.toString.call(undefined));          //->[object Undefined]console.log(Object.prototype.toString.call(function () {}));     //->[object Function]

所有經過對比我們第四中方式的準確性是最高的，所以也是我們專案中經常使用的。 Are you get it!!!

JS中資料類型檢測的四種方法簡單介紹

相關文章