JS：如何檢測一個變量 num 是否爲一個有效數字？

目錄：

• 變量的那些事
• JavaScript數據類型
• isNaN 的檢測機制是怎樣的？
• 得出解決問題的方案

前言

變量和數據類型是學習JavaScript最早接觸到的東西，可是每每看起來最簡單的東西每每還隱藏着不少你不瞭解、或者容易犯錯的知識 ，好比下面幾個問題：

• 建立變量的方式有哪些？
• JavaScript 中的數據類型有哪些？
• 檢測數據類型的方式有哪些？
• NaN 屬於數字類型嗎？
• isNaN 的檢測機制是怎樣的？

若是你還不能很好的解答上面的問題，那說明你尚未徹底掌握這部分的知識，那麼請好好閱讀下面的文章吧。

本文將從一個問題入手，經過介紹JavaScript中的變量和類型相關知識以及 isNaN 的檢測機制。但願你看完這篇文章，能夠知道這個問題的答案。廢話少說，進入正題。

1、變量那些事兒

1.1 變量是啥？

變量： 它不是指具體的值，只是一個用來存儲具體值的「容器」 或者「代名詞」 ，由於它存儲的值能夠改變，因此稱爲變量。

那如何理解變量呢？舉個簡單的例子：

var num = 10;
num = 15;
console.log(num + 5); 
// 在控制檯打印出 20，這就體現到了 num 這個變量只是存儲具體值而已，一開始 num 存儲 10，以後賦值爲 15，結果就是 20。簡單來講，變量就是常常變的，重點在 「變」 這個字上。
複製代碼

1.2 建立變量的方式

下面只是簡單說明建立變量的方式，暫時不深刻講解，以後會往深裏學，往深裏講。

• var（ES3）建立的是變量
• function（ES3） 建立函數「函數和變量沒有什麼區別，函數名也是變量，只不過存儲的值是函數類型的而已」
• let（ES6）建立的是變量
• const（ES6）建立的是常量
• import（ES6）基於 ES6 的模塊規範導出須要的信息
• class（ES6）基於 ES6 建立類

1.3 變量的命名規範

• 嚴格區分大小寫
• 遵循駝峯命名法：按照數字、字母、下劃線或者$來命名（數字不能做爲名字的開頭），命名的時候基於英文單詞拼接成一個完整的名字（第一個代詞字母小寫，其他每個有意義單詞的首字母都大寫）
• 不能使用關鍵字和保留字：在 JS 中有特殊含義的叫作關鍵字，將來可能會成爲關鍵字的叫作保留字

注：變量的命名儘可能見名知意，語義化更強一些。

2、JavaScript數據類型

2.1 變量的數據類型

• 基本數據類型/值類型
  • 數字 number
  • 字符串 string
  • 布爾 boolean
  • null
  • undefined
  • Symbol 「ES6」
• 引用數據類型
  • 對象類型
    • 普通對象
    • 正則對象
    • 數組
    • 日期對象
  • 函數

2.2 typeof 檢測數據類型

在JS中用來檢測數據類型的方式「此處簡單介紹，不深刻」：

• typeof
• instanceof
• constructor
• Object.prototype.toString.call()

本部分重點關注 typeof 檢測數據類型的細節點，暫時不去關注其餘檢測數據的方法，將從語法、返回值、發現點來說解 typeof 的使用與細節點。

語法：typeof [value] => 檢測value的數據類型

返回值：使用typeof檢測出來的結果是一個字符串，字符串中包含着對應的數據類型，例如："number"/"string"/"boolean"/"undefined"/"object"/"function"

發現點：

• typeof null 的結果是 "object" 由於 null 表明空對象指針（沒有指向任何的內存空間）
• 使用 typeof 檢測數組/正則/對象，最後返回的是"object"。也就是說基於這種方式沒法細分對象
• typeof function 的結果是 "function"

3、isNaN 的檢測機制是怎樣的？

3.1 isNaN 的做用

