js數(shù)據(jù)類型檢測總結(jié)

更新時(shí)間：2018年08月05日 11:13:11 作者：余大彬

這篇文章給大家分享了js數(shù)據(jù)類型檢測的相關(guān)實(shí)例內(nèi)容，有需要的朋友可以測試下。

在js中，有四種用于檢測數(shù)據(jù)類型的方式，分別是：

typeof　　用來檢測數(shù)據(jù)類型的運(yùn)算符
instanceof 　　檢測一個(gè)實(shí)例是否屬于某個(gè)類
constructor　　構(gòu)造函數(shù)
Object.prototype.toString.call()　　原型鏈上的Object對象的toString方法

下面我們就來分別介紹一下上面四種方法的適用場景和局限性。

typeof　用來檢測數(shù)據(jù)類型的運(yùn)算符

使用typeof檢測數(shù)據(jù)類型，返回值是字符串格式。能夠返回的數(shù)據(jù)類型

是："number","string","bolean","undefined","function","object"。

<script>
  console.log(typeof(1));  //number
  console.log(typeof('hello'));  //string
  console.log(typeof(true));  //boolean
  console.log(typeof(undefined));  //undefined
  console.log(typeof(null));  //object
  console.log(typeof({}));  //object
  console.log(typeof(function() {}));  //function
</script>

局限性：

typeof (null); //"object"。這是由于在js中，null值表示一個(gè)空對象指針，而這也正是使用typeof操作符檢測null值時(shí)會(huì)返回"object"的原因。
不能具體的細(xì)分是數(shù)組還是正則，還是對象中其他的值，因?yàn)槭褂胻ypeof檢測數(shù)據(jù)類型，對于對象數(shù)據(jù)類型的所有的值，最后返回的都是"object"

instanceof　檢測某一個(gè)實(shí)例是否屬于某個(gè)類

instanceof主要用來彌補(bǔ)typeof不能檢測具體屬于哪個(gè)對象的局限性。

<script>
  let arr = [1,2,3];
  let reg = /\w/;
  console.log(arr instanceof Array);  //true
  console.log(arr instanceof Object);  //true
  console.log(reg instanceof RegExp);  //true
  console.log(reg instanceof Object);  //true
</script>

局限性：

不能用于檢測和處理字面量方式創(chuàng)建出來的基本數(shù)據(jù)類型值，即原始數(shù)據(jù)類型
instanceof的特性：只要在當(dāng)前實(shí)例的原型鏈上的對象，我們用其檢測出來都為true
在類的原型繼承中，我們最后檢測出來的結(jié)果未必正確

constructor　構(gòu)造函數(shù)

是函數(shù)原型上的屬性,該屬性指向的是構(gòu)造函數(shù)本身。

作用和instsnceof非常相似，與instanceof不同的是，不僅可以處理引用數(shù)據(jù)類型，還可以處理原始數(shù)據(jù)類型。

<script>
  let num = 12;
  let obj = {};
  console.log(num.constructor == Number);//true
  console.log(obj.constructor == Object);//true
</script>

但是要注意一點(diǎn)的是，當(dāng)直接用(對象字面量或原始數(shù)據(jù)).constructor時(shí)，最好加上（）。為了便于理解，我們來看一個(gè)例子。

<script>
  1.constructor === Number;    //報(bào)錯(cuò)，Invalid or unexceped token
  (1).constructor === Number;    //true
  {}.constructor === Number;    //報(bào)錯(cuò)，Invalid or unexceped token
  ({}).constructor === Number;  //true
</script>

這主要是由于js內(nèi)部解析方式造成的，js會(huì)把1.constructor解析成小數(shù)，這顯然是不合理的，小數(shù)點(diǎn)后應(yīng)該是數(shù)字，因此就會(huì)引發(fā)報(bào)錯(cuò)。js會(huì)把{}解析成語句塊來執(zhí)行，這時(shí)后面出現(xiàn)一個(gè)小數(shù)點(diǎn)顯然也是不合理的，因此也會(huì)報(bào)錯(cuò)。為了解決這個(gè)問題，我們可以為表達(dá)式加上（）使js能夠正確解析。

局限性：我們可以把類的原型進(jìn)行重寫，在重寫的過程中很可能把之前constructor給覆蓋了，這樣檢測出來的結(jié)果就是不準(zhǔn)確的

<script>
   function Fn() {};
  Fn.prototype = new Array;
  var f = new Fn;
  //f是一個(gè)函數(shù)，按道理說他的構(gòu)造函數(shù)應(yīng)該是Function,但是修改其原型鏈后，它的constructor變成了Array.
  console.log(f.constructor == Array);  //true
</script>

Object.prototype.toString.call()　原型鏈上的Object對象的toString方法

Object.prototype.toString的作用是返回當(dāng)前方法的執(zhí)行主體(方法中的this)所屬類的詳細(xì)信息,是最全面也是最常用的檢測數(shù)據(jù)類型的方式。

返回值的類型為string類型。

<script> 
  console.log(Object.prototype.toString.call(1));          //[object Number]
  console.log(Object.prototype.toString.call(/^sf/));        //[object RegExp]
  console.log(Object.prototype.toString.call("hello"));      //[object String]
  console.log(Object.prototype.toString.call(true));        //[object Boolean]
  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]
  console.log(typeof(Object.prototype.toString.call(function() {})));    //string
</script>

您可能感興趣的文章: