關於JS數據類型檢測的多種方式總結

Posted on by

背景

總所周知，js是一門動態的弱類型腳本語言，其采用動態的類型系統以及基於原型的繼承方式。

缺乏類型的靜態約束，這意味著數據類型導致的程序錯誤並不能在編譯階段及時發現，要想寫出健壯的代碼，就必須在運行時各種的check&兼容，所以能夠熟練準確的檢測數據類型成為掌握這門語言最重要的基礎之一。

判斷數據類型的手段有哪些？

總的來說大致有以下幾種：typeof、instanceof、Object.prototype.toString、constructor、鴨式類型、及針對特定類型的檢測方法Array.isArray(),Number.isNaN()，雖然方法很多，但他們的使用場景有所不同。

1. 用typeof判斷基礎數據類型：

返回值有undefined、string、number、boolean、object、function、symbol七種。

可以看出，typeof作為官方提供的類型檢測操作符，在檢測undefined、string、boolean、symbol這些基本數據類型及function方面是十分靠譜的。表現拉垮的地方主要在於

1） 不能對具體對象類型（Array、Date、regExp）進行區分。
2） typeof null === ‘object’ // 竟然是true。。。。

缺陷 2）可以避免，在判斷對象引用類型時多判斷一句即可，typeof x === ‘object’ &&  x !== null。但是不能區分對象的具體類型，確實是個很大痛點。

2. 用instanceof判斷對象數據類型

此運算符用於檢測某個構造函數的prototype是否出現在目標對象的原型鏈上。

這是一種預測的檢測方式，並不會像typeof一樣直接將數據類型以字符串的方式進行返回，而是你需要預判對象類型的構造函數，最終返回一個boolean值。

檢測規則其實從命名就可以看出，判斷實例是否是由某個構造函數所創建的，那麼知道瞭原理，現在動手實現一個屬於自己的instanceof。

function myInstanceof(target,constructor){
  const baseType = ['string', 'number','boolean','undefined','symbol']
    if(baseType.includes(typeof(target))) { return false }
    //原型鏈其實就是個對象組成的鏈表，遍歷這個鏈表，
  let prototype = Object.getPrototypeOf(target);
    while(prototype){
        //一旦鏈上有對象有符合，就返回true
      if(prototype === constructor.prototype){
        return true
      }else{
        prototype = Object.getPrototypeOf(prototype)
      }
    }
    return false
}
console.log(myInstanceof([],Array))

在js裡，可以從廣義上認為萬物源於對象，因為實例雖然是通過構造函數創建的，但是構造函數本身隻是沒有感情的生產機器，實例的靈魂和性格（公共屬性和方法）都是共享自構造函數的prototype屬性指向的那個原型對象，而且原型對象都是純對象，純對象又是由Object構造函數創建的，那麼就會造成下邊這種後果。

對於數組，遍歷原型鏈上的對象,Array.prototype Object.prototype都會出現。

並且，對字面量方式創建的基本數據類型無法進行判斷。比如

如何彌補上邊的缺陷呢，答案是可以在上邊特殊的場景中采用下邊的constructor代替instanceof。

3. 用contructor屬性

首先先明確。constructor是原型上的屬性，實例繼承自原型，所以實例上也能直接訪問此屬性。
首先看下contructor的通用性表現

意外的表現不錯，除瞭null、undefined，有contructor屬性的基礎（包裝）類型或者對象類型都能準確判斷。

能準確區分Array|Object 因為它沒有instanceof那樣會遍歷整條原型鏈，隻是在實例身上進行判斷。但也有個致命的缺陷，實例上的這一屬性太容易被修改瞭，一旦修改，這個方法就沒有意義瞭。

4. toString方法

首先，js的對象類型或者基礎類型的包裝對象都有一個toString方法。繼承自Object.prototype.toString()，調用會返回對應類型的字符串標記”[object Type]”。

這個方法有種亂拳打死老師傅，無心插柳柳成蔭的感覺，本來的作用隻是得到一個表示該對象的字符串，現在用在js類型檢測上，表現簡直不要太好，針對基礎類型及對象類型表現都非常不錯，如果非要說個缺點，隻能說返回的字符串有點復雜，使用不太方便，現在讓我們動手簡化一下。

先寫一個簡版

function isType(type,value){
    return Object.prototype.toString.call(value) === `[object ${type}]`
}
console.log(isType('Array',[]))
console.log(isType('Number',1))

這樣使用也不太方便，‘Array’ ‘Number’這樣的類型參數，很容易拼寫錯誤，所以希望方法可以預設參數，並且希望構造一個函數工廠，調用返回類似於isArray這樣的函數。在IDE中函數名相比字符串會擁有更好的代碼提示，不容易拼寫錯誤。

function isType(type){
    return function(value){
        return Object.prototype.toString.call(value) === `[object ${type}]`
    }
}

