腳本之家服務器常用軟件

快捷導航

JavaScript中常見的數(shù)據類型判斷方法小結

更新時間：2023年06月21日 08:26:11 作者：墨淵君

在?JS?編程中,正確判斷數(shù)據類型是必備技能,也是面試常問的內，本文將探討四種常用的數(shù)據類型判斷方法，通過了解它們的特點和適用范圍,能夠更好地處理不同數(shù)據類型的情況,避免出現(xiàn)錯誤和提升代碼質量,需要的朋友可以參考下

一、typeof

typeof 運算符返回一個字符串, 表示操作數(shù)的類型, 使用語法: typeof <操作數(shù)>

1.1 規(guī)則

下表, 是 typeof 針對不同數(shù)據類型, 返回的結果值

類型	結果
`Boolean`	"`boolean`"
`String`	"`string`"
`Number`	"`number`"
`BigInt`	"`bigint`"
`Symbol`	"`symbol`"
`Undefined`	"`undefined`"
`Null`	"`object`"
`Function` (在 `class` 也是函數(shù))	"`function`"
其他任何對象	"`object`"

示例代碼如下:

console.log(typeof true) // boolean
console.log(typeof '123') // string
console.log(typeof 11111) // number
console.log(typeof Math.LN2) // number
console.log(typeof Infinity) // number
console.log(typeof NaN) // number
console.log(typeof BigInt(11111)) // bigint
console.log(typeof Symbol(1111)) // symbol
console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof (() => {})) // function
console.log(typeof class {}) // function
console.log(typeof {}) // object 
console.log(typeof []) // object
console.log(typeof /abc/) // object
console.log(typeof new Date()) // object
console.log(typeof new Promise(() => {})) // object

1.2 為什么「typeof null」等于「object」

// JavaScript 誕生以來便如此
typeof null === "object";

在 JS 中 typeof null 的結果為 "object", 這是從 JS 的第一版遺留至今的一個 bug
在 JS 最初的實現(xiàn)中, JS 中的值是由一個表示類型的 標簽 和 實際數(shù)據值 表示的, 對象的 類型標簽 是 0, 由于 null 代表的是空指針, 在大多數(shù)平臺下值表示為 0x00, 因此, null 的 類型標簽 是 0, 因此 typeof null 也就返回了 object
當然針對這個 BUG 曾有一個 ECMAScript 的修復提案, 但是被拒絕了, 原因是遺留代碼太多了, 如果修改的話影響太廣, 不如繼續(xù)將錯就錯當個和事老

1.3 為什么「typeof (() => {})」等于「function」

首先我們需要了解一個小知識, 函數(shù)是什么? 為什么被調用?

function 實際上是 object 的一個 子類型, 更深點說, 函數(shù)是一個可以被調用的對象; 那么它為什么能夠被調用呢? 那是因為其內部實現(xiàn)了 [[Call]] 方法, 當函數(shù)對象被調用時會執(zhí)行內部方法 [[call]]

那么回到正題, 為什么 typeof (() => {}) 會返回 function? 這里主要還是要看 ES6 中 typeof 是如何區(qū)分函數(shù)和對象類型的:

一個對象如果沒有實現(xiàn) [[Call]] 內部方法, 那么它就返回 object
一個對象如果實現(xiàn)了 [[Call]] 內部方法, 那么它就返回 function

1.4 注意事項

所有使用 構造函數(shù) 創(chuàng)建的數(shù)據, typeof 都會返回 object 或 function

const str = new String("String");
const num = new Number(100);
typeof str; // "object"
typeof num; // "object"
const func = new Function();
typeof func; // "function"

typeof 操作符的優(yōu)先級高于 加法 (+) 等 二進制操作符, 因此, 必要時候記得用括號

// 括號有無將決定表達式的類型。
const someData = 99;
typeof someData + " Wisen"; // "number Wisen"
typeof (someData + " Wisen"); // "string"

二、instanceof & isPrototypeOf()

在 JS 中我們有 兩種 方式可以判斷 原型 是否存在于某個 實例 的 原型鏈 上, 通過這種判斷就可以幫助我們, 確定 引用數(shù)據 的具體類型; 需要注意的是該方法 只能用于判斷引用數(shù)據, 無法判斷 基本數(shù)據 類型

2.1 instanceof

介紹: instanceof 運算符用于檢測 構造函數(shù) 的 prototype 屬性是否出現(xiàn)在 某個實例 對象的 原型鏈 上
語法: 實例對象 instanceof 構造函數(shù), 返回一個 Boolean 值
示例:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);
auto instanceof Car // Car.prototype 是否在 auto 原型鏈上, true
auto instanceof Object // Object.prototype 是否在 auto 原型鏈上, true

