回顾一下NaN,isNaN,Number.isNaN

2018年12月28日发布阅读(3220) 作者：Jerman

什么是NaN

NaN 的值表示不是一个数字（Not-A-Number）

NaN 是一个全局对象的属性。

NaN 属性的初始值就是 NaN，和 Number.NaN 的值一样。在现代浏览器中（ES5中）， NaN 属性是一个不可配置（non-configurable），不可写（non-writable）的属性。但在ES3中，这个属性的值是可以被更改的，但是也应该避免覆盖。

编码中很少直接使用到 NaN。

通常都是在计算失败时，作为 Math 的某个方法的返回值出现的（例如：Math.sqrt(-1)）或者尝试将一个字符串解析成数字但失败了的时候（例如：parseInt(“blabla”)）。

NaN的对象类型是Number

typoef NaN //number
// 偿试转换成数字时，转换失败就会返回NaN
parseInt('balabala') //NaN
parseFloat('balabala') //NaN
Number('123balabala') //NaN
Number('balabala') //NaN
0/0 // NaN，0 除以0会返回NaN —— 但是其他数除以0则不会返回NaN。
// ps: parseInt、parseFloat转换时，只要有数字，都会转换成功
parseInt('123balabala') //123
parseFloat('123balabala') //123

怎么判断一个值是NaN

等号运算符（== 和 ===）不能被用来判断一个值是否是 NaN。必须使用 Number.isNaN() 或 isNaN() 函数。在执行自比较之中：NaN，也只有NaN，比较之中不等于它自己。

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

isNaN()

isNaN() 函数用来确定一个值是否为NaN 。

注：isNaN函数内包含一些非常有趣的规则；你也可以通过ECMAScript 2015/ES6 中定义的Number.isNaN()或者可以使用typeof 来判断该值是否为一个非数字。

如果isNaN函数的参数不是Number类型， isNaN函数会首先尝试将这个参数转换为数值，然后才会对转换后的结果是否是NaN进行判断。因此，对于能被强制转换为有效的非NaN数值来说（空字符串和布尔值分别会被强制转换为数值0和1），返回false值也许会让人感觉莫名其妙。比如说，空字符串就明显“不是数值（not a number）”。

这种怪异行为起源于：”不是数值（not a number）”在基于IEEE-754数值的浮点计算体制中代表了一种特定的含义。isNaN函数其实等同于回答了这样一个问题：被测试的值在被强制转换成数值时会不会返回IEEE-754中所谓的“不是数值（not a number）”。

实现

var isNaN = function(value) {
    var n = Number(value);
    return n !== n;
};

示例

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true
isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false
// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0
// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true
isNaN("blabla")   // true: "blabla"不能转换成数值

Number.isNaN()

Number.isNaN() 方法确定传递的值是否为 NaN和其类型是 Number。它是原始的全局isNaN()的更强大的版本。

Number.isNaN = Number.isNaN || function(value) {
    return typeof value === "number" && isNaN(value);
}

示例

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true
// 下面这几个如果使用全局的 isNaN() 时，会返回 true。
Number.isNaN("NaN");      // false，字符串 "NaN" 不会被隐式转换成数字 NaN。
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN("blabla");   // false
// 下面的都返回 false
Number.isNaN(true);
Number.isNaN(null);
Number.isNaN(37);
Number.isNaN("37");
Number.isNaN("37.37");
Number.isNaN("");
Number.isNaN(" ");

isNaN()和Number.isNaN的区别

从上面可以看出这两个是不相等的

isNaN == Number.isNaN //false

全局方法isNaN（）:

先将参数转为Number类型
在判断是否为NaN(在类型转换失败或运算错误时值为NaN)
转换后的值为NaN，则返回true，其他全为false

Number.isNaN（）

先判断参数类型，参数类型不是为number的，直接返回false
参数类型是number，则再运行isNaN()方法
判断isNaN()运行转换后的值是不是NaN，是则返回true，否则返回false

isNaN('book') === Number.isNaN('book')  //false
isNaN('book') === Number.isNaN(Number('book')) //true

应用

如何判断一个URL的ID不是纯数字？

// 方法1,此方法eslint可能会报错
isNaN(urlid)
isNaN('book')  //true
isNaN('123book')  //true
// 方法2
Number.isNaN(Number(urlid))
Number.isNaN(Number('book')) //true 
Number.isNaN(Number('123book')) //true

参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/isNaN
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN

Javascript

目录