分享JavaScript?類型判斷的幾種方法

更新時間：2022年05月25日 17:09:24 作者：??大力yy????

這篇文章主要介紹了分享JavaScript?類型判斷的幾種方法，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的的參考價值，需要的小伙伴可以參考一下

一、JavaScript 基本類型

首先介紹一下JavaScript中的八大基本類型

1、原始數(shù)據(jù)類型

除對象類型（object）以外的其它任何類型定義的不可變的值（值本身無法被改變）。例如（與 C 語言不同），JavaScript 中字符串是不可變的（譯注：如，JavaScript 中對字符串的操作一定返回了一個新字符串，原始字符串并沒有被改變）。我們稱這些類型的值為“原始值”。 —— MDN

（1）布爾類型（Boolean）

布爾表示一個邏輯實體，可以有兩個值：true和false 、

（2）Null類型

Null 類型只有一個值：null
值 null 是一個字面量，是表示缺少的標(biāo)識，只是變量未指向任何對象。
注意：可以把 null 作為尚未創(chuàng)建的對象，但是 null 并非對象。

（3）Undefined類型

undefined：一個聲明未定義的變量的初始值，或沒有實際參數(shù)的形式參數(shù)。
undefined是全局對象的一個屬性。也就是說，它是全局作用域的一個變量。undefined的最初值就是原始數(shù)據(jù)類型undefined。

console.log(undefined in window)  //  true
let a;
console.log(a)  // undefined

一個函數(shù)如果沒有使用return語句指定返回值，就會返回一個undefined值。

function f() {
}
console.log(f())  // undefined

（4）數(shù)字類型（Number）

數(shù)字類型是一種基于 IEEE 754 標(biāo)準(zhǔn)的雙精度 64 位二進(jìn)制格式的值，能表示整數(shù)和浮點值
值的范圍： Number.MIN_VALUE（5e-324）— Number.MAX_VALUE(1.7976931348623157e+308)
如果某個正值大于 Number.MAX_VALUE，則表示為Infinity（或者+Infinity）
- 如果某個負(fù)值小于 -Number.MAX_VALUE則表示為-Infinity
- 如果某個正值小于 Number.MIN_VALUE，則表示為0（或者+0）
- 如果某個負(fù)值大于 -Number.MIN_VALUE則表示為-0

// 注意：Number.MIN_VALUE（5e-324）— Number.MAX_VALUE(1.7976931348623157e+308) 是可以表示的正值范圍
console.log(Number.MIN_VALUE);  // 5e-324
console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308

console.log(1e310);  // Infinity
console.log(-1e310);  // -Infinity

console.log(1e-330);  // 0
console.log(-1e-330);  // 0

NaN（非數(shù)值，Not-a-Number）。

not-a-number：NaN 是一個全局對象的屬性。NaN 屬性的初始值就是 NaN，和 Number.NaN 的值一樣。

數(shù)字類型中只有一個整數(shù)有兩種表示方法：0可表示為-0和+0（0是+0的簡寫）。

（5）BigInt

BigInt 類型是 JavaScript 中的一個基礎(chǔ)的數(shù)值類型，可以表示任意精度的整數(shù)。使用 BigInt，您可以安全地存儲和操作大整數(shù)，甚至可以超過數(shù)字類型的安全整數(shù)限制。（BigInt 與 Number 的主要區(qū)別在于，BigInt能在內(nèi)存中精確表示超過安全限制的整數(shù)）

// 數(shù)字類型安全整數(shù)限制
console.log(Number.MIN_SAFE_INTEGER)  // -9007199254740991
console.log(Number.MAX_SAFE_INTEGER)  // 9007199254740991

BigInt 是通過在整數(shù)末尾附加字母n或調(diào)用構(gòu)造函數(shù)來創(chuàng)建的。

// 構(gòu)造函數(shù)創(chuàng)建
// BigInt() 不與 new 運算符一起使用。
let a = BigInt(1);
// 末尾附加字母n創(chuàng)建
let b = 1n;
console.log(a)  // 1n
console.log(b)  // 2n

