JavaScript數(shù)據(jù)檢測(cè)方法的全面指南

更新時(shí)間：2025年07月03日 08:29:06 作者：紳士玖

在?JavaScript?開(kāi)發(fā)中,準(zhǔn)確檢測(cè)數(shù)據(jù)類(lèi)型是保證代碼健壯性的基礎(chǔ),JavaScript?提供了多種數(shù)據(jù)類(lèi)型檢測(cè)方法,每種方法都有其適用場(chǎng)景和局限性,本文將全面介紹?JavaScript?中各種數(shù)據(jù)檢測(cè)方法,需要的朋友可以參考下

前言

在 JavaScript 開(kāi)發(fā)中，準(zhǔn)確檢測(cè)數(shù)據(jù)類(lèi)型是保證代碼健壯性的基礎(chǔ)。JavaScript 提供了多種數(shù)據(jù)類(lèi)型檢測(cè)方法，每種方法都有其適用場(chǎng)景和局限性。本文將全面介紹 JavaScript 中各種數(shù)據(jù)檢測(cè)方法，包括它們的實(shí)現(xiàn)原理、使用場(chǎng)景、優(yōu)缺點(diǎn)比較，以及如何手動(dòng)實(shí)現(xiàn)一些核心檢測(cè)方法如 instanceof。

一、typeof 操作符

1. 基本用法

typeof 是最常用的類(lèi)型檢測(cè)操作符，返回一個(gè)表示數(shù)據(jù)類(lèi)型的字符串。

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" (歷史遺留問(wèn)題)
console.log(typeof {});         // "object"
console.log(typeof []);         // "object"
console.log(typeof function(){});// "function"

2. 特點(diǎn)與局限

對(duì)于原始類(lèi)型，除了 null 外都能正確返回
對(duì)于引用類(lèi)型，除了函數(shù)外都返回 "object"，函數(shù)會(huì)返回function
無(wú)法區(qū)分?jǐn)?shù)組、普通對(duì)象等具體對(duì)象類(lèi)型
typeof null 返回 "object" 是歷史遺留 bug，原因是在 JS 的最初版本中使用的是 32 位系統(tǒng)，為了性能考慮使用低位存儲(chǔ)變量的類(lèi)型信息，000 開(kāi)頭代表是對(duì)象，然而null 表示為全零，所以將它錯(cuò)誤的判斷為 object 。

3. 適用場(chǎng)景

快速檢測(cè)基本數(shù)據(jù)類(lèi)型
檢查變量是否已定義 (typeof variable !== 'undefined')
檢測(cè)函數(shù)類(lèi)型

二、instanceof 操作符

1. 基本用法

instanceof 用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在對(duì)象的原型鏈上。所以判斷對(duì)象數(shù)據(jù)類(lèi)型用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可以判斷簡(jiǎn)單的數(shù)據(jù)類(lèi)型么？

能的，兄弟能的，在ES6新增的Symbol.hasInstance方法中，允許自定義 instanceof 操作符的行為。如果不是很了解這個(gè)可以在MDN中看Symbol.hasInstance - JavaScript | MDN，下面這種方法就可以實(shí)現(xiàn)：

class PrimitiveNumber {
    static [Symbol.hasInstance](x) {
        return type x === 'number'
    }
}

console.log(123 instanceof PrimitiverNumber)  // true

這里面就是將instanceof方法重新定義了一下，里面用了type 來(lái)判斷，所以可以判斷基本數(shù)據(jù)類(lèi)型number，當(dāng)然其他的也可以判斷，看自己的定義和選擇。比如下面的自定義方法：

