亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2025年07月03日 08:29:06   作者：紳士玖  
在?JavaScript?開發(fā)中,準(zhǔn)確檢測數(shù)據(jù)類型是保證代碼健壯性的基礎(chǔ),JavaScript?提供了多種數(shù)據(jù)類型檢測方法,每種方法都有其適用場景和局限性,本文將全面介紹?JavaScript?中各種數(shù)據(jù)檢測方法,需要的朋友可以參考下

前言

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

一、typeof 操作符

1. 基本用法

typeof 是最常用的類型檢測操作符，返回一個(gè)表示數(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. 特點(diǎn)與局限

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

3. 適用場景

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

二、instanceof 操作符

1. 基本用法

instanceof 用于檢測構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在對(duì)象的原型鏈上。所以判斷對(duì)象數(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 操作符的行為。如果不是很了解這個(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 來判斷，所以可以判斷基本數(shù)據(jù)類型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) {
  // 基本類型直接返回 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;
  
  // 無限循環(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. 特點(diǎn)與局限

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

5. 適用場景

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

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

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

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

  • 8: 從第8個(gè)字符開始截?。ㄌ^前面的 [object 共8個(gè)字符）
  • -1: 截取到倒數(shù)第1個(gè)字符（跳過最后的 ]）

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

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

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

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

在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)與局限

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

5. 適用場景

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

四、constructor 屬性

1. 基本用法

通過訪問對(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)與局限

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

3. 適用場景

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

五、Array.isArray

1. 基本用法

專門用于檢測數(shù)組類型。

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

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

  1. 專門用于數(shù)組檢測，比 instanceof 更可靠
  2. 解決了跨窗口/iframe 的數(shù)組檢測問題
  3. 只能用于數(shù)組檢測

3. 適用場景

  • 需要專門檢測數(shù)組類型時(shí)

六、其他專用檢測方法

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

檢測值是否為有限數(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. 檢測原始包裝對(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)

  1. 都不會(huì)進(jìn)行類型轉(zhuǎn)換
  2. 對(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, undefinedtruetrue
null, nulltruetrue
true, truetruetrue
false, falsetruetrue
'foo', 'foo'truetrue
{}, {}falsefalse
NaN, NaNfalsetrue
+0, -0truefalse
5, 5truetrue
5, '5'falsefalse

4. 何時(shí)使用

使用 === 作為日常比較的默認(rèn)選擇（更符合直覺，性能略優(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í)。在日常開發(fā)中，=== 仍然是首選，但在需要精確比較這些特殊值時(shí)，Object.is 是更好的選擇。

九、綜合比較

方法基本類型引用類型自定義類型跨窗口備注
typeof部分有限否是null 返回 "object"
instanceof否是是否檢查原型鏈
Object.prototype.toString是是有限是最全面
constructor是是是否屬性易被修改
Array.isArray否僅數(shù)組否是專門用于數(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;
  
  // 處理對(duì)象類型
  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ù)類型檢測方法，每種方法都有其適用場景。在實(shí)際開發(fā)中：

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

理解這些檢測方法背后的原理和差異，能夠幫助我們?cè)诓煌瑘鼍跋逻x擇最合適的檢測方式，寫出更健壯的 JavaScript 代碼。

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

相關(guān)文章

最新評(píng)論