淺談 JavaScript 資料型別判斷

語言: CN / TW / HK

theme: channing-cyan highlight: androidstudio


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

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

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

typeof 運算子

  • 識別所有值型別;
  • 識別函式型別;
  • 識別引用型別,但是無法區分物件,陣列以及 null
  • InfinityNaN 會被識別為 number,儘管 NaNNot-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
  • 檢測 nullundefined 會返回 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 方法

  • 除了 undefinednull 之外,其他型別都可以通過 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'); }

```