Js中的 NaN

JavaScript 中的數字類型包含整數和浮點數：

const integer = 4; const float = 1.5; typeof integer; // => 'number' typeof float; // => 'number'

另外還有 2 個特殊的數字值：Infinity（比其他任何數字都大的數字）和 NaN（表示“Not A Number”概念）：

const infinite = Infinity; const faulty = NaN; typeof infinite; // => 'number' typeof faulty; // => 'number'

雖然直接使用 NaN 的情況很少見，但在對數字進行無效的操作后卻會令人驚訝地出現。

讓我們仔細看看 NaN 特殊值：如何檢查變量是否具有 NaN，並了解怎樣創建“Not A Number”值。

 

NaN number

JavaScript 中的數字類型是所有數字值的集合，包括 “Not A Number”，正無窮和負無窮。

可以使用特殊表達式 NaN 、全局對象或 Number 函數的屬性來訪問“Not A Number”：

typeof NaN; // => 'number' typeof window.NaN; // => 'number' typeof Number.NaN; // => 'number'

盡管具有數字類型，但“Not A Number”是不代表實數的值。NaN 可用於表示錯誤的數字運算。

例如，將數字與 undefined 相乘不是有效操作，因此結果為 NaN：

1 * undefined; // => NaN

同樣嘗試解析無效的數字字符串（如 'Joker'）也會導致 NaN：

parseInt('Joker', 10); // => NaN

 

檢查 NaN 是否相等

NaN有趣的特性是，即使使用 NaN 本身，它也不等於任何值：

NaN === NaN; // => false

此行為對於檢測變量是否為 NaN 非常有用：

const someNumber = NaN; if (someNumber !== someNumber) { console.log('Is NaN'); } else { console.log('Is Not NaN'); } // logs "Is NaN"

僅當 someNumber 是 NaN 時，someNumber !== someNumber 表達式才是 true。因此，以上代碼片段輸出到控制台的結果是 "Is NaN"。

JavaScript 通過內置函數來檢測 NaN：isNaN() 和 Number.isNaN()：

isNaN(NaN); // => true isNaN(1); // => false Number.isNaN(NaN); // => true Number.isNaN(1); // => false

這些函數之間的區別在於，Number.isNaN() 不會將其參數轉換為數字：

isNaN('Joker12'); // => true Number.isNaN('Joker12'); // => false

isNaN('Joker12') 將參數 'Joker12' 轉換為數字，即 NaN。因此該函數返回 true 。

另一方面，Number.isNaN('Joker12') 會檢查參數是否為 NaN 而不進行轉換。該函數返回 false ，因為'Joker12' 不等於 NaN。

 

導致 NaN 的運算

1 解析數字

在 JavaScript 中，你可以將字符串形式的數字轉換為數字。

例如你可以輕松地將字符串 '1.5' 轉換為浮點數 1.5：

const numberString = '1.5'; const number = parseFloat(numberString); number; // => 1.5

當字符串不能被轉換為數字時，解析函數返回 NaN ：表示解析失敗。這里有些例子：

parseFloat('Joker12.5'); // => NaN parseInt('Joker12', 10); // => NaN Number('Joker12'); // => NaN

解析數字時，最好先確認解析結果是否為 NaN ：

let inputToParse = 'Invalid10'; let number; number = parseInt(inputToParse, 10); if (isNaN(number)) { number = 0; } number; // => 0

解析 inputToParse 失敗，因此 parseInt(inputToParse, 10)返回 NaN。條件 if (isNaN(number)) 為 true，並且將 number 賦值為 0。

2 undefined 作為操作數

把 undefined 用作加法、乘法等算術運算中的操作數會生成 NaN。

例如：

function getFontSize(style) { return style.fontSize; } const fontSize = getFontSize({ size: 16 }) * 2; const doubledFontSize = fontSize * 2; doubledFontSize; // => NaN

getFontSize() 是從樣式對象訪問 fontSize 屬性的函數。調用 getFontSize({ size: 16 }) 時，結果是undefined（在 { size: 16 } 對象中不存在 fontSize 屬性）。

fontSize * 2 被評估為 undefined * 2，結果為 NaN。

當把缺少的屬性或返回 undefined 的函數用作算術運算中的值時，將生成 “Not A Number”。

防止 NaN 的好方法是確保 undefined 不會進行算術運算，需要隨時檢查。

3 NaN 作為操作數

當算數運算的操作數為 NaN 時，也會生成NaN 值：

1 + NaN; // => NaN 2 * NaN; // => NaN

NaN 遍及算術運算：

let invalidNumber = 1 * undefined; let result = 1; result += invalidNumber; // appendresult *= 2; // duplicate result++; // increment result; // => NaN

在將 invalidNumber 值（具有 'NaN'）附加到 result之后，會破壞對 result 變量的操作。

4 Indeterminate 形式

當算術運算采用不確定形式時，將會產生 NaN 值。

0/0 和 Infinity/Infinity 這樣的的除法運算：

0 / 0; // => NaN Infinity / Infinity; // => NaN

0 和 Infinity 的乘法運算：

0 * Infinity; // => NaN

帶有不同符號的 Infinity 的加法：

-Infinity + Infinity; // => NaN

5 無效的數學函數參數

負數的平方根：

Math.pow(-2, 0.5); // => NaN (-2) ** 0.5; // => NaN

或負數的對數：

Math.log2(-2); // => NaN

PPT模板下載大全https://www.wode007.com

總結

JavaScript 中用 NaN 表示的的“Not A Number”概念對於表示錯誤的數字運算很有用。

即使是 NaN 本身也不等於任何值。檢查變量是否包含 NaN 的建議方法是使用 Number.isNaN(value)。

將字符串形式的數字轉換為數字類型失敗時，可能會導致顯示“Not A Number”。檢查 parseInt()、parseFloat() 或 Number() 是否返回了 NaN 是個好主意。

undefined 或 NaN 作為算術運算中的操作數通常會導致 NaN。正確處理 undefined（為缺少的屬性提供默認值）是防止這種情況的好方法。

數學函數的不確定形式或無效參數也會導致 “Not A Number”。但是這些情況很少發生。
這是我的務實建議：出現了 NaN？趕快檢查是否存在 undefined！