說到 isNaN 的做用，就不得不先說一下 NaN，首先從字面上理解爲 not a number，可是「它是數字類型的」，NaN 和誰都不相等，包括本身。那麼問題來了，如何檢測某個變量是否是有效數字呢？終於進入正題了，那就是 isNaN的做用。

isNaN：檢測當前值是否是有效數字，返回true，表明非有效數字，返回false，表明有效數字

3.2 isNaN 的檢測機制

1. 首先驗證當前要檢測的值是否爲數字類型的，若是不是，瀏覽器會默認的把值轉換爲數字類型「調用 Number 這個方法」
2. 當前檢測的值已是數字類型，是有效數字，返回false，不是，返回true「數字類型中只有NaN不是有效數字，其他都是有效數字」

重點是：調用 Number 這個方法，把非數字類型的值轉換爲數字，下面舉例子，以便讀者更好的理解 Number 這個方法。

其它基本類型轉換爲數字：直接使用Number這個方法轉換的

【字符串轉數字】

Number('13') // => 13
Number('13px') // => NaN 若是當前字符串中出現任意一個非有效數字字符，結果則爲NaN
Number('13.5') // => 13.5 能夠識別小數
Number('13.5.0') // => NaN
複製代碼

【布爾轉數字】

Number(true) // => 1
Number(false) // => 0
複製代碼

【其它轉數字】

Number(null) // => 0
Number(undefined) // => NaN
複製代碼

引用數據類型轉換爲數字：先把引用值調取 toString 轉換爲字符串，而後再把字符串調取 Number 轉換爲數字

【對象轉數字】

({}).toString() // => '[object Object]' => NaN
複製代碼

【數組轉數字】

[12,23].toString() // => '12,23' => NaN
[12].toString() // => '12' => 12
[].toString() // => '' => 0
複製代碼

【正則轉數字】

/^$/.toString() // => "/^$/" => NaN
複製代碼

3.3 檢驗是否理解 isNaN 的檢測機制

若是你能快速地看出下面代碼執行結果，而且徹底正確，就說明你已經徹底理解 isNaN 的檢測機制。

var num = 12;
isNaN(num); // 檢測num變量存儲的值是否爲有效數字 false

isNaN('13'); // => false
isNaN('樂少');  // => true
isNaN(true); // => false
isNaN(false); // => false
isNaN(null); // => false
isNaN(undefined); // => true
isNaN({age:9});	// => true
isNaN([12,13]); // => true
isNaN([12]); // => false
isNaN(/^$/); // => true
isNaN(function(){}); // => true
複製代碼

4、回到最初的起點

下面是 num 這個變量是已經聲明的，可是 num 變量存儲的值不能肯定。

方案一：

if(Number(num) == NaN){
    alert('num不是有效數字！')
}
複製代碼

方案二：

if(isNaN(num)){
   alert('num不是有效數字！')
}
複製代碼

方案三：

if(typeof num === 'number' && isNaN(num)){
   // => 檢測是否爲有效數字，只有這一種方案 
   alert('num不是有效數字！')
}
複製代碼

看完整篇文章+我列出來的三個方案，我相信你心中已經有了明確的答案，我下面逐個方案進行分析：

方案一：假設 Number(num) 的結果是 NaN，可是代碼執行的結果是不會出現彈窗，由於 NaN和誰都不相等，條件永遠不成立（即便 num 確實不是有效數字，轉換的結果確實是 NaN ，可是NaN!= NaN的）

方案二：這個方案看起來已是正確答案，可是忽略了 其餘數據類型的值能夠轉爲數字類型，例如，假設 num 的值爲 '13'，首先會調用 Number 將 '13' 變成 13，而後再使用 isNaN(13) 得出結果爲 false，可是 '13' 並非一個有效的數字。

方案三：我我的認爲這個方案是可以解決文章標題提出的問題，首先先判斷 變量是否爲 數字類型，而後再使用 isNaN 判斷變量是否是有效數字？&& 運算符，須要兩邊同時成立的時候，結果才爲 true，因此當 typeof num === 'number' 這個結果爲 false 的話，就說整個判斷條件的結果都爲 false。