class MyArray {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

console.log([] instanceof MyArray);  // true

3. 手撕 instanceof

主要是使用了Object.getPrototypeOf()方法，它能夠返回指定對(duì)象的原型對(duì)象

function myInstanceof(left, right) {
  // 基本類(lèi)型直接返回 false
  if (typeof left !== 'object' || left === null) return false;
  // Object.getPrototypeOf是Object自帶的一個(gè)方法，可以拿到參數(shù)的原型對(duì)象
  let proto = Object.getPrototypeOf(left);
  // 獲取原型對(duì)象
  const prototype = right.prototype;
  
  // 無(wú)限循環(huán)
  while (true) {
    // 如果到頂了還沒(méi)有找到就返回false
    if (proto === null) return false;
    // 找到了返回true
    if (proto === prototype) return true;
    // 根據(jù)原型鏈一直往上找
    proto = Object.getPrototypeOf(proto);
  }
}

// 測(cè)試
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. 特點(diǎn)與局限

可以檢測(cè)自定義對(duì)象類(lèi)型
對(duì)于基本數(shù)據(jù)類(lèi)型無(wú)效（ES6 的 Symbol.hasInstance 可以改變這一行為）
跨窗口/iframe 檢測(cè)時(shí)會(huì)失效，因?yàn)闃?gòu)造函數(shù)不同
原型鏈可能被修改導(dǎo)致檢測(cè)結(jié)果不準(zhǔn)確

5. 適用場(chǎng)景

檢測(cè)自定義對(duì)象實(shí)例
檢測(cè)特定類(lèi)型的對(duì)象（如 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. 封裝通用類(lèi)型檢測(cè)函數(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)是整個(gè)檢測(cè)機(jī)制的核心部分：

Object.prototype.toString: 這是 Object 對(duì)象的原始 toString 方法
.call(obj) : 使用 call 方法將 toString 的 this 指向要檢測(cè)的對(duì)象

這樣調(diào)用會(huì)返回格式為 [object Type] 的字符串，其中 Type 是對(duì)象的內(nèi)部類(lèi)型。

b. .slice(8, -1)部分從返回的字符串中提取類(lèi)型名稱(chēng)：

8: 從第8個(gè)字符開(kāi)始截取（跳過(guò)前面的 [object 共8個(gè)字符）
-1: 截取到倒數(shù)第1個(gè)字符（跳過(guò)最后的 ]）

c. .toLowerCase()將提取的類(lèi)型字符串轉(zhuǎn)換為小寫(xiě)：

"Array" → "array"
"Number" → "number"

這一步不是必須的，但可以使返回結(jié)果更統(tǒng)一，方便后續(xù)比較。

3. 它能不能判斷具體的對(duì)象類(lèi)型？

在ES6中新增的Symbol.toStringTag中允許自定義 Object.prototype.toString 的返回值。

class MyClass {
  get [Symbol.toStringTag]() {
    return 'MyClass';
  }
}

console.log(Object.prototype.toString.call(new MyClass())); // [object MyClass]

4. 特點(diǎn)與局限

覆蓋所有類(lèi)型：可以檢測(cè)所有 JavaScript 內(nèi)置類(lèi)型，包括基本類(lèi)型和引用類(lèi)型
不受原型鏈影響：直接調(diào)用 Object 的原生方法，不會(huì)被對(duì)象重寫(xiě)的 toString 方法影響
一致性：不同環(huán)境、不同窗口/iframe 中行為一致
精確性：能準(zhǔn)確區(qū)分 Array、Date、RegExp 等特殊對(duì)象類(lèi)型
返回值：對(duì)于自定義對(duì)象，默認(rèn)返回 [object Object]
自定義：可以通過(guò) Symbol.toStringTag 自定義標(biāo)簽
缺陷：這種方法在性能方面比type和instanceof稍慢，但通常差異可以忽略

5. 適用場(chǎng)景

需要精確檢測(cè)任何數(shù)據(jù)類(lèi)型時(shí)
區(qū)分不同內(nèi)置對(duì)象類(lèi)型（如 Array vs Object）

四、constructor 屬性

1. 基本用法

通過(guò)訪問(wèn)對(duì)象的 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. 特點(diǎn)與局限

可以檢測(cè)基本類(lèi)型和引用類(lèi)型的構(gòu)造函數(shù)
constructor 屬性容易被修改
null 和 undefined 沒(méi)有 constructor 屬性
跨窗口/iframe 檢測(cè)時(shí)會(huì)失效

3. 適用場(chǎng)景

快速檢查對(duì)象是否由特定構(gòu)造函數(shù)創(chuàng)建
需要獲取對(duì)象構(gòu)造函數(shù)時(shí)

五、Array.isArray

1. 基本用法

專(zhuān)門(mén)用于檢測(cè)數(shù)組類(lèi)型。