2.2 Object.prototype.isPrototypeOf()

介紹: isPrototypeOf() 方法用于檢查一個 對象 是否存在于 另一個對象 的原型鏈中
語法: 原型.isPrototypeOf(實例), 返回一個布爾值
示例:

function Car() {}
const auto = new Car();
Car.prototype.isPrototypeOf(auto) // Car.prototype 是否在 auto 原型鏈上, true
Object.prototype.isPrototypeOf(auto) // Object.prototype 是否在 auto 原型鏈上, true

三、根據「constructor」進行判斷

constructor 判斷方法跟 instanceof 相似, 如下圖是 原型、實例、構造函數(shù) 之間的一個關系圖, 從圖可知, 在 實例對象的原型 中存在 constructor 指向 構造函數(shù), 那么借用這個特性我們可以用于判斷 數(shù)據 類型

function Car() {}
const auto = new Car();
auto.constructor === Car // true

不同于 instanceof, 通過該方式既可以處理 引用數(shù)據、又能夠處理 基本數(shù)據

(123).constructor === Number // true
(true).constructor === Boolean // true
('bar').constructor === String // true

不同于 instanceof, 不能判斷 對象父類

class A {}
class B extends A {}
const b = new B()
b.constructor === B // true
b.constructor === A // false
b instanceof B // true
b instanceof A // true

注意: null 和 undefined 沒有 constructor, 所以它是無法檢測 Null undefined

四、Object.prototype.toString.call()

Object.prototype.toString() 方法返回一個表示該對象的字符串, 該字符串格式為 "[object Type]", 這里的 Type 就是對象的類型

const toString = Object.prototype.toString;
toString.call(111); // [object Number]
toString.call(null); // [object Null]
toString.call(undefined); // [object Undefined]
toString.call(Math); // [object Math]
toString.call(new Date()); // [object Date]
toString.call(new String()); // [object String]

注意: 對于自定義構造函數(shù)實例化出來的對象, 返回的是 [object Object]

const toString = Object.prototype.toString;
function Bar(){}
toString.call(new Bar()); // [object Object]

默認, 如果一個對象有 Symbol.toStringTag 屬性并且該屬性值是個字符串, 那么這個屬性值, 會被用作 Object.prototype.toString() 返回內容的 Type 值進行展示

const toString = Object.prototype.toString;
const obj = {
  [Symbol.toStringTag]: 'Bar'
}
toString.call(obj) // [object Bar]

補充: 一個通用方法, 一行代碼獲取 數(shù)據的類型

const getType = (data) => {
  return Object.prototype.toString.call(someType)
    .slice(8, -1)
    .toLocaleLowerCase()
}

五、總結

判斷方法	基本類型	引用類型	父類	null	undefined
`typeof`	?	?	?	?	?
`instanceof & isPrototypeOf()`	?	?	?	?	?
`constructor`	?	?	?	?	?
`Object.prototype.toString.call()`	?	?	?	?	?

標題

typeof 適合用于判斷 基本類型, 特別的是: Null 會返回 object、 Function 返回 function、其余 引用類型 都返回 object
instanceof & isPrototypeOf() 可以用于判斷引用數(shù)據的類型, 同時可判斷 對象父類
constructor 可用于基本類型、引用類型, 但是不可判斷 null、undefined, 并且無法判斷 對象父類
Object.prototype.toString.call() 萬能方法, 對于 JS 中所有類型都能夠識別出來, 唯一不足的可能是無法判斷 對象父類(但是問題不大)

以上就是JavaScript中常見的數(shù)據類型判斷方法小結的詳細內容，更多關于JavaScript 判斷方法的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript中常見的數(shù)據類型判斷方法小結

目錄

一、typeof

1.1 規(guī)則

1.2 為什么「typeof null」等于「object」

1.3 為什么「typeof (() => {})」等于「function」

1.4 注意事項

二、instanceof & isPrototypeOf()

2.1 instanceof

2.2 Object.prototype.isPrototypeOf()

三、根據「constructor」進行判斷

四、Object.prototype.toString.call()

五、總結

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript中常見的數(shù)據類型判斷方法小結

目錄

一、typeof

1.1 規(guī)則

1.2 為什么「typeof null」等于「object」

1.3 為什么「typeof (() => {})」等于 「function」

1.4 注意事項

二、instanceof & isPrototypeOf()

2.1 instanceof

2.2 Object.prototype.isPrototypeOf()

三、根據「constructor」進行判斷

四、Object.prototype.toString.call()

五、總結

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

一、typeof

1.3 為什么「typeof (() => {})」等于「function」

三、根據「constructor」進行判斷

四、Object.prototype.toString.call()

五、總結