BigInt不能與數(shù)字相互運算。否則，將拋出TypeError。

console.log(1 + 1n);
//Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

（6）字符串類型（String）

JavaScript 的字符串類型用于表示文本數(shù)據(jù)。它是一組 16 位的無符號整數(shù)值的“元素”。在字符串中的每個元素占據(jù)了字符串的位置。第一個元素的索引為0，下一個是索引1，依此類推。字符串的長度是它的元素的數(shù)量。

（7）符號類型（Symbols）

符號（Symbols）類型是唯一且不可修改的原始值，該類型的性質(zhì)在于這個類型的值可以用來創(chuàng)建匿名的對象屬性，可以用來作為對象的鍵(key)
可以通過調(diào)用函數(shù) Symbol() 來創(chuàng)建 Symbol 數(shù)據(jù)類型實例。
當(dāng)一個 symbol 類型的值在屬性賦值語句中被用作標(biāo)識符，該屬性（像這個 symbol 一樣）是匿名的；并且是不可枚舉的。因為這個屬性是不可枚舉的，它不會在循環(huán)結(jié)構(gòu) “for( ... in ...)” 中作為成員出現(xiàn)，也因為這個屬性是匿名的，它同樣不會出現(xiàn)在 “Object.getOwnPropertyNames()” 的返回數(shù)組里。這個屬性可以通過創(chuàng)建時的原始 symbol 值訪問到，或者通過遍歷 “Object.getOwnPropertySymbols() ” 返回的數(shù)組。在之前的代碼示例中，通過保存在變量 myPrivateMethod的值可以訪問到對象屬性。
symbol 值提供了一種自定義類可以創(chuàng)建私有成員的方式，并維護(hù)一個僅適用于該類的 symbol 注冊表。自定義類可以使用 symbol 值來創(chuàng)建“自有”屬性，這些屬性避免了不必要的被偶然發(fā)現(xiàn)帶來的影響。在類定義中，動態(tài)創(chuàng)建的 symbol 值將保存到作用域變量中，該變量只能在類定義中私有地使用。

2、引用數(shù)據(jù)類型

對象類型（Object）

在計算機(jī)科學(xué)中, 對象（object）是指內(nèi)存中的可以被標(biāo)識符引用的一塊區(qū)域。

在 JavaScript 中，對象可以被看作是一組屬性的集合。用對象字面量語法來定義一個對象時，會自動初始化一組屬性。而后，這些屬性還可以被添加和移除。

屬性的值可以是任意類型，包括其它對象。
屬性使用鍵（key）來標(biāo)識，它的鍵值可以是一個字符串或者符號值（Symbol）。

對象擁有兩種屬性：

a、數(shù)據(jù)屬性

b、訪問器屬性

JavaScript中提供了很多內(nèi)置對象，可參考MDN官方文檔。

3、兩種數(shù)據(jù)類型的存儲方式

（1）原始數(shù)據(jù)類型：

基礎(chǔ)類型存儲在棧內(nèi)存，被引用或拷貝時，會創(chuàng)建一個完全相等的變量；占據(jù)空間小、大小固定，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲。

（2）引用數(shù)據(jù)類型：

引用類型存儲在堆內(nèi)存，存儲的是地址，多個引用指向同一個地址，這里會涉及一個“共享”的概念；占據(jù)空間大、大小不固定。引用數(shù)據(jù)類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當(dāng)解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體。

所以，在 JavaScript 中，原始類型的賦值會完整復(fù)制變量值，而引用類型的賦值是復(fù)制引用地址。

二、Javascript 數(shù)據(jù)類型判斷的幾種方法

1、typeof

typeof操作符返回一個字符串，表示未經(jīng)計算的操作數(shù)的類型。

語法：

// operand：一個表示對象或原始值的表達(dá)式，其類型將被返回
typeof operand
typeof(operand)

返回值：

"undefined" "object"  "boolean"  "number" "bigint" "string" "symbol" "function" "object"

