JavaScript型別檢測

weixin_34232744發表於2018-01-30
JavaScript型別

原始型別的檢測

對於原始型別最簡單可靠的檢測方法就是typeof運算子了。

  • 對於字串，typof返回'string'。
  • 對於數字，typof返回'number'。
  • 對於布林值，typof返回'boolean'。
  • 對於undefined，typof返回'undefined'。

typeof還有一個獨特之處，對於未宣告的變數不會報錯。未宣告的變數和值為undefined的變數都將返回'undefined';

但是對於null,typof返回'object'.對於null，只用===和null比較就可以了。

引用型別的檢測

typeof對除了函式外的所有的引用型別都返回'object'，所以引用型別不能使用typeof來判斷了。

    console.log(typeof {});     //object
    console.log(typeof []);     //object
    console.log(typeof new Date());     //object
    console.log(typeof new RegExp);     //object
複製程式碼

instanceof

檢測引用型別一個比較好的方法是使用instanceof運算子。

    //檢測日期
    if (value instanceof Date) {
        console.log(value.getTime());
    }

    //檢測陣列
    if (value instanceof Array) {
        value.forEach(() => {});
    }
複製程式碼

但是instanceof有兩個缺點：

  • instanceof不僅檢測它作用的物件的建構函式，還是檢測該物件的原型鏈的建構函式，只要有一個符合，就會返回true；比如：
    var arr = new Array();
    var obj = new Object();
    console.log( arr instanceof Object);    //true
    console.log( arr instanceof Array);    //true
複製程式碼

在判斷Object型別時，就會不準確。

  • instanceof有一個嚴重的限制，就是在巢狀iframe中的頁面中可能出問題，如果判斷的資料並不是屬於該視窗下的資料，instanceof就會失效，原因在於不同視窗下的window物件不是同一個引用。

Object.prototype.toString

Kangax發現繫結某個值為執行環節(this)呼叫Object原型的toString方法，會精確地返回改值的型別。

console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call(new Date())); // "[object Date]"
console.log(Object.prototype.toString.call(5)); // "[object Number]"
console.log(Object.prototype.toString.call(['abc'])); // "[object String]"
console.log(Object.prototype.toString.call([undefined])); // "[object Undefined]"
console.log(Object.prototype.toString.call([null])); // "[object Null]"
console.log(Object.prototype.toString.call(function() {})); // "[object Fuction]"
複製程式碼

該方法在任何情況下都是可靠地，已經被大多數javascript類庫所採用，對於原始型別typeof更簡單一些，和該方法效果一致。

對於陣列，es5引入了Array.isArray()方法來判斷，IE9+、Firefox4+、Safari5+、Opera10.5+和Chrome都實現了該方法。

對於函式，typeof也會返回'function'，這也是一個可靠的判斷方法。但是在IE8和更早版本的IE中，typeof檢測DOM方法都會返回'object'。

    // IE 8和更早的IE
    console.log(typeof document.getElementById);    //'object'
複製程式碼

如果不相容IE8，就不用考慮這個問題了。對於DOM方法，DOM有明確定義，如果有該成員則意味著它是一個函式，所以我們經常採用in操作符來判斷：

    // 檢測DOM方法
    if ('querySelector' in document){
        image = document.querySelector('img');
    }
複製程式碼

總結

String、Number、Boolean、undefined、function(DOM方法除外)可以採用typeof來判斷。 引用型別採用Object.prototype.toString方法判斷。

相關文章