關(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-08
VSCode多行注釋插件KoroFileHeader使用示例
這篇文章主要為大家介紹了VSCode多行注釋插件KoroFileHeader使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
微信小程序中的onLoad詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序中的onLoad詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04
JavaScript 中for/of,for/in 的詳細(xì)介紹
這篇文章主要介紹了JavaScript 中的for/of, for/in,在 JavaScript中,for 循環(huán)有幾種常見(jiàn)的寫(xiě)法,西阿棉文章有寫(xiě)法的詳細(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-10
Web項(xiàng)目如何配置Eslint過(guò)程詳解
這篇文章主要為大家介紹了Web項(xiàng)目如何配置Eslint過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09