（1）不同數(shù)據(jù)類型的 typeof 值

// 歷史遺留問題
console.log(typeof null);  // object
// Undefined 類型typeof值為 undefined
console.log(typeof undefined);  // undefined
// 未定義的變量 typeof值也為 undefined
console.log(typeof a);  // undefined
// 非數(shù)值
console.log(typeof NaN);  // number
// 無窮大
console.log(typeof Infinity);  // number
// 除 Null 和 Undefined 之外的原始數(shù)據(jù)類型 typeof 值都是對應(yīng)的類型
console.log(typeof true);  // boolean
console.log(typeof 2);  // number
console.log(typeof 2n);  // bigint
console.log(typeof BigInt(1));  // bigint
console.log(typeof 'str');  // string
console.log(typeof Symbol(1));  // symbol
console.log(typeof Boolean(true));  // boolean
console.log(typeof Number(1));  // number
console.log(typeof String('str'));  // string
// 基本包裝類型
console.log(typeof new Boolean(true));  // object
console.log(typeof new Number(1));  // object
console.log(typeof new String('str'));  // object
// 字面量
console.log(typeof {});  // object
console.log(typeof []);  // object
console.log(typeof /1/);  // object
// 除了 Function 對象實例， typeof值都是 object
console.log(typeof new Object());  // object
console.log(typeof new Array());  // object
console.log(typeof new Map());  // object
console.log(typeof new Set());  // object
console.log(typeof new Date());  // object
console.log(typeof new RegExp());  // object
console.log(typeof Math);  // object
// Function 對象實例， typeof值為 function
console.log(typeof new Function());  // function
console.log(typeof Function);  // function
console.log(typeof Array);  // function
console.log(typeof Set);  // function
console.log(typeof Date);  // function
console.log(typeof RegExp);  // function
console.log(typeof Object);  // function

（2） typeof null === 'object' 的原因

“typeof null”錯誤是 JavaScript 第一版的遺留物。在這個版本中，值存儲在 32 位單元中，由一個小型標(biāo)簽（1-3 位）和值的實際數(shù)據(jù)組成。類型標(biāo)簽存儲在單元的低位中。

其中有五個：

000：對象。數(shù)據(jù)是對對象的引用。
1：整數(shù)。數(shù)據(jù)是一個 31 位有符號整數(shù)。
010：雙倍。數(shù)據(jù)是對雙浮點數(shù)的引用。
100：字符串。數(shù)據(jù)是對字符串的引用。
110：布爾值。數(shù)據(jù)是布爾值。

也就是說，最低位是任一位，那么類型標(biāo)簽只有一位長?；蛘邽榱?，則類型標(biāo)簽的長度為三位，為四種類型提供兩個額外的位。

有兩個值是特殊的：

undefined ( JSVAL_VOID ) 是整數(shù) -2 30（整數(shù)范圍之外的數(shù)字）。
null ( JSVAL_NULL ) 是機(jī)器碼 NULL 指針?；蛘撸阂粋€對象類型標(biāo)簽加上一個為零的引用。（表示為全0）

所以 typeof 認(rèn)為 null 是一個 object

（3）對象類型 typeof 返回值的理解

針對對象類型，個人理解的是：

如果是Function對象，那么返回值則是function
如果是其他任何普通對象，那么返回值則是object，

（4）關(guān)于 typeof Boolean(true) 和 typeof new Boolean(true)不同的原因

// 簡單調(diào)用Boolean() 函數(shù)
console.log(Boolean(true));  // true
// 創(chuàng)建一個Boolean對象
console.log(new Boolean(true));  // Boolean {true}

Boolean(true) 的返回值就是Boolean類型的數(shù)據(jù)，newBoolean(true)返回的是一個Boolean對象。

（5）總結(jié)

typeof 可以判斷除 null 之外所有原始數(shù)據(jù)類型
typeof 在判斷實例類型時，根據(jù)實例的構(gòu)造函數(shù)返回 object 或 function
typeof null === 'object' 是一個歷史遺留問題，無法修改。
typeof NaN === 'number'

