JavaScript數(shù)據(jù)檢測方法的全面指南
更新時間：2025年07月03日 08:29:06 作者：紳士玖
在?JavaScript?開發(fā)中,準確檢測數(shù)據(jù)類型是保證代碼健壯性的基礎(chǔ),JavaScript?提供了多種數(shù)據(jù)類型檢測方法,每種方法都有其適用場景和局限性,本文將全面介紹?JavaScript?中各種數(shù)據(jù)檢測方法,需要的朋友可以參考下
前言
在 JavaScript 開發(fā)中，準確檢測數(shù)據(jù)類型是保證代碼健壯性的基礎(chǔ)。JavaScript 提供了多種數(shù)據(jù)類型檢測方法，每種方法都有其適用場景和局限性。本文將全面介紹 JavaScript 中各種數(shù)據(jù)檢測方法，包括它們的實現(xiàn)原理、使用場景、優(yōu)缺點比較，以及如何手動實現(xiàn)一些核心檢測方法如 instanceof。
一、typeof 操作符
1. 基本用法
typeof 是最常用的類型檢測操作符，返回一個表示數(shù)據(jù)類型的字符串。
console.log(typeof 42); // "number"
console.log(typeof 'str'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (歷史遺留問題)
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){});// "function"
2. 特點與局限
- 對于原始類型，除了
null外都能正確返回 - 對于引用類型，除了函數(shù)外都返回
"object"，函數(shù)會返回function - 無法區(qū)分數(shù)組、普通對象等具體對象類型
typeof null返回"object"是歷史遺留 bug，原因是在 JS 的最初版本中使用的是 32 位系統(tǒng)，為了性能考慮使用低位存儲變量的類型信息，000 開頭代表是對象，然而null 表示為全零，所以將它錯誤的判斷為 object 。
3. 適用場景
- 快速檢測基本數(shù)據(jù)類型
- 檢查變量是否已定義 (
typeof variable !== 'undefined') - 檢測函數(shù)類型
二、instanceof 操作符
1. 基本用法
instanceof 用于檢測構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在對象的原型鏈上。所以判斷對象數(shù)據(jù)類型用instanceof比較好。
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(function(){} instanceof Function); // true
function Person() {}
const p = new Person();
console.log(p instanceof Person); // true
var str1 = 'hello world'
str1 instanceof String // false
var str2 = new String('hello world')
str2 instanceof String // true
2. instanceof可以判斷簡單的數(shù)據(jù)類型么？
能的，兄弟能的，在ES6新增的Symbol.hasInstance方法中，允許自定義 instanceof 操作符的行為。如果不是很了解這個可以在MDN中看Symbol.hasInstance - JavaScript | MDN，下面這種方法就可以實現(xiàn)：
class PrimitiveNumber {
static [Symbol.hasInstance](x) {
return type x === 'number'
}
}
console.log(123 instanceof PrimitiverNumber) // true
這里面就是將instanceof方法重新定義了一下，里面用了type 來判斷，所以可以判斷基本數(shù)據(jù)類型number，當然其他的也可以判斷，看自己的定義和選擇。比如下面的自定義方法：
class MyArray {
static [Symbol.hasInstance](instance) {
return Array.isArray(instance);
}
}
console.log([] instanceof MyArray); // true
3. 手撕 instanceof
主要是使用了Object.getPrototypeOf()方法，它能夠返回指定對象的原型對象
function myInstanceof(left, right) {
// 基本類型直接返回 false
if (typeof left !== 'object' || left === null) return false;
// Object.getPrototypeOf是Object自帶的一個方法，可以拿到參數(shù)的原型對象
let proto = Object.getPrototypeOf(left);
// 獲取原型對象
const prototype = right.prototype;
// 無限循環(huán)
while (true) {
// 如果到頂了還沒有找到就返回false
if (proto === null) return false;
// 找到了返回true
if (proto === prototype) return true;
// 根據(jù)原型鏈一直往上找
proto = Object.getPrototypeOf(proto);
}
}
// 測試
console.log(myInstanceof([], Array)); // true
console.log(myInstanceof({}, Object)); // true
console.log(myInstanceof("123", String)); //false
console.log(myInstanceof(new String("123"), String));//true
4. 特點與局限
- 可以檢測自定義對象類型
- 對于基本數(shù)據(jù)類型無效（ES6 的 Symbol.hasInstance 可以改變這一行為）
- 跨窗口/iframe 檢測時會失效，因為構(gòu)造函數(shù)不同
- 原型鏈可能被修改導致檢測結(jié)果不準確
5. 適用場景
- 檢測自定義對象實例
- 檢測特定類型的對象（如 Array、Date 等）
三、Object.prototype.toString
1. 基本用法
調(diào)用 Object.prototype.toString() 方法可以返回 [object Type] 格式的字符串。
console.log(Object.prototype.toString.call(42)); // [object Number]
console.log(Object.prototype.toString.call('str')); // [object String]
console.log(Object.prototype.toString.call(true)); // [object Boolean]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined));// [object Undefined]
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call(new Date())); // [object Date]
2. 封裝通用類型檢測函數(shù)
function getType(obj) {
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
console.log(getType([])); // 'array'
console.log(getType(null)); // 'null'
console.log(getType(new Map())); // 'map'
代碼解析
a. Object.prototype.toString.call(obj)是整個檢測機制的核心部分：
Object.prototype.toString: 這是 Object 對象的原始 toString 方法.call(obj): 使用 call 方法將 toString 的 this 指向要檢測的對象
這樣調(diào)用會返回格式為 [object Type] 的字符串，其中 Type 是對象的內(nèi)部類型。
b. .slice(8, -1)部分從返回的字符串中提取類型名稱：
8: 從第8個字符開始截?。ㄌ^前面的[object共8個字符）-1: 截取到倒數(shù)第1個字符（跳過最后的]）
c. .toLowerCase()將提取的類型字符串轉(zhuǎn)換為小寫：
"Array"→"array""Number"→"number"
這一步不是必須的，但可以使返回結(jié)果更統(tǒng)一，方便后續(xù)比較。
3. 它能不能判斷具體的對象類型？
在ES6中新增的Symbol.toStringTag中允許自定義 Object.prototype.toString 的返回值。
class MyClass {
get [Symbol.toStringTag]() {
return 'MyClass';
}
}
console.log(Object.prototype.toString.call(new MyClass())); // [object MyClass]
4. 特點與局限
- 覆蓋所有類型：可以檢測所有 JavaScript 內(nèi)置類型，包括基本類型和引用類型
- 不受原型鏈影響：直接調(diào)用 Object 的原生方法，不會被對象重寫的 toString 方法影響
- 一致性：不同環(huán)境、不同窗口/iframe 中行為一致
- 精確性：能準確區(qū)分 Array、Date、RegExp 等特殊對象類型
- 返回值：對于自定義對象，默認返回
[object Object] - 自定義：可以通過
Symbol.toStringTag自定義標簽 - 缺陷：這種方法在性能方面比
type和instanceof稍慢，但通常差異可以忽略
5. 適用場景
- 需要精確檢測任何數(shù)據(jù)類型時
- 區(qū)分不同內(nèi)置對象類型（如 Array vs Object）
四、constructor 屬性
1. 基本用法
通過訪問對象的 constructor 屬性可以獲取其構(gòu)造函數(shù)。
console.log([].constructor === Array); // true
console.log({}.constructor === Object); // true
console.log((123).constructor === Number); // true
function Person() {}
console.log(new Person().constructor === Person); // true
2. 特點與局限
- 可以檢測基本類型和引用類型的構(gòu)造函數(shù)
constructor屬性容易被修改null和undefined沒有constructor屬性- 跨窗口/iframe 檢測時會失效
3. 適用場景
- 快速檢查對象是否由特定構(gòu)造函數(shù)創(chuàng)建
- 需要獲取對象構(gòu)造函數(shù)時
五、Array.isArray
1. 基本用法
專門用于檢測數(shù)組類型。
console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false
2. 特點與局限
- 專門用于數(shù)組檢測，比
instanceof更可靠 - 解決了跨窗口/iframe 的數(shù)組檢測問題
- 只能用于數(shù)組檢測
3. 適用場景
- 需要專門檢測數(shù)組類型時
六、其他專用檢測方法
1. Number.isNaN
與全局的 isNaN 不同，Number.isNaN 只在值為 NaN 時返回 true。
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN('str')); // false
console.log(isNaN('str')); // true (全局 isNaN 會先嘗試轉(zhuǎn)換為數(shù)字)
2. Number.isFinite
檢測值是否為有限數(shù)字。
console.log(Number.isFinite(123)); // true console.log(Number.isFinite(Infinity)); // false
七、特殊數(shù)據(jù)類型檢測
1. 檢測 NaN
由于 NaN 是 JavaScript 中唯一不等于自身的值，可以利用這一特性檢測：
function isNaN(value) {
return value !== value;
}
// 或者使用 Number.isNaN
console.log(Number.isNaN(NaN)); // true
2. 檢測 null 或 undefined
function isNull(value) {
return value === null;
}
function isUndefined(value) {
return value === undefined;
}
// 檢測 null 或 undefined
function isNil(value) {
return value == null; // == 下 null 和 undefined 相等
}
3. 檢測原始包裝對象
有時候需要區(qū)分原始值和其包裝對象：
function isPrimitiveWrapper(obj) {
return (
obj instanceof Number ||
obj instanceof String ||
obj instanceof Boolean
);
}
八、Object.is和===的區(qū)別？
Object.is 和 === (嚴格相等運算符) 都是 JavaScript 中用于比較兩個值是否相等的操作，但它們在處理某些特殊情況時有所不同。
相同點
- 都不會進行類型轉(zhuǎn)換
- 對于大多數(shù)情況，兩者的行為是一致的
主要區(qū)別
1. 對 NaN 的處理
NaN === NaN // false Object.is(NaN, NaN) // true
Object.is 認為兩個 NaN 是相等的，而 === 認為它們不相等。
2. 對 +0 和 -0 的處理
+0 === -0 // true Object.is(+0, -0) // false
Object.is 區(qū)分 +0 和 -0，而 === 不區(qū)分。
3. 其他情況的比較
| 比較情況 | === 結(jié)果 | Object.is 結(jié)果 |
|---|---|---|
| undefined, undefined | true | true |
| null, null | true | true |
| true, true | true | true |
| false, false | true | true |
| 'foo', 'foo' | true | true |
| {}, {} | false | false |
| NaN, NaN | false | true |
| +0, -0 | true | false |
| 5, 5 | true | true |
| 5, '5' | false | false |
4. 何時使用
使用 === 作為日常比較的默認選擇（更符合直覺，性能略優(yōu)）
使用 Object.is 當需要：
- 明確區(qū)分 +0 和 -0
- 認為 NaN 等于 NaN
- 需要與 ES6 的
SameValue算法保持一致的行為
5. 實現(xiàn)原理
Object.is 的實現(xiàn)可以理解為：
function is(x, y) {
// 處理 +0 和 -0 的情況
if (x === 0 && y === 0) {
return 1 / x === 1 / y;
}
// 處理 NaN 的情況
if (x !== x) {
return y !== y;
}
// 其他情況使用嚴格相等
return x === y;
}
6. 總結(jié)
Object.is 提供了比 === 更精確的相等性判斷，特別是在處理 JavaScript 中的特殊數(shù)值（NaN、+0/-0）時。在日常開發(fā)中，=== 仍然是首選，但在需要精確比較這些特殊值時，Object.is 是更好的選擇。
九、綜合比較
| 方法 | 基本類型 | 引用類型 | 自定義類型 | 跨窗口 | 備注 |
|---|---|---|---|---|---|
| typeof | 部分 | 有限 | 否 | 是 | null 返回 "object" |
| instanceof | 否 | 是 | 是 | 否 | 檢查原型鏈 |
| Object.prototype.toString | 是 | 是 | 有限 | 是 | 最全面 |
| constructor | 是 | 是 | 是 | 否 | 屬性易被修改 |
| Array.isArray | 否 | 僅數(shù)組 | 否 | 是 | 專門用于數(shù)組檢測 |
十、實用工具函數(shù)
1. 通用類型檢測函數(shù)
function getType(value) {
// 處理 null 和 undefined
if (value == null) {
return value === undefined ? 'undefined' : 'null';
}
// 處理其他類型
const type = typeof value;
if (type !== 'object') return type;
// 處理對象類型
const toString = Object.prototype.toString.call(value);
return toString.slice(8, -1).toLowerCase();
}
// 測試
console.log(getType(123)); // 'number'
console.log(getType('str')); // 'string'
console.log(getType(true)); // 'boolean'
console.log(getType(null)); // 'null'
console.log(getType(undefined)); // 'undefined'
console.log(getType([])); // 'array'
console.log(getType({})); // 'object'
console.log(getType(new Date())); // 'date'
console.log(getType(/regex/)); // 'regexp'
console.log(getType(new Map())); // 'map'
2. 類型判斷輔助函數(shù)
const is = {
// 基本類型
null: value => value === null,
undefined: value => value === undefined,
nil: value => value == null,
boolean: value => typeof value === 'boolean',
number: value => typeof value === 'number' && !Number.isNaN(value),
string: value => typeof value === 'string',
symbol: value => typeof value === 'symbol',
bigint: value => typeof value === 'bigint',
// 引用類型
object: value => value !== null && typeof value === 'object',
array: value => Array.isArray(value),
function: value => typeof value === 'function',
date: value => value instanceof Date,
regexp: value => value instanceof RegExp,
promise: value => value instanceof Promise,
set: value => value instanceof Set,
map: value => value instanceof Map,
weakset: value => value instanceof WeakSet,
weakmap: value => value instanceof WeakMap,
// 特殊值
nan: value => Number.isNaN(value),
finite: value => Number.isFinite(value),
primitive: value => Object(value) !== value,
// 自定義類型
instance: (value, constructor) => {
if (typeof constructor !== 'function') return false;
if (typeof value !== 'object' || value === null) return false;
return value instanceof constructor;
}
};
// 測試
console.log(is.array([])); // true
console.log(is.object({})); // true
console.log(is.null(null)); // true
console.log(is.instance(new Date(), Date)); // true
結(jié)語
JavaScript 提供了豐富的數(shù)據(jù)類型檢測方法，每種方法都有其適用場景。在實際開發(fā)中：
- 對于基本類型檢測，
typeof是最簡單直接的方式 - 需要檢測對象具體類型時，優(yōu)先使用
Object.prototype.toString - 檢測數(shù)組使用
Array.isArray - 檢測自定義對象實例使用
instanceof或constructor - 對于復雜場景，可以組合使用多種方法或封裝工具函數(shù)
理解這些檢測方法背后的原理和差異，能夠幫助我們在不同場景下選擇最合適的檢測方式，寫出更健壯的 JavaScript 代碼。
以上就是JavaScript數(shù)據(jù)檢測方法的全面指南的詳細內(nèi)容，更多關(guān)于JavaScript數(shù)據(jù)檢測方法的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本篇文章主要介紹了js中定時器的使用方法。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
js 獲取服務(wù)器控件值的代碼2010-03-03
JavaScript原型繼承_動力節(jié)點Java學院整理
這篇文章主要為大家詳細介紹了JavaScript原型繼承的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了JavaScript獲取圖片真實大小代碼實例,本文使用onload事件來獲取圖片的真實大小,需要的朋友可以參考下2014-09-09
下面小編就為大家?guī)硪黄猨avascript url幾種編碼方式詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能，利用小程序事件處理的api，分別讀取觸摸開始，觸摸移動時，觸摸結(jié)束的X/Y坐標，根據(jù)差值來改變整個卡片的位置，具體實例代碼跟隨小編一起看看吧2019-12-12
在前端開發(fā)中,跨瀏覽器兼容性問題一直是個不容忽視的挑戰(zhàn),本文將從多個角度詳細解析跨瀏覽器兼容性問題的根源、常見問題以及解決方案,需要的可以參考下2025-03-03
javascript字體顏色控件的開發(fā) JS實現(xiàn)字體控制
小編給大家?guī)硪粋€用javascript編寫的能控制字體大小個顏色等基本信息的控件寫法，喜歡的嘗試編寫一下。2017-11-11
躲避這些會改變原數(shù)組JavaScript數(shù)組方法讓開發(fā)流暢無阻
JavaScript中有些數(shù)組的操作方法并不符合我們預期，容易導致想象不到的結(jié)果，因此，為避免這種情況的發(fā)生，本文將介紹哪些原生數(shù)組方法能改變原數(shù)組以及我對于如何更好地使用數(shù)組方法的建議2023-05-05
這篇文章主要為大家詳細介紹了Web js實現(xiàn)復制文本到粘貼板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08