console.log(Array.isArray([]));      // true
console.log(Array.isArray({}));      // false

2. 特點(diǎn)與局限

專(zhuān)門(mén)用于數(shù)組檢測(cè)，比 instanceof 更可靠
解決了跨窗口/iframe 的數(shù)組檢測(cè)問(wèn)題
只能用于數(shù)組檢測(cè)

3. 適用場(chǎng)景

需要專(zhuān)門(mén)檢測(cè)數(shù)組類(lèi)型時(shí)

六、其他專(zhuān)用檢測(cè)方法

1. Number.isNaN

與全局的 isNaN 不同，Number.isNaN 只在值為 NaN 時(shí)返回 true。

console.log(Number.isNaN(NaN));      // true
console.log(Number.isNaN('str'));    // false
console.log(isNaN('str'));           // true (全局 isNaN 會(huì)先嘗試轉(zhuǎn)換為數(shù)字)

2. Number.isFinite

檢測(cè)值是否為有限數(shù)字。

console.log(Number.isFinite(123));    // true
console.log(Number.isFinite(Infinity)); // false

七、特殊數(shù)據(jù)類(lèi)型檢測(cè)

1. 檢測(cè) NaN

由于 NaN 是 JavaScript 中唯一不等于自身的值，可以利用這一特性檢測(cè)：

function isNaN(value) {
  return value !== value;
}

// 或者使用 Number.isNaN
console.log(Number.isNaN(NaN));  // true

2. 檢測(cè) null 或 undefined

function isNull(value) {
  return value === null;
}

function isUndefined(value) {
  return value === undefined;
}

// 檢測(cè) null 或 undefined
function isNil(value) {
  return value == null;  // == 下 null 和 undefined 相等
}

3. 檢測(cè)原始包裝對(duì)象

有時(shí)候需要區(qū)分原始值和其包裝對(duì)象：

function isPrimitiveWrapper(obj) {
  return (
    obj instanceof Number ||
    obj instanceof String ||
    obj instanceof Boolean
  );
}

八、Object.is和===的區(qū)別？

Object.is 和 === (嚴(yán)格相等運(yùn)算符) 都是 JavaScript 中用于比較兩個(gè)值是否相等的操作，但它們?cè)谔幚砟承┨厥馇闆r時(shí)有所不同。

相同點(diǎn)

都不會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換
對(duì)于大多數(shù)情況，兩者的行為是一致的

主要區(qū)別

1. 對(duì) NaN 的處理

NaN === NaN  // false
Object.is(NaN, NaN)  // true

Object.is 認(rèn)為兩個(gè) NaN 是相等的，而 === 認(rèn)為它們不相等。

2. 對(duì) +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. 何時(shí)使用

使用 === 作為日常比較的默認(rèn)選擇（更符合直覺(jué)，性能略優(yōu)）

使用 Object.is 當(dāng)需要：

明確區(qū)分 +0 和 -0
認(rèn)為 NaN 等于 NaN
需要與 ES6 的 SameValue 算法保持一致的行為

5. 實(shí)現(xiàn)原理

Object.is 的實(shí)現(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;
  }
  // 其他情況使用嚴(yán)格相等
  return x === y;
}

6. 總結(jié)

Object.is 提供了比 === 更精確的相等性判斷，特別是在處理 JavaScript 中的特殊數(shù)值（NaN、+0/-0）時(shí)。在日常開(kāi)發(fā)中，=== 仍然是首選，但在需要精確比較這些特殊值時(shí)，Object.is 是更好的選擇。

九、綜合比較

方法	基本類(lèi)型	引用類(lèi)型	自定義類(lèi)型	跨窗口	備注
typeof	部分	有限	否	是	null 返回 "object"
instanceof	否	是	是	否	檢查原型鏈
Object.prototype.toString	是	是	有限	是	最全面
constructor	是	是	是	否	屬性易被修改
Array.isArray	否	僅數(shù)組	否	是	專(zhuān)門(mén)用于數(shù)組檢測(cè)

十、實(shí)用工具函數(shù)

1. 通用類(lèi)型檢測(cè)函數(shù)