2、instanceof

instanceof運算符用于檢測構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個實例對象的原型鏈上

語法：

// object：某個實例對象
// constructor：某個構(gòu)造函數(shù)
object instanceof constructor

（1）相關(guān)例子

// instanceof 右邊是一個構(gòu)造函數(shù)，所以undefined 和 null 不能使用instanceof，下面兩條語句執(zhí)行會報錯
// console.log(undefined instanceof Undefined);
// console.log(null instanceof Null);
// 對于原始數(shù)據(jù)類型無法檢測
console.log(2 instanceof Number);  // false
console.log(1n instanceof BigInt);  // false
console.log(true instanceof Boolean);  // false 
console.log('str' instanceof String);  // false  
console.log(Symbol(1) instanceof Symbol);  // false

// 可以檢測內(nèi)置對象類型
console.log([] instanceof Array);  // true
console.log(function(){} instanceof Function);  // true
console.log({} instanceof Object);  // true   
console.log(/1/ instanceof RegExp);  // true 
// 所有函數(shù)對象實例原型鏈上都存在Function
console.log(Array instanceof Function);  // true 
console.log(Set instanceof Function);  // true 
console.log(Map instanceof Function);  // true 
console.log(Date instanceof Function);  // true 
console.log(RegExp instanceof Function);  // true 
console.log(Function instanceof Function);  // true 
console.log(Object instanceof Function);  // true 
// Object 是所有實例對象原型鏈的盡頭
console.log(Array instanceof Object);  // true 
console.log(Set instanceof Object);  // true 
console.log(Map instanceof Object);  // true 
console.log(Date instanceof Object);  // true 
console.log(RegExp instanceof Object);  // true 
console.log(Function instanceof Object);  // true 
console.log(Object instanceof Object);  // true 
function foo() {}
// foo 是 Function的一個實例
console.log(foo instanceof Object);  // true
console.log(foo instanceof Function);  // true
// new foo() 是 foo 的一個實例
console.log(new foo() instanceof foo);  // true
console.log(new foo() instanceof Object);  // true
console.log(new foo() instanceof Function);  // false
// foo() 返回的是undefined
console.log(foo() instanceof Object);  // false
console.log(foo() instanceof Function);  // false

（2) 當(dāng)構(gòu)造函數(shù)的proptotype發(fā)生改變時，instanceof 結(jié)果可能會出錯

function foo() {}
let f = new foo();
console.log(f instanceof foo)  // true
// foo 原型發(fā)生改變
foo.prototype = Array.prototype;
console.log(f instanceof foo);  // false

（3）手動實現(xiàn) instanceof

function myInstanceof(left, right) {
    // 獲得構(gòu)造函數(shù)的原型
    let prototype = right.prototype
    // 獲得對象的原型
    left = left.__proto__
    // 判斷對象的類型是否等于類型的原型
    while (true) {
        // 原型鏈的盡頭是 null，說明實例對象的原型鏈遍歷結(jié)束
    	if (left === null)
    		return false
    	if (prototype === left)
    		return true
    	left = left.__proto__
    }
}

上述手動實現(xiàn)只是實現(xiàn)了基本功能，但與原生instanceof仍然存在差別，例如：

未對 right 進(jìn)行錯誤處理

// 檢驗right 是否是一個對象（Object）
if (right is not Object){
    throw new TypeError(" Uncaught TypeError: Right-hand side of 'instanceof' is not Object")
}
// 檢驗 right 是否可被調(diào)用
if (right is not callable) {
    throw new TypeError(" Uncaught TypeError: Right-hand side of 'instanceof' is not callable")
}

myInstanceof('str', String) === true

console.log(_instanceof('str', String))  // true

有關(guān)instanceof 原理，可繼續(xù)深入了解原型鏈相關(guān)知識點。

（4）總結(jié)

