JS數據類型判斷--避坑指南

1. 經常使用的typeof

對於array、object、null的判斷是不友好的,能夠看下圖的執行結果。javascript

clipboard.png

var obj = {
  number:123,
  string: '123',
  bool: true,
  obj: {},
  arr: [],
  n: null,
  undef: undefined,
  fn: function () {}
}

for(key in obj) {
  console.log(key + ": " + typeof obj[key])
}

2. instanceof

instanceof測試構造函數的prototype屬性是否出如今對象的原型鏈中的任何位置。
若是你瞭解原型鏈,你會知道原型鏈的複雜性,instanceof獲得的值並非固定不變的,它會沿着原型鏈查找,最明顯的是全部的基本數據類型都繼承與Object.protype.java

[任何數據類型] instanceof Object
> true

以下圖:
clipboard.png函數

3.最終方案:Object.prototype.toString.call()

下面是兼容性方案最好、最全面、也是最有效的:
下面有兩種實現方式(原型方法和全局方法),能夠根據本身的須要選擇。測試

(function () {
  function isType(data,type) {
    // data是全局方法時使用的,原型方法可不填
    return Object.prototype.toString.call(data || this) === '[object ' + type + ']'
  }

  // 全局方法支持null和undefined
  // window.isType = isType

  // 添加到數據類型的原型中,不支持null和undefined
  // ES6的proxy能夠替代defineProperty
  Object.defineProperty(Object.prototype,'isType',{
    value:isType,
    writable:true,
    enumerable:false,
    configurable:true
  });
})()

使用方式:this

var str = 'abc';
// 全局方法
isType('String', str) // True

// 原型方法
str.isType('String')

測試代碼:spa

var obj = {
  test: {
    number:123,
    string: '123',
    obj: {},
    bool: true,
    arr: [],
    n: null,
    undef: undefined,
    fn: function () {

    }
  }
}
// 原型方法不支持null和undefined,請用「===」
console.log(obj.test.number.isType('Number'))
console.log(obj.test.number.isType('String'))

console.log(obj.test.string.isType('String'))
console.log(obj.test.string.isType('Number'))

console.log(obj.test.obj.isType('Object'))
console.log(obj.test.obj.isType('Array'))

console.log(obj.test.arr.isType('Array'))
console.log(obj.test.arr.isType('Object'))


console.log(obj.test.fn.isType('Function'))
console.log(obj.test.fn.isType('Object'))

clipboard.png

相關文章
相關標籤/搜索