JavaScript類型檢測詳解

張金寶發布于2019-08-20 10:28 / 1519人閱讀

摘要：種原始類型對象屬性種原始類型中種原始類型為，，，，發現除外的其他種基本類型均可以用來識別因為會得到，所以直接用來檢測對象的對象包括內置對象，，等和自定義對象。其他檢測方法，都各有缺陷，不能精確。屬性檢測屬性是否在實例對象中應該用。

本篇介紹一下如何檢測JavaScript各種類型。

? 5種原始類型
? 對象
? Function
? Array
? 屬性

5種原始類型
JavaScript中5種原始類型為string，number，boolean，undefined，null

var name = "Jack";
var age = 32;
var single = false;
var app;    //undefined

console.log(typeof name);   //string
console.log(typeof age);    //number
console.log(typeof single); //boolean
console.log(typeof app);    //undefined
console.log(typeof null);   //object

發現除null外的其他4種基本類型均可以用typeof來識別：

if(typeof name === "string") { name += "Zhang"; }
if(typeof age === "number") { age++; }
if(typeof single === "boolean" && single) { … }
if(typeof app === "undefined")  { app = {}; }

因為typeof null會得到object，所以直接用===來檢測null：
if(el === null) { … }
對象
JavaScript的對象包括內置對象（Date，RegExp ，Error等）和自定義對象。
（注意，Function和Array雖然也都是內置對象，但下一節多帶帶講）
對象不能像基本類型那樣用typeof來檢測了，因為檢測出來的結果都是object：

console.log(typeof new Date());    //object
console.log(typeof new RegExp());  //object
console.log(typeof new Error());   //object
console.log(typeof new Person());  //用typeof檢測出自定義對象也是object

要改用instanceof來檢測：

var date = new Date();
var reg = new RegExp();
var err = new Error();
var me = new Person();

if(date instanceof Date) {    //檢測日期
    year = date.getFullYear(); 
}
if(reg instanceof RegExp) {    //檢測正則表達式
    reg.test(...); 
}
if(err instanceof Error) {    //檢測異常
    throw err; 
}
if(me instanceof Person) {    //檢測自定義對象
    ... 
}

但自定義對象有個問題，假設瀏覽器frameA里和frameB里都定義了Person。 frameA里定義了me對象，用me instanceof Person檢測出來為true。但當自定義對象me傳給frameB后，在frameB里instanceof會是false。
本節一開頭就說了，Function和Array雖然也都是內置對象，但留到下一節講。原因就是Function和Array也有和自定義對象相同的上述問題。因此Function和Array一般不用instanceof

Function
上面說了用instanceof檢測Function不能跨frame。因此用typeof來檢測，它可跨frame：
var func = function(){};
if(typeof func === "function") { … }
但IE8以前用typeof來檢測DOM系函數會得到object，因此IE8以前改用in：

console.log(typeof document.getElementById);        //object，不是function
console.log(typeof document.getElementsByTagName);  //object，不是function
console.log(typeof document.createElement);         //object，不是function

//IE8以前的IE瀏覽器，要改用in來檢測是否支持DOM函數

if("getElementById" in document) { … }        
if("getElementsByTagName" in document) { … }
if("createElement" in document) { … }

Array
上面說了用instanceof檢測Array不能跨frame。ES5之前都自定義檢測方法。其中最精確的方法：依賴Array的toString會返回固定字符串”[Object Array]”的事實來檢測：

function isArray(arr) {
    return Object.prototype.toString.call(arr) === "[Object Array]";
}

該方法精確且優雅，因此被很多庫所采納，最終在ES5被作為isArray方法引入了Array，參照MDN。現在你不需要自定義檢測方法了，直接用isArray()即可。
其他檢測方法，都各有缺陷，不能100%精確。但作為一種思路是可以借鑒的。例如依賴Array是唯一包含sort方法的對象的事實來檢測：

function isArray(arr) {
    return typeof arr.sort === "function";
}

如果是自定義對象也定義了sort方法，該方法就失效了。
屬性
檢測屬性是否在實例對象中應該用hasOwnProperty。如果你不關心屬性是在實例對象中還是在原型對象中，可以簡單點用in
例如檢測字面量對象屬性：