instanceof 不能判斷原始數(shù)據(jù)類型
instanceof 能夠判斷引用數(shù)據(jù)類型，但由于是查找原型鏈，所以不能很精準(zhǔn)指出數(shù)據(jù)類型。

例如：

console.log([] instanceof Array);  // true
console.log([] instanceof Object);  // true

當(dāng)構(gòu)造函數(shù)的 prototype 發(fā)生改變時，會導(dǎo)致 instanceof 結(jié)果發(fā)生改變，詳見（2）

所以 instanceof 用于判斷數(shù)據(jù)類型也存在弊端。

3、構(gòu)造函數(shù)（constructor）

（1）相關(guān)例子

// null 和 undefined 沒有構(gòu)造函數(shù)
onsole.log(null.constructor)  // TypeError
onsole.log(undefined.constructor) // TypeError
// 原始數(shù)據(jù)類型
console.log((2).constructor === Number); // true
console.log((2n).constructor === BigInt); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(Symbol(1).constructor === Symbol); // true
// 字面量
console.log(([]).constructor === Array); // true
console.log((/1/).constructor === RegExp); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true
// JavaScript中的內(nèi)置函數(shù)對象的構(gòu)造函數(shù)為 Function
console.log(Array.constructor === Function); // true
console.log(String.constructor === Function); // true
console.log(Function.constructor === Function); // true
console.log(Object.constructor === Function); // true
// JavaScript中的內(nèi)置普通對象的構(gòu)造函數(shù)為 Object
console.log(Math.constructor === Object); // true
console.log(JSON.constructor === Object); // true
console.log(Atomics.constructor === Object); // true
console.log(Intl.constructor === Object); // true
console.log(Reflect.constructor === Object); // true
console.log(WebAssembly.constructor === Object); // true

（2）如果創(chuàng)建一個對象前修改構(gòu)造函數(shù)的原型，會導(dǎo)致constructor不可靠

function Fn(){};
Fn.prototype=new Array();
var f=new Fn();
console.log(f.constructor===Fn);    // false
console.log(f.constructor===Array); // true

（3）總結(jié)

通過構(gòu)造函數(shù) constructor 能夠準(zhǔn)確判斷出數(shù)據(jù)類型，但 null 和 undefined 沒有構(gòu)造函數(shù)，無法判斷
內(nèi)置函數(shù)對象的構(gòu)造函數(shù)都是 Function，例如 Array、Map等；內(nèi)置普通對象的構(gòu)造函數(shù)是Object，例如：JSON、Atomic、Intl、Reflect、WebAssembly 等
在創(chuàng)建實例前修改實例的原型，會導(dǎo)致constructor不可靠

所以 constructor 判斷數(shù)據(jù)類型也存在弊端。

4、Object.prototype.toString.call()

（1）Object.prototype.toString()

每個對象都有一個toString()方法，當(dāng)該對象被表示為一個文本值時，或者一個對象以預(yù)期的字符串方式引用時自動調(diào)用。默認(rèn)情況下，toString()方法被每個Object對象繼承。如果此方法在自定義對象中未被覆蓋，toString() 返回 "[object type]" ，其中type是對象的類型 —— MDN

（2） Object.prototype.toString.call() 實例

