溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

javascript中判斷數(shù)據(jù)類型的方法

發(fā)布時間:2021-06-09 14:33:49 來源:億速云 閱讀:175 作者:小新 欄目:web開發(fā)

這篇文章主要介紹了javascript中判斷數(shù)據(jù)類型的方法,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

js判斷數(shù)據(jù)類型的方法:1、利用typeof操作符,語法“typeof 變量”;2、利用instanceof運(yùn)算符;3、利用constructor屬性,語法“變量.constructor==數(shù)據(jù)類型”;4、利用toString()函數(shù)。

本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

javascript判斷數(shù)據(jù)類型的方法

1、typeof

  typeof 是一個操作符,其右側(cè)跟一個一元表達(dá)式,并返回這個表達(dá)式的數(shù)據(jù)類型。

  返回的結(jié)果用該類型的字符串(全小寫字母)形式表示,包括以下 7 種:string、number、boolean、symbol、undefined、object、function 等。

typeof 'a'; // string 有效
typeof 1; // number 有效
typeof true; //boolean 有效
typeof Symbol(); // symbol 有效
typeof undefined; //undefined 有效
typeof new Function(); // function 有效
typeof null; //object 無效
typeof [1] ; //object 無效
typeof new RegExp(); //object 無效
typeof new Date(); //object 無效

總結(jié):

  • 對于基本類型,除 null 以外,均可以返回正確的結(jié)果。

  • 對于引用類型,除 function 以外,一律返回 object 類型。

  • 對于 null ,返回 object 類型。

  • 對于 function 返回  function 類型。

  其中,null 有屬于自己的數(shù)據(jù)類型 Null ,引用類型中的數(shù)組、日期、正則 也都有屬于自己的具體類型,而 typeof 對于這些類型的處理,只返回了處于其原型鏈最頂端的 Object 類型。

2、instanceof

  instanceof 檢測的是原型,表達(dá)式為:A instanceof B,如果 A 是 B 的實例,則返回 true,否則返回 false。

[] instanceof Array; // true
new Date() instanceof Date;// true
 
function Person(){};
new Person() instanceof Person;//true
 
[] instanceof Object; // true
new Date() instanceof Object;// true
new Person instanceof Object;// true

  雖然 instanceof 能夠判斷出 [ ] 是Array的實例,但它認(rèn)為 [ ] 也是Object的實例,為什么呢?

   從 instanceof 能夠判斷出 [ ].__proto__  指向 Array.prototype,而 Array.prototype.__proto__ 又指向了Object.prototype,最終 Object.prototype.__proto__ 指向了null,標(biāo)志著原型鏈的結(jié)束。因此,[ ]、Array、Object 就在內(nèi)部形成了一條原型鏈,如下圖所示:

javascript中判斷數(shù)據(jù)類型的方法

   從原型鏈可以看出,[] 的 __proto__  直接指向Array.prototype,間接指向 Object.prototype,所以按照 instanceof 的判斷規(guī)則,[] 就是Object的實例。依次類推,類似的 new Date()、new Person() 也會形成一條對應(yīng)的原型鏈 。

  因此,instanceof 只能用來判斷兩個對象是否屬于實例關(guān)系, 而不能判斷一個對象實例具體屬于哪種類型。

   針對數(shù)組的這個問題,ES5 提供了 Array.isArray() 方法 。該方法用以確認(rèn)某個對象本身是否為 Array 類型,而不區(qū)分該對象在哪個環(huán)境中創(chuàng)建。

if (Array.isArray(value)){
   //對數(shù)組執(zhí)行某些操作
}

  Array.isArray() 本質(zhì)上檢測的是對象的 [[Class]] 值。

  [[Class]] 是對象的一個內(nèi)部屬性,里面包含了對象的類型信息,其格式為 [object Xxx],Xxx 就是對應(yīng)的具體類型 。對于數(shù)組而言,[[Class]] 的值就是 [object Array] 。

3、constructor

  當(dāng)一個函數(shù) F被定義時,JS引擎會為F添加 prototype 原型,然后再在 prototype上添加一個 constructor 屬性,并讓其指向 F 的引用。如下圖所示:

javascript中判斷數(shù)據(jù)類型的方法

  當(dāng)執(zhí)行 var f = new F() 時,F(xiàn) 被當(dāng)成了構(gòu)造函數(shù),f 是F的實例對象,此時 F 原型上的 constructor 傳遞到了 f 上,因此 f.constructor == F

javascript中判斷數(shù)據(jù)類型的方法

  可以看出,F(xiàn) 利用原型對象上的 constructor 引用了自身,當(dāng) F 作為構(gòu)造函數(shù)來創(chuàng)建對象時,原型上的 constructor 就被遺傳到了新創(chuàng)建的對象上, 從原型鏈角度講,構(gòu)造函數(shù) F 就是新對象的類型。這樣做的意義是,讓新對象在誕生以后,就具有可追溯的數(shù)據(jù)類型。

  同樣,JavaScript 中的內(nèi)置對象在內(nèi)部構(gòu)建時也是這樣做的,如下圖所示。

javascript中判斷數(shù)據(jù)類型的方法

總結(jié):

  1. null 和 undefined 是無效的對象,因此是不會有 constructor 存在的,這兩種類型的數(shù)據(jù)需要通過其他方式來判斷。

  2. 函數(shù)的 constructor 是不穩(wěn)定的,這個主要體現(xiàn)在自定義對象上,當(dāng)開發(fā)者重寫 prototype 后,原有的 constructor 引用會丟失,constructor 會默認(rèn)為 Object。

4、toString

  toString() 是 Object 的原型方法,調(diào)用該方法,默認(rèn)返回當(dāng)前對象的 [[Class]] 。這是一個內(nèi)部屬性,其格式為 [object Xxx] ,其中 Xxx 就是對象的類型。

  對于 Object 對象,直接調(diào)用 toString()  就能返回 [object Object] 。而對于其他對象,則需要通過 call / apply 來調(diào)用才能返回正確的類型信息。

  語法:Object.prototype.toString.call(value);

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局對象 global 的引用

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“javascript中判斷數(shù)據(jù)類型的方法”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI