JavaScript數(shù)據(jù)類型檢測的四種常用方式詳解
更新時間：2025年07月10日 08:49:27 作者：LuckySusu
在 JavaScript 開發(fā)中,判斷數(shù)據(jù)類型是一項基礎(chǔ)但非常重要的技能,由于 JavaScript 是一門動態(tài)類型語言,變量可以在運行時被賦予不同的值類型,因此我們需要掌握多種方法來準確檢測變量的數(shù)據(jù)類型,本文給大家講解了四種常見的類型檢測方式,需要的朋友可以參考下
本文將系統(tǒng)講解以下 4 種常見的類型檢測方式：
typeofinstanceofconstructorObject.prototype.toString.call()
并分析它們的使用場景、優(yōu)缺點及注意事項。
一、typeof 運算符
作用：
用于檢測變量的基本數(shù)據(jù)類型（原始類型）。
示例代碼：
console.log(typeof 2); // "number"
console.log(typeof true); // "boolean"
console.log(typeof 'str'); // "string"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
console.log(typeof {}); // "object"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
特點與限制：
| 類型 | 檢測結(jié)果 |
|---|---|
| 基本類型（Number、String、Boolean、Undefined） | 正確 |
| Null | ? 錯誤返回 "object"（歷史遺留問題） |
| 對象（Object、Array） | 都返回 "object" |
| 函數(shù) | 返回 "function" |
優(yōu)點：
- 簡單高效；
- 能正確識別基本類型；
缺點：
- 無法區(qū)分對象和數(shù)組；
null被錯誤地識別為"object"；- 不能檢測 Symbol、BigInt 等復(fù)雜類型；
二、instanceof 運算符
作用：
用于檢測某個對象是否是某個構(gòu)造函數(shù)的實例（即其原型鏈中是否存在該構(gòu)造函數(shù)的原型）。
示例代碼：
console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log('str' instanceof String); // false
console.log([] instanceof Array); // true
console.log(function() {} instanceof Function); // true
console.log({} instanceof Object); // true
特點與限制：
| 類型 | 檢測結(jié)果 |
|---|---|
| 原始類型 | ? 不支持（如數(shù)字、布爾值等） |
| 引用類型（對象、數(shù)組、函數(shù)） | ? 可以正確判斷 |
優(yōu)點：
- 能判斷引用類型的繼承關(guān)系；
- 適用于復(fù)雜對象的類型判斷；
缺點：
- 不能判斷基本類型；
- 在跨框架或跨窗口環(huán)境中可能失效（如 iframe 中的對象）；
三、constructor 屬性
作用：
每個對象都有一個 constructor 屬性，指向創(chuàng)建它的構(gòu)造函數(shù)。
示例代碼：
console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true
注意事項：
function Fn(){}
Fn.prototype = new Array();
var f = new Fn();
console.log(f.constructor === Fn); // false
console.log(f.constructor === Array); // true
優(yōu)點：
- 可以檢測基本類型；
- 能獲取構(gòu)造函數(shù)信息；
缺點：
- 如果修改了原型鏈，會導(dǎo)致判斷不準確；
- 不適合在嚴格模式下使用（某些環(huán)境會拋出錯誤）；
- 安全性較低，容易被覆蓋或篡改；
四、Object.prototype.toString.call() 方法
作用：
這是目前最通用且可靠的數(shù)據(jù)類型檢測方式。它返回 [object Type] 格式的字符串，表示對象的具體類型。
示例代碼：
console.log(Object.prototype.toString.call(2)); // "[object Number]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call('str')); // "[object String]"
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call(function(){}));// "[object Function]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
為什么不用 obj.toString()？
很多內(nèi)置對象重寫了 toString() 方法，比如：
Array.prototype.toString()返回的是元素拼接成的字符串；Function.prototype.toString()返回函數(shù)體的字符串表示；- 所以調(diào)用
obj.toString()得到的并不是對象的類型信息。
而 Object.prototype.toString.call(obj) 繞過了這些重寫，直接調(diào)用了原生的方法，返回標準格式的類型標識。
優(yōu)點：
- 可以準確判斷所有內(nèi)置類型（包括
null、undefined）； - 不受原型鏈修改影響；
- 兼容性好，適用于大多數(shù)瀏覽器和環(huán)境；
缺點：
- 寫法稍顯繁瑣；
- 不能檢測自定義類的類型（除非自己實現(xiàn) Symbol.toStringTag）；
五、總結(jié)對比表
| 檢測方式 | 是否可檢測基本類型 | 是否可檢測引用類型 | 是否可判斷 null | 是否受原型影響 | 推薦指數(shù) |
|---|---|---|---|---|---|
| typeof | ? | ?（對象/數(shù)組統(tǒng)一） | ? | 否 | ??? |
| instanceof | ? | ? | ? | ? | ???? |
| constructor | ? | ? | ? | ? | ?? |
| Object.prototype.toString.call() | ? | ? | ? | 否 | ????? |
六、一句話總結(jié)
在 JavaScript 中，typeof 適合檢測基本類型，instanceof 和 constructor 適合判斷引用類型，而 Object.prototype.toString.call() 是唯一能準確判斷所有數(shù)據(jù)類型的“終極方案”。
進階建議
- 學(xué)習(xí) ES6 的
Symbol.toStringTag，可以自定義對象的toString()表現(xiàn)； - 使用 TypeScript 或 Flow 可以提前避免類型判斷問題；
- 在 Vue / React 中結(jié)合 PropTypes 或 TypeScript 類型系統(tǒng)提升類型安全性；
- 使用
lodash.isXXX系列函數(shù)進行類型判斷；
以上就是JavaScript數(shù)據(jù)類型檢測的四種常用方式詳解的詳細內(nèi)容，更多關(guān)于JavaScript數(shù)據(jù)類型檢測的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript如何實現(xiàn)數(shù)組內(nèi)的值累加
我們會經(jīng)常在開發(fā)過程中,需要獲取數(shù)組中的值累加,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript如何實現(xiàn)數(shù)組內(nèi)的值累加的相關(guān)資料,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-11-11
javascript生成json數(shù)據(jù)簡單示例分享
這篇文章主要介紹了javascript生成json數(shù)據(jù)示例,需要的朋友可以參考下2014-02-02
今天我們聊一聊,一個非常有趣且重要的問題,如何用原生js實現(xiàn)拍照功能？這時候,有的朋友會說,為什么要用原生js實現(xiàn)呀,這么麻煩還要自己動腦子,直接用第三方庫多好呀,但是,你難道不好奇它的底層js實現(xiàn)嗎？感興趣的同學(xué)跟著小編一起來瞧瞧吧2023-12-12
javascript的trim,ltrim,rtrim自定義函數(shù)
今天用到j(luò)avascript去掉一個文本框中字符串兩端的空格，開始還以為有trim，ltrim，rtrim函數(shù)（asp中有這三個函數(shù)，弄混了），結(jié)果找半天，沒有找到。最后找到用正則實現(xiàn)這樣功能的自定義函數(shù)。2008-09-09
在做項目的時候,前端需要在表格的底部做一個匯總的功能,在采用reduce對當(dāng)前屬性所有值匯總時,發(fā)現(xiàn)匯總結(jié)果存在好長的小數(shù)位,本文給大家介紹了如何解決前端JS小數(shù)運算精度問題,需要的朋友可以參考下2024-02-02
這篇文章主要是對js導(dǎo)入導(dǎo)出excel的實例代碼進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細介紹了基于bootstrap按鈕式下拉菜單組件的搜索建議插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
javascript parseInt() 函數(shù)的進制轉(zhuǎn)換注意細節(jié)
parseInt(string, radix) 有2個參數(shù)，第一個string 是傳入的數(shù)值，第二個radix是 傳入數(shù)值的進制，參數(shù)radix 可以忽略，默認為 10，各種進制的數(shù)轉(zhuǎn)換為 十進制整數(shù),接下來詳細介紹，感興趣的朋友可以了解下哦2013-01-01
餅圖主要是通過扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比,它的數(shù)據(jù)格式比柱狀圖更簡單,這篇文章主要給大家介紹了關(guān)于Echarts餅圖樣式之添加內(nèi)圈陰影達到立體效果的相關(guān)資料,文中還介紹了echarts餅圖外部陰影設(shè)置的方法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了JSON鍵值對序列化和反序列化知識，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-01-01