// 原始數(shù)據(jù)類型
console.log(Object.prototype.toString.call(undefined))  // [object Undefined]
console.log(Object.prototype.toString.call(null))  // [object Null]
console.log(Object.prototype.toString.call(1))  // [object Number]
console.log(Object.prototype.toString.call(1n))  // [object BigInt]
console.log(Object.prototype.toString.call(true))  // [object Boolean]
console.log(Object.prototype.toString.call('str'))  // [object String]
console.log(Object.prototype.toString.call(Symbol(1)))  // [object Symbol]
// 字面量
console.log(Object.prototype.toString.call({}))  // [object object]
console.log(Object.prototype.toString.call([]))  // [object Array]
console.log(Object.prototype.toString.call(/1/))  // [object RegExp]
console.log(Object.prototype.toString.call(NaN))  // [object Number]
console.log(Object.prototype.toString.call(Infinity))  // [object Number]
console.log(Object.prototype.toString.call(globalThis))  // [object Window]
// 內(nèi)置函數(shù)對象實例
console.log(Object.prototype.toString.call(new Array()))  // [object Array]
console.log(Object.prototype.toString.call(new Map()))  // [object Map]
console.log(Object.prototype.toString.call(new Set()))  // [object Set]
console.log(Object.prototype.toString.call(new Date()))  // [object Date]
console.log(Object.prototype.toString.call(new Function()))  // [object Function]
// 內(nèi)置普通對象本身
console.log(Object.prototype.toString.call(Math))  // [object Math]
console.log(Object.prototype.toString.call(JSON))  // [object JSON]
console.log(Object.prototype.toString.call(Reflect))  // [object Reflect]
// 內(nèi)置函數(shù)對象本身
console.log(Object.prototype.toString.call(Array))  // [object Function]
console.log(Object.prototype.toString.call(Map))  // [object Function]
console.log(Object.prototype.toString.call(Function))  // [object Function]
console.log(Object.prototype.toString.call(Object))  // [object Function]
// 瀏覽器全局對象
console.log(Object.prototype.toString.call(document))  // [object HTMLDocument]
console.log(Object.prototype.toString.call(window))  // [object Window]
// 自定義構(gòu)造函數(shù)
function Foo() {}
f = new Foo();
console.log(Object.prototype.toString.call(f))  // [object object]
console.log(Object.prototype.toString.call(Foo))  // [object Function]

（3）基于Object.prototype.toString.call()實現(xiàn)數(shù)據(jù)類型判斷

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {    // 先進(jìn)行typeof判斷，如果是基礎(chǔ)數(shù)據(jù)類型，直接返回
    return type;
  }
  // 對于typeof返回結(jié)果是object的，再進(jìn)行如下的判斷，正則返回結(jié)果
  return Object.prototype.toString.call(obj).replace(/^[object (\S+)]$/, '$1');  // 注意正則中間有個空格
}

（4）總結(jié)

Object.prototype.toString.call() 能準(zhǔn)確判斷數(shù)據(jù)類型。

三、寫在最后

除了 Null 之外的原始數(shù)據(jù)類型，均可使用 typeof 判斷數(shù)據(jù)類型。
Object.prototype.toString.call() 是判斷數(shù)據(jù)類型的最好的方法。
有關(guān) instanceof 和 constructor , 可以深入去了解JavaScript中的原型鏈。

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

您可能感興趣的文章:

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

分享JavaScript?類型判斷的幾種方法

目錄

一、JavaScript 基本類型

1、原始數(shù)據(jù)類型

2、引用數(shù)據(jù)類型

3、兩種數(shù)據(jù)類型的存儲方式

二、Javascript 數(shù)據(jù)類型判斷的幾種方法

1、typeof

2、instanceof

3、構(gòu)造函數(shù)（constructor）

4、Object.prototype.toString.call()

三、寫在最后

相關(guān)文章

最新評論

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

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

常用在線小工具

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

分享JavaScript?類型判斷的幾種方法

目錄

一、JavaScript 基本類型

1、原始數(shù)據(jù)類型

2、引用數(shù)據(jù)類型

3、兩種數(shù)據(jù)類型的存儲方式

二、Javascript 數(shù)據(jù)類型判斷的幾種方法

1、typeof

2、instanceof

3、構(gòu)造函數(shù)（constructor）

4、Object.prototype.toString.call()

三、寫在最后

相關(guān)文章

最新評論

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

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

常用在線小工具

一、JavaScript 基本類型

1、原始數(shù)據(jù)類型

2、引用數(shù)據(jù)類型

3、兩種數(shù)據(jù)類型的存儲方式

二、Javascript 數(shù)據(jù)類型判斷的幾種方法

1、typeof

3、構(gòu)造函數(shù)（constructor）

4、Object.prototype.toString.call()

三、寫在最后