判斷javaScript變數是Ojbect型別還是Array型別

遠方有你,伴餘生發表於2021-09-26

  JavaScript是弱型別的語言,所以對變數的型別並沒有強制控制型別。所以宣告的變數可能會成為其他型別的變數, 所以在使用中經常會去判斷變數的實際型別。 對於一般的變數我們會使用typeof來判斷變數型別。
  例如:在下面codesandbox中宣告一個變數a,並賦值一個字串'love you forever',然後使用typeof可以獲得指定變數的型別,可以在web-preview看到結果是String型別,再次向變數a賦值數字123,則判斷的型別為number,我再次向變數a賦值一個物件和一個陣列,下面的web-preview結果顯示卻都是object,what。這是為什麼?

  所以去MDN查閱相關資料,MDN對於typeof的引數描述內容為"一個表示物件或原始值的表示式"以及對typeof可能返回值如下表:

型別 結果
Undefined "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Symbol(es6) "symbol"
宿主物件(BOM和DOM) 取決於具體實現
Function "function"
其他物件 "object"

  從表中似乎沒有看到Array的字樣,說明可能包含在其他物件,所以typeof不適合做array的判斷。有沒有其他的方式呢?查閱資料發現四種方法.

  • 構造方法判斷
  let numbers = [1, 2, 3, 4, 5]
  let isArray = numbers.construstor === Array ? 'yes' : 'no'
  console.log(isArray)
  • 原型判斷
  let numbers = [1, 2, 3, 4, 5]
  let isArray = Object.prototype.toString.call(numbers) === '[object Array]' ? 'yes' : 'no'
  console.log(isArray)
  • instanceof判斷
  let numbers = [1, 2, 3, 4, 5]
  let isArray = numbers instanceof Array ? 'yes' : 'no'
  c
  • Array內建的isArray方法判斷
  let numbers = [1, 2, 3, 4, 5]
  let isArray = Array.isArray(numbers) ? 'yes' : 'no'
  console.log(isArray)

  下面是用codesandbox執行的結果

不知不覺又爬過了一個坑。編碼路上沒有捷徑,沒有程式碼量的積累,就沒有值得飛躍。感謝各位看到這裡,希望大家在不斷地努力下能早日實現自己的前端夢。

相關文章