JavaScript資料型別檢測總結
在js中,有四種用於檢測資料型別的方式,分別是:
- typeof用來檢測資料型別的運算子
- instanceof檢測一個例項是否屬於某個類
- constructor 建構函式
- Object.prototype.toString.call()原型鏈上的Object物件的toString方法
下面我們就來分別介紹一下上面四種方法的適用場景和侷限性。
typeof用來檢測資料型別的運算子
使用typeof檢測資料型別,返回值是字串格式。能夠返回的資料型別
是:"number","string","bolean","undefined","function","object"。
<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>
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力
群內有大量PDF可供自取,更有乾貨實戰專案視訊進群免費領取。
侷限性:
- 不能用於檢測和處理字面量方式創建出來的基本資料型別值,即原始資料型別
- instanceof的特性:只要在當前例項的原型鏈上的物件,我們用其檢測出來都為true
- 在類的原型繼承中,我們最後檢測出來的結果未必正確
constructor建構函式
是函式原型上的屬性,該屬性指向的是建構函式本身。
作用和instsnceof非常相似,與instanceof不同的是,不僅可以處理引用資料型別,還可以處理原始資料型別。
<script> let num = 12; let obj = {}; console.log(num.constructor == Number);//true console.log(obj.constructor == Object);//true </script>
但是要注意一點的是,當直接用(物件字面量或原始資料).constructor時,最好加上()。為了便於理解,我們來看一個例子。
<script> 1.constructor === Number;//報錯,Invalid or unexceped token (1).constructor === Number;//true {}.constructor === Number;//報錯,Invalid or unexceped token ({}).constructor === Number;//true </script>
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力
群內有大量PDF可供自取,更有乾貨實戰專案視訊進群免費領取。
這主要是由於js內部解析方式造成的,js會把1.constructor解析成小數,這顯然是不合理的,小數點後應該是數字,因此就會引發報錯。js會把{}解析成語句塊來執行,這時後面出現一個小數點顯然也是不合理的,因此也會報錯。為了解決這個問題,我們可以為表示式加上()使js能夠正確解析。
侷限性:我們可以把類的原型進行重寫,在重寫的過程中很可能把之前constructor給覆蓋了,這樣檢測出來的結果就是不準確的
<script> function Fn() {}; Fn.prototype = new Array; var f = new Fn; //f是一個函式,按道理說他的建構函式應該是Function,但是修改其原型鏈後,它的constructor變成了Array. console.log(f.constructor == Array);//true </script>
Object.prototype.toString.call()原型鏈上的Object物件的toString方法
Object.prototype.toString的作用是返回當前方法的執行主體(方法中的this)所屬類的詳細資訊,是最全面也是最常用的檢測資料型別的方式。
返回值的型別為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>