javascript欄位偵測方法及根據jquery寫的工具方法。

介紹js的四種類型檢測方法及根據jquery寫的工具方法

簡介

今天咱們主要研究的是關於js的四種類型檢測方法，說到js的類型檢測，就不得不提js的幾種資料類型，類型就不詳情說明了，畢竟文檔上面都一清二楚，我們就只羅列出來：

文檔地址：

##基本資料類型: String , Boolean , undefined , null , Number , Symbol , BigInt
引用資料類型: Object , Array , RegExp ......

我們今天講的偵測類型有以下四種以及最後根據jquery寫出來的更方便的工具方法：

typeof [重點]
instanceof
#constructor
Object.prototype.toString.call [重點]

typeof

1 . 基本內容

#定義
: 能夠偵測基本型別的運算子

語法
: typeof [value]

傳回值
: [「string」、「number」、「boolean」、「undefined」、「object」、「function」、「 symbol」、「bigint」]

結果如圖所示:

2 .缺陷與不足

雖然看上面似乎typeof非常好用，但是我們一般都曉得好用的東西總會少不了一定的缺陷，就如人也無法十全十美

數組對象，正則對象，new出來的數字對象.. .... 全部回傳的是字串形式的Object
NaN / Infinity
皆為「number」
typeof null 為"object"

結果如圖所示：

3.常用場景

let x = {};
if（x != null && typeof x === "object"）{
	判断是否是对象，由于typeof null也是返回object，因此要排除它
}复制代码

登入後複製

instanceof

1 .基本內容

#定義
: 用來偵測建構子的prototype 屬性是否出現在某個實例物件的原型鏈上。

語法
: object instanceof constructor

#傳回值
: 布林值

##結果如圖所示:

[註] {}會在這裡當成一個程式碼區塊，因此第一行報錯

2 . 缺陷与不足

1 . 无法检测基本类型，返回的都是false ，只能检测引用类型
2 . 由于instanceof是根据原型来检测类型的，返回值也是布尔类型，因此无法直观的看出数据类型
3 . 因为原型可以更改，有时候利用instanceof来判断不一定十分准确

结果如图所示：

constructor

1 . 基本内容

定义
: 通过构造器来判断类型。

语法
: target.constructor == "类型名字"

结果如图所示 :

2 . 缺陷与不足

1 . 原理基本和instanceof一样，都是根据原型判断

Object.prototype.toString.call()

1 . 基本内容

定义
: 返回一个表示该对象的字符串。

语法
: Object.prototype.toString.call(params)

返回值
: "[object 类型]"

结果如图所示 :

2 . 基本原理

Object.prototype.toString.call()中“[object 类型]”返回的值是由Symbol.toStringTag决定

如图所示：

根据jquery写出的判断方法

1.代码实现

var class2type = {};
["Boolean","Number","String","Function","Array","Date","RegExp","Object","Error","Symbol","BigInt","GeneratorFunction"].forEach(item=>{
    class2type["[object "+item+"]"] = item.toLowerCase();
})
function toType(obj){
      if(obj==null){
        return obj+'';
      }
      return typeof obj === "object" || typeof obj === "function" ?
              class2type[toString.call(obj)] || "object" : typeof obj;
}复制代码

登入後複製