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

dayday_up 發布于2019-08-23 16:30 / 3204人閱讀

摘要：測試構造函數的屬性是否出現在對象的原型鏈中的任何位置。是全局方法時使用的原型方法可不填全局方法支持和添加到數據類型的原型中，不支持和的可以替代使用方式全局方法原型方法測試代碼原型方法不支持和，請用

1. 常用的typeof

對于array、object、null的判斷是不友好的，可以看下圖的執行結果。

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.

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

如下圖：

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
  });
})()

使用方式：

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

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

測試代碼：

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"))

GPU云服務器云服務器 js 數據類型判斷 js 判斷數據類型 js數據類型判斷 js判斷數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103099.html

【ViewPager2避坑系列】瞬間暴增數個Fragment

摘要：前言最近我在關注的使用，期間一直基于官方的調試，今天遇到一個奇葩的問題，捉摸了半天最終找到原因，原來是中布局的問題，事后感覺有必要分享一下這個過程，一來可以鞏固測量的知識，二來希望大家能避開這個坑閱讀指南代碼基于，看官老爺最好能下載前言最近我在關注ViewPager2的使用，期間一直基于官方的Demo調試android-viewpager2，今天遇到一個奇葩的問題，捉摸了半天最終找到原因，...

番茄西紅柿 2019-05-23 15:17 評論0 收藏0
小程序webview使用避坑（因為開發者配置域名錯誤導致打開失敗）

摘要：解決方案對瀏覽器進行判斷，如果是小程序官方判斷條件就跳過授權登錄。這樣就規避了訪問非授權業務域名問題。問題小程序webview使用時出現了這樣的錯誤提示前提條件：嵌入的頁面域名已經申請過業務域名 showImg(https://segmentfault.com/img/bVYr90?w=876&h=277); 然后訪問報如下錯誤 showImg(https://segmentfa...

shengguo 2019-08-21 17:37 評論0 收藏0
小程序webview使用避坑（因為開發者配置域名錯誤導致打開失敗）

摘要：解決方案對瀏覽器進行判斷，如果是小程序官方判斷條件就跳過授權登錄。這樣就規避了訪問非授權業務域名問題。問題小程序webview使用時出現了這樣的錯誤提示前提條件：嵌入的頁面域名已經申請過業務域名 showImg(https://segmentfault.com/img/bVYr90?w=876&h=277); 然后訪問報如下錯誤 showImg(https://segmentfa...

MonoLog 2019-08-01 17:59 評論0 收藏0