var Person = {
    name: "Jack",
    age: 33
};
if("name" in Person) { … }                 //true
if(Person.hasOwnProperty("name")) { … }    //true

例如實例對象屬性：

var Person = function (name, age) {
    this.name = name;
    this.age = age;
};
Person.prototype.location = "Shanghai";

var me = new Person("Jack", 33)
if("name" in me) { … }                 //true
if(me.hasOwnProperty("name")) { … }    //true
if("location" in me) { … }             //true
if(me.hasOwnProperty("location")) { … }//false

除此之外其他方法都不好：

if (object[propName])            //Not Good，你怎么知道屬性值不是0或1？
if (object[propName] === null)        //Not Good，你怎么知道屬性值不是null？
if (object[propName] === undefined)    //Not Good，你怎么知道屬性值不是undefined？

總結
**用typeof檢測string，number，boolean，undefined，Function
用===檢測null
用isArray()檢測Array
用instanceof檢測內置對象（除Function和Array）和自定義對象
用hasOwnProperty檢測屬性是否在實例對象中。如果你不關心屬性是在實例對象中還是在原型對象中，可以簡單點用in**

更多資源上：去轉盤網；或者加我的QQ群一起討論學習js，css等技術（QQ群：512245829）

云服務器 GPU云服務器數據類型詳解 javascript詳解 SQL數據類型詳解 javascript閉包詳解

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

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

詳解javascript類型判斷

引言 javascript數據有六大基本類型:Number,String,Boolean,Null,Undefined,Symbol,一種引用類型Object typeof檢測基本類型 typeof可以用來檢測除null之外的基本類型,還可以檢測函數showImg(https://segmentfault.com/img/bVCLRr);showImg(https://segmentfault....

blair 2019-08-20 10:47 評論0 收藏0
【JS基礎】Object 對象的原型概念詳解

摘要：使用操作符，創建一個對象，并且執行構造函數方法。使用可以返回一個字典型對象對象原型每一個對象都有一個內置的屬性指向構造它的函數屬性而構造函數的則指向構造函數本生。對象概念在 javascript 中, 一切引用類型均為對象。如 function Foo () {} 中，Foo本身就是一個對象的引用。創建對象方式字面量方式 new 構造函數函數聲明 Object.creat...

appetizerio 2019-08-22 14:05 評論0 收藏0
FCC成都社區·前端周刊第 2 期

摘要：詳情正式發布于號正式發布，版本代號為。上個月有次下載量，大大超過了的下載量。但對于偽類選擇器，其總是顯示為未使用。詳情新增允許第三方嵌入的網站可請求訪問第一方網站的，但這并不是指放寬了同源策略。 01. Propel：JS的科學計算框架 Propel 是一種 JavaScript 科學計算框架，類似于 Python 中的科學計算庫 NumPy，也就是說利用 JS 也可以進行機器學習啦。...

Muninn 2019-08-30 14:17 評論0 收藏0
FCC成都社區·前端周刊第 2 期

摘要：詳情正式發布于號正式發布，版本代號為。上個月有次下載量，大大超過了的下載量。但對于偽類選擇器，其總是顯示為未使用。詳情新增允許第三方嵌入的網站可請求訪問第一方網站的，但這并不是指放寬了同源策略。 01. Propel：JS的科學計算框架 Propel 是一種 JavaScript 科學計算框架，類似于 Python 中的科學計算庫 NumPy，也就是說利用 JS 也可以進行機器學習啦。...

tinna 2019-08-22 15:51 評論0 收藏0
FCC成都社區·前端周刊第 2 期

摘要：詳情正式發布于號正式發布，版本代號為。上個月有次下載量，大大超過了的下載量。但對于偽類選擇器，其總是顯示為未使用。詳情新增允許第三方嵌入的網站可請求訪問第一方網站的，但這并不是指放寬了同源策略。 01. Propel：JS的科學計算框架 Propel 是一種 JavaScript 科學計算框架，類似于 Python 中的科學計算庫 NumPy，也就是說利用 JS 也可以進行機器學習啦。...

zero 2019-08-02 10:04 評論0 收藏0