關(guān)于js typeof 與 instanceof 判斷數(shù)據(jù)類型區(qū)別及開(kāi)發(fā)使用
前言:
日常的開(kāi)發(fā)中,我們經(jīng)常會(huì)遇到判斷一個(gè)變量的數(shù)據(jù)類型或者該變量是否為空值的情況,你是如何去選擇判斷類型的操作符的?本文來(lái)總結(jié)記錄一下我們開(kāi)發(fā)人員必須掌握的關(guān)于 typeof
和 instanceof
的知識(shí)點(diǎn)以及在開(kāi)發(fā)中的使用建議,同時(shí)在面試過(guò)程中也經(jīng)常會(huì)遇到這樣的問(wèn)題。
1、typeof 操作符
typeof
操作符,確定任意變量的數(shù)據(jù)類型,確切說(shuō),它是判斷一個(gè)變量是否為字符串、數(shù)值、布爾值或 undefined 的最好方式。其返回值為字符串類型,其使用方法如下:typeof
是一個(gè)操作符,不是一個(gè)函數(shù),但是使用可以將變量作為參數(shù)傳入:
a、typeof operand
b、typeof (operand)
(1)返回值為字符串類型,其中:
返回值 |
含義值 |
"undefined" |
未定義 |
"boolean" |
布爾值 |
"string" |
字符串 |
"number" |
數(shù)值 |
"object" |
對(duì)象(而不是函數(shù))或 null |
"function" |
函數(shù) |
"symbol" |
符號(hào) |
(2)常見(jiàn)使用方法
console.log(typeof undefined);//'undefined' console.log(typeof true);//'bpplean' console.log(typeof ("number")); //'string' console.log(typeof "number"); //'string' console.log(typeof 1);//'number' console.log(typeof Symbol());//'symbol' //對(duì)于Array,Null等特殊對(duì)象使用typeof一律返回object,這正是typeof的局限性 console.log(typeof null); //'object' console.log(typeof [1, 2, 3]);//'object' console.log(typeof undefined); //'undefined' //通過(guò) typeof 操作符來(lái)區(qū)分函數(shù)和其他對(duì)象 function f1() { console.log(111); } console.log(typeof f1); //'function' console.log(typeof f1()); // 111 'undefined'
(3)不能通過(guò)typeof 來(lái)判斷一個(gè)變量是否存在
var a; if (a === undefined) { console.log("變量不存在") } else { console.log("變量存在") } // 變量不存在
2、instanceof 操作符
typeof
雖然對(duì)原始值很有用,但它對(duì)引用值的用處不大。我們通常不關(guān)心一個(gè)值是不是對(duì)象,而是想知道它是什么類型的對(duì)象。為了解決這個(gè)問(wèn)題,ECMAScript
提供了 instanceof
操作符。使用如下:
function f1() { console.log(111); } console.log(f1 instanceof Object);//true console.log(f1 instanceof Function);//true console.log(f1 instanceof RegExp);//false
所有引用值都是 Object
的實(shí)例,因此通過(guò) instanceof
操作符檢測(cè)任何引用值和Object
構(gòu)造函數(shù)都會(huì)返回 true
。
- 類似地,如果用
instanceof
檢測(cè)原始值,則始終會(huì)返回false
,因?yàn)樵贾挡皇菍?duì)象。
instanceof
運(yùn)算符用于判斷構(gòu)造函數(shù)的 prototype
屬性是否出現(xiàn)在對(duì)象的原型鏈中的任何位置。其實(shí)現(xiàn)原理如下:
function myInstanceof(left, right) { let proto = Object.getPrototypeOf(left), // 獲取對(duì)象的原型 prototype = right.prototype; // 獲取構(gòu)造函數(shù)的 prototype 對(duì)象 // 判斷構(gòu)造函數(shù)的 prototype 對(duì)象是否在對(duì)象的原型鏈上 while (true) { if (!proto) return false; if (proto === prototype) return true; proto = Object.getPrototypeOf(proto); } }
3、typeof 和 instanceof 的區(qū)別以及開(kāi)發(fā)中的使用建議
typeof
與 instance
都是判斷數(shù)據(jù)類型的方法,區(qū)別如下:
typeof
會(huì)返回一個(gè)變量的基本類型,instanceof
返回的是一個(gè)布爾值instanceof
可以準(zhǔn)確地判斷復(fù)雜引用數(shù)據(jù)類型,但是不能正確判斷基礎(chǔ)數(shù)據(jù)類型- 而
typeof
也存在弊端,它雖然可以判斷基礎(chǔ)數(shù)據(jù)類型(null
除外),但是引用數(shù)據(jù)類型中,除了function
類型以外,其他的也無(wú)法判斷
可以看到,上述兩種方法都有弊端,并不能滿足所有場(chǎng)景的需求
如果需要通用檢測(cè)數(shù)據(jù)類型,建議采用Object.prototype.toString
,調(diào)用該方法,統(tǒng)一返回格式“[object Xxx]”
的字符串。使用如下:
console.log(Object.prototype.toString.call(undefined)) //"[object Undefined]" console.log(Object.prototype.toString.call(true)) // "[object Boolean]" console.log(Object.prototype.toString.call('1')) // "[object String]" console.log(Object.prototype.toString.call(1)) // "[object Number]" console.log(Object.prototype.toString.call(Symbol())) // "[object Symbol]" console.log(Object.prototype.toString.call({})) // "[object Object]" console.log(Object.prototype.toString.call(function () { })) // "[object Function]" console.log(Object.prototype.toString.call([])) //"[object Array]" console.log(Object.prototype.toString.call(null)) //"[object Null]" console.log(Object.prototype.toString.call(/123/g)) //"[object RegExp]" console.log(Object.prototype.toString.call(new Date())) //"[object Date]"
總結(jié):
到此這篇關(guān)于關(guān)于js typeof
與 instanceof
判斷數(shù)據(jù)類型區(qū)別及開(kāi)發(fā)使用的文章就介紹到這了,更多相關(guān)js typeof
與 instanceof
內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
lodash里to系列之將數(shù)據(jù)轉(zhuǎn)換成數(shù)字類型實(shí)現(xiàn)示例
這篇文章主要為大家介紹了lodash里to系列之將數(shù)據(jù)轉(zhuǎn)換成數(shù)字類型實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08VSCode多行注釋插件KoroFileHeader使用示例
這篇文章主要為大家介紹了VSCode多行注釋插件KoroFileHeader使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03微信小程序中的onLoad詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序中的onLoad詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04JavaScript 中for/of,for/in 的詳細(xì)介紹
這篇文章主要介紹了JavaScript 中的for/of, for/in,在 JavaScript中,for 循環(huán)有幾種常見(jiàn)的寫法,西阿棉文章有寫法的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11微信小程序中使用javascript 回調(diào)函數(shù)
這篇文章主要介紹了微信小程序中使用javascript 回調(diào)函數(shù)的相關(guān)資料,需要的朋友可以參考下2017-05-05詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能
這篇文章主要介紹了詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能的相關(guān)資料,希望通過(guò)本文能幫助到大家,實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-10-10Web項(xiàng)目如何配置Eslint過(guò)程詳解
這篇文章主要為大家介紹了Web項(xiàng)目如何配置Eslint過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09