function getType(value) {
  // 處理 null 和 undefined
  if (value == null) {
    return value === undefined ? 'undefined' : 'null';
  }
  
  // 處理其他類(lèi)型
  const type = typeof value;
  if (type !== 'object') return type;
  
  // 處理對(duì)象類(lèi)型
  const toString = Object.prototype.toString.call(value);
  return toString.slice(8, -1).toLowerCase();
}

// 測(cè)試
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. 類(lèi)型判斷輔助函數(shù)

const is = {
  // 基本類(lèi)型
  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',
  
  // 引用類(lèi)型
  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,
  
  // 自定義類(lèi)型
  instance: (value, constructor) => {
    if (typeof constructor !== 'function') return false;
    if (typeof value !== 'object' || value === null) return false;
    return value instanceof constructor;
  }
};

// 測(cè)試
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é)語(yǔ)

JavaScript 提供了豐富的數(shù)據(jù)類(lèi)型檢測(cè)方法，每種方法都有其適用場(chǎng)景。在實(shí)際開(kāi)發(fā)中：

對(duì)于基本類(lèi)型檢測(cè)，typeof 是最簡(jiǎn)單直接的方式
需要檢測(cè)對(duì)象具體類(lèi)型時(shí)，優(yōu)先使用 Object.prototype.toString
檢測(cè)數(shù)組使用 Array.isArray
檢測(cè)自定義對(duì)象實(shí)例使用 instanceof 或 constructor
對(duì)于復(fù)雜場(chǎng)景，可以組合使用多種方法或封裝工具函數(shù)

理解這些檢測(cè)方法背后的原理和差異，能夠幫助我們?cè)诓煌瑘?chǎng)景下選擇最合適的檢測(cè)方式，寫(xiě)出更健壯的 JavaScript 代碼。

以上就是JavaScript數(shù)據(jù)檢測(cè)方法的全面指南的詳細(xì)內(nèi)容，更多關(guān)于JavaScript數(shù)據(jù)檢測(cè)方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

JavaScript數(shù)據(jù)檢測(cè)方法的全面指南

目錄

前言

一、typeof 操作符

1. 基本用法

2. 特點(diǎn)與局限

3. 適用場(chǎng)景

二、instanceof 操作符

1. 基本用法

2. instanceof可以判斷簡(jiǎn)單的數(shù)據(jù)類(lèi)型么？

3. 手撕 instanceof

4. 特點(diǎn)與局限

5. 適用場(chǎng)景

三、Object.prototype.toString

1. 基本用法

2. 封裝通用類(lèi)型檢測(cè)函數(shù)

3. 它能不能判斷具體的對(duì)象類(lèi)型？

4. 特點(diǎn)與局限

5. 適用場(chǎng)景

四、constructor 屬性

1. 基本用法

2. 特點(diǎn)與局限

3. 適用場(chǎng)景

五、Array.isArray

1. 基本用法

2. 特點(diǎn)與局限

3. 適用場(chǎng)景

六、其他專(zhuān)用檢測(cè)方法

1. Number.isNaN

2. Number.isFinite

七、特殊數(shù)據(jù)類(lèi)型檢測(cè)

1. 檢測(cè) NaN

2. 檢測(cè) null 或 undefined

3. 檢測(cè)原始包裝對(duì)象

八、Object.is和===的區(qū)別？

相同點(diǎn)

主要區(qū)別

1. 對(duì) NaN 的處理

2. 對(duì) +0 和 -0 的處理

3. 其他情況的比較

4. 何時(shí)使用

5. 實(shí)現(xiàn)原理

6. 總結(jié)

九、綜合比較

十、實(shí)用工具函數(shù)

1. 通用類(lèi)型檢測(cè)函數(shù)

2. 類(lèi)型判斷輔助函數(shù)

結(jié)語(yǔ)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

2. instanceof可以判斷簡(jiǎn)單的數(shù)據(jù)類(lèi)型么？

三、Object.prototype.toString

3. 它能不能判斷具體的對(duì)象類(lèi)型？

四、constructor 屬性

五、Array.isArray

六、其他專(zhuān)用檢測(cè)方法

七、特殊數(shù)據(jù)類(lèi)型檢測(cè)

八、Object.is和===的區(qū)別？

九、綜合比較

十、實(shí)用工具函數(shù)