const isArray = isType('Array')
const isNumber = isType('Number')
console.log(isArray([]),isNumber(1))

這裡運用瞭高階函數的思想，保留參數+返回一個新的函數,那麼可以想到js裡bind除瞭可以綁定this，也有保留參數+返回新函數的功能，用在這裡也很合適。

function isType(type,value){
    return Object.prototype.toString.call(value) === `[object ${type}]`
}

const isArray = isType.bind(null,'Array')
const isNumber = isType.bind(null,'Number')
console.log(isArray([]),isNumber(1))

更進一步，用參數柯裡化的思想改造一波

function isType(type,value){
    return Object.prototype.toString.call(value) === `[object ${type}]`
}
function curring (fn,...args1){
    let len = fn.length;
    return function(...args2){
        const args = args1.concat(args2);
        if(args.length < len){
            return curring(fn,...args)
        }else{
            return fn(...args)
        }
    }
}
const isArray = curring(isType,'Array')
const isNumber = curring(isType,'Number')
console.log(isArray([]),isNumber(1))

最後，豐富一下支持的類型，大功告成。

const types = [
    'Null',
    'Undefined',
    'String',
    'Number',
    'Boolean',
    'Object',
    'Array',
    'Date',
    'Function',
    'RegExp',
    'Symbol',
    'Math',
]
const checkTypeUtil = {}
types.forEach((type)=>{
    checkTypeUtil[`is${type}`] = curring(isType,type)
})
export {
 checkTypeUtil
}
console.log(checkTypeUtil.isArray([]))

5. 用Array.isArray判斷數組

上邊提到 instanceof可以用來檢測數組，但是這在iframe創建的多window環境中，因為window全局環境需要隔離，所以Array和Array.prototype在每個窗口中必須是不同的，所以iframeA.Array.prototype ≠ iframeB.Array.prototype，所以 iframeA.arr instanceof iframeB.Array必定是返回false，這是小概率的事件，但是在使用iframe的場景裡，互相傳值，也是非常可能發生的。使用ES6提供的Array.isArray就沒有這個問題，可以準確判斷數組。

可以這樣 pollify

if (!Array.isArray) {
  Array.isArray = function(x) {
    return Object.prototype.toString.call(x) === '[object Array]';
  };
}

6.區分ArrayLike與Array

類數組的定義是：

  • 擁有length屬性，其它屬性（索引）為非負整數（對象中的索引會被當做字符串來處理
  • 不具有數組所具有的方法
function isLikeArray(x){
    if(!(typeof x === 'object' && x !== null)){
        return false
    }
    return typeof x.length === 'number' && x.length >= 0 && !Array.isArray(x)
}

類數組可以用Array.from Array.prototype.slice.call(val)來轉換為真正的數組。

7.判斷一個對象是否是純對象（or普通對象）

純對象的定義：特指通過一下三種方式創建的對象

  • new Object
  • 對象字面量創建 {}
  • Object.create(null)

jquery、lodash源碼都是采用下邊的方法來檢測

const funcToString = Function.prototype.toString
const objectCtorString = funcToString.call(Object)

function isPlainObject(value){
    // 先用toString先排除其他數據類型
    if(!value || !Object.prototype.toString.call(value) === "[object Object]"){
        return false
    }
    const proto = Object.getPrototypeOf(value)
    if(proto === null){//兼容Object.create(null)這樣創建的對象
        return true
    }
    const Ctor = Object.prototype.hasOwnProperty.call(proto,'constructor') && proto.constructor;
    if(typeof Ctor !== 'function'){
        return false
    }
    // 這裡通過字符串判斷構造函數是否是Object，而不是直接使用instanceof，是為瞭避免上邊提到的 多window環境Object不同的問題
    if(funcToString.call(Ctor) === objectCtorString){
        return true
    }
    return false
}
console.log(isPlainObject(Object.create(null)))
console.log(isPlainObject(new Object))
console.log(isPlainObject({a:1}))

8. NaN如何檢測，Number.isNaN與isNaN有啥區別

結論：Number.isNaN會嚴格的判斷傳入的值是否是直接等於NaN。

isNaN則會先進行Number()轉換，然後再進行是否是NaN的判斷。

9. 鴨式類型檢測法

其實上邊利用constuctor判斷數據類型，就是采用瞭這種方法。判斷一個動物是不是鴨子，那麼通過看起來像鴨子，叫起來像鴨子這樣簡單的經驗判斷就可大致進行判斷。

比如判斷一個對象是不是一個Promise，就可以這樣

function isPromise(x){
    if(!(x instanceof Promise)){
        return false
    }
    return typeof x.then === 'function'
}

總結

到此這篇關於JS數據類型檢測的文章就介紹到這瞭,更多相關JS數據類型檢測內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：