淺談 JavaScript 資料型別判斷_李小雙

theme: channing-cyan highlight: androidstudio

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第21天，點選檢視活動詳情

整理了該系列面試題旨在學會相關知識點，從而輕鬆應對面試題的各種形式，本文講解了 JavaScript 中判斷資料型別的各種方法。

感覺有幫助的小夥伴請點贊鼓勵一下 ~

typeof 運算子

識別所有值型別；
識別函式型別；
識別引用型別，但是無法區分物件，陣列以及 null。
Infinity 和 NaN 會被識別為 number，儘管 NaN 是 Not-A-Number 的縮寫，意思是"不是一個數字"。
我們可以使用 typeof 來檢測一個變數是否存在，如 if(typeof a!="undefined"){}，而當使用 if(a) 時，如果 a 不存在（未宣告），則會報錯。

```js let a const b = nullconst c = 100const d = 'warbler' const e = trueconst f = Symbol('f') const foo = () => {} const arr = [] const obj = {} console.log(typeof a) //=> undefined console.log(typeof b) //=> object console.log(typeof c) //=> number console.log(typeof d) //=> stringconsole.log(typeof e) //=> boolean console.log(typeof f) //=> symbol console.log(typeof foo) //=> function console.log(typeof arr) //=> object console.log(typeof obj) //=> object console.log(typeof Infinity) //=> number console.log(typeof NaN) //=> number

```

instanceof 方法

用來檢測引用資料型別，值型別都會返回 false。
左運算元是待檢測其類的物件，右運算元是物件的類。如果左側的物件是右側的例項，則返回 true，否則返回 false。
檢測所有 new 操作符建立的物件都返回 true。
檢測 null 和 undefined 會返回 false。

```js const foo = () => { } const arr = [] const obj = {} const data = new Date() const number = new Number(3) console.log(foo instanceof Function) //=> true console.log(arr instanceof Array) //=> trueconsole.log(obj instanceof Object) //=> trueconsole.log(data instanceof Object) //=> trueconsole.log(number instanceof Object) //=> true console.log(null instanceof Object) //=> false console.log(undefined instanceof Object) //=> false

```

constructor 方法

除了 undefined 和 null 之外，其他型別都可以通過 constructor 屬性來判斷型別。

```js const c = 100 const d = 'warbler' const e = trueconst f = Symbol('f') const reg = /^[a-zA-Z]{5,20}$/ const foo = () => { } const arr = [] const obj = {} const date = new Date(); const error = new Error(); console.log(c.constructor === Number) //=> true console.log(d.constructor === String) //=> true console.log(e.constructor === Boolean) //=> true console.log(f.constructor === Symbol) //=> true console.log(reg.constructor === RegExp) //=> true console.log(foo.constructor === Function) //=> true console.log(arr.constructor === Array) //=> true console.log(obj.constructor === Object) //=> true console.log(date.constructor === Date) //=> true console.log(error.constructor === Error) //=> true

```

Object.prototype.toString.call

對於 Object.prototype.toString() 方法，會返回一個形如 [object XXX] 的字串。
使用Object.prototype.toString.call 的方式來判斷一個變數的型別是最準確的方法。
Object.prototype.toString.call 換成 Object.prototype.toString.apply 也可以。

```js let a const b = null const c = 100 const d = 'warbler' const e = true const f = Symbol('f') const reg = /^[a-zA-Z]{5,20}$/ const foo = () => { } const arr = [] const obj = {} const date = new Date(); const error = new Error(); const args = (function() { return arguments; })() console.log(Object.prototype.toString.call(a)) //=> [object Undefined] console.log(Object.prototype.toString.call(b)) //=> [object Null] console.log(Object.prototype.toString.call(c)) //=> [object Number] console.log(Object.prototype.toString.call(d)) //=> [object String] console.log(Object.prototype.toString.call(e)) //=> [object Boolean] console.log(Object.prototype.toString.call(f)) //=> [object Symbol] console.log(Object.prototype.toString.call(reg)) //=> [object RegExp] console.log(Object.prototype.toString.call(foo)) //=> [object Function] console.log(Object.prototype.toString.call(arr)) //=> [object Array] console.log(Object.prototype.toString.call(obj)) //=> [object Object] console.log(Object.prototype.toString.call(date)) //=> [object Date] console.log(Object.prototype.toString.call(error)) //=> [object Error] console.log(Object.prototype.toString.call(args)) //=> [object Arguments]

``` 封裝成簡單的函式使用

```js const getPrototype = (item) => Object.prototype.toString.call(item).split(' ')[1].replace(']', ''); console.log(getPrototype('abc')) //=> String

```

空值 null

我們還可以通過下面的方法來判斷變數是否為 null 。

```js let exp = null; if (!exp && typeof (exp) !== "undefined" && exp !== 0) { console.log('exp is null'); } if (exp === null) { console.log('exp is null'); } if (!exp && typeof exp === "object") { console.log('exp is null'); }

```

未定義 undefined

我們還可以通過下面的種方法來判斷變數是否為 undefined 。

```js let exp; if (exp === void 0) { console.log('exp is undefined'); }

```

數字

我們還可以通過下面的方法來判斷變數是否為 數字 。

```js let exp = 100; // isNaN 檢查不嚴密如果 exp 是一個空串或是一個空格，isNaN 是會做為數字 0 進行處理的 if (!isNaN(exp)) { console.log('exp is number'); } // 利用正則判斷字串是否為 0-9let reg = /^[0-9]+.?[0-9]*/ if (reg.test(exp)) { console.log('exp is number'); } if (parseFloat(exp).toString() !== 'NaN') { console.log('exp is number'); }

```

陣列

我們還可以通過下面的方法來判斷變數是否為 陣列 。

```js let exp = []; if (Array.isArray(exp)) { console.log('exp is Array'); }

```