在JavaScript開發(fā)中，準確判斷數(shù)據(jù)類型是日常編碼的高頻操作，也是不少初學者容易踩坑的地方。為什么typeof null 是 “object”? instanceof 的原理是什么？有沒有一種“萬能”的類型判斷方法？本文將從原始類型和引用類型出發(fā)，循序漸進的帶你搞懂這類型判斷背后的門道。

一. 先溫習JS中的兩大類型陣營

在開始討論之前，我們先快速回顧一下JS中的數(shù)據(jù)類型劃分：

原始類型

string，number，boolaen，null, undefined, bigint, Symbol

它們直接存儲于棧中，賦值給變量時是值的拷貝。

引用類型

Array, function, object, Date

它們存儲在堆內存中，變量保存的只是內存地址的引用。

因為這兩種類型在底層存儲和行為的差異，導致它們各自適合不同的判斷方式。

二. typeof———簡單直接，但有局限

typeof 操作符是我們最常用的類型判斷工具之一。它的特點是：

• 能準確判斷除null以外的所有原始類型。

• 對于引用類型，typeof 統(tǒng)一返回 "object"，只有一個特例：函數(shù)返回 "function" 。

也就是說，數(shù)組、普通對象、日期對象、正則表達式等統(tǒng)統(tǒng)被識別為 "object"。

typeof []         // "object"
typeof {}         // "object"
typeof new Date() // "object"
typeof /reg/      // "object"
typeof function(){}  // "function"

讓人迷惑的 null

typeof null  // "object"

為什么判斷null返回的是object呢？這是因為：typeof 是通過將值轉為二進制，來判斷類型的，二進制前三位是 0 的統(tǒng)一被認為是引用類型，在計算機中，所有的引用類型被轉為二進制，前三位都是 0（除了函數(shù)），而 null 轉為二進制是一整串 0，所以null被錯誤判斷為了object。

三.instanceof——基于原型鏈的歸屬判斷

1. 只能判斷引用類型，無法判斷原始類型

3. 它是通過隱式原型鏈來查找 x 是否隸屬于 X 這個類型

[] instanceof Array        // true
{} instanceof Object       // true
new Date() instanceof Date  // true
function(){} instanceof Function  // true

四. Object.prototype.toString——終極萬能判斷法

如果你想要一個絕對可靠、能區(qū)分所有數(shù)據(jù)類型的方法，那非Object.prototype.toString莫屬。

原理淺析

每個對象內部都有一個 [[Class]] 屬性，它標記了該對象的類型標簽（如 Array、Date、Number、String 等）。當我們調用 Object.prototype.toString 方法時，它會執(zhí)行以下步驟：

1. 如果值是 undefined，直接返回 "[object Undefined]"。

2. 如果值是 null，返回 "[object Null]"。

3. 否則，將值轉換為一個對象（ToObject(this)），然后讀取該對象的 [[Class]] 屬性，最后拼接成 "[object " + [[Class]] + "]" 的形式。

由于 Object.prototype.toString 可以被任意對象調用，我們通常使用 call 或 apply 來改變它的 this 指向，使其能直接處理原始值。

Object.prototype.toString.call(123)     // "[object Number]"
Object.prototype.toString.call("hello") // "[object String]"
Object.prototype.toString.call(true)    // "[object Boolean]"
Object.prototype.toString.call(null)    // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call([])       // "[object Array]"
Object.prototype.toString.call({})       // "[object Object]"
Object.prototype.toString.call(new Date()) // "[object Date]"
Object.prototype.toString.call(/reg/)    // "[object RegExp]"
Object.prototype.toString.call(function(){}) // "[object Function]"

五. Array.isArray——專為數(shù)組而生

檢測數(shù)組是最常見的需求之一，雖然Object.prototype.toString.call(arr) === “[object Array]"萬無一失，但是數(shù)組有一個專門的Array.isArray()方法，更加簡單直接。

Array.isArray([])      // true
Array.isArray({})      // false
Array.isArray(new Array(5))  // true

六.各方法對比總結

到此這篇關于JavaScript類型判斷操作方法的文章就介紹到這了,更多相關JS類型判斷內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論