首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

回顾一下NaN,isNaN,Number.isNaN

2018年12月28日 发布 阅读(577) 作者:懒炖

什么是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

  1. typoef NaN //number
  2. // 偿试转换成数字时,转换失败就会返回NaN
  3. parseInt('balabala') //NaN
  4. parseFloat('balabala') //NaN
  5. Number('123balabala') //NaN
  6. Number('balabala') //NaN
  7. 0/0 // NaN,0 除以0会返回NaN —— 但是其他数除以0则不会返回NaN。
  8. // ps: parseInt、parseFloat转换时,只要有数字,都会转换成功
  9. parseInt('123balabala') //123
  10. parseFloat('123balabala') //123

怎么判断一个值是NaN

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

  1. NaN === NaN; // false
  2. Number.NaN === NaN; // false
  3. isNaN(NaN); // true
  4. isNaN(Number.NaN); // true
  5. Number.isNaN(NaN) // true
  6. 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)”。

实现

  1. var isNaN = function(value) {
  2. var n = Number(value);
  3. return n !== n;
  4. };

示例

  1. isNaN(NaN); // true
  2. isNaN(undefined); // true
  3. isNaN({}); // true
  4. isNaN(true); // false
  5. isNaN(null); // false
  6. isNaN(37); // false
  7. // strings
  8. isNaN("37"); // false: 可以被转换成数值37
  9. isNaN("37.37"); // false: 可以被转换成数值37.37
  10. isNaN("37,5"); // true
  11. isNaN('123ABC'); // true: parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
  12. isNaN(""); // false: 空字符串被转换成0
  13. isNaN(" "); // false: 包含空格的字符串被转换成0
  14. // dates
  15. isNaN(new Date()); // false
  16. isNaN(new Date().toString()); // true
  17. isNaN("blabla") // true: "blabla"不能转换成数值

Number.isNaN()

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

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

示例

  1. Number.isNaN(NaN); // true
  2. Number.isNaN(Number.NaN); // true
  3. Number.isNaN(0 / 0) // true
  4. // 下面这几个如果使用全局的 isNaN() 时,会返回 true。
  5. Number.isNaN("NaN"); // false,字符串 "NaN" 不会被隐式转换成数字 NaN。
  6. Number.isNaN(undefined); // false
  7. Number.isNaN({}); // false
  8. Number.isNaN("blabla"); // false
  9. // 下面的都返回 false
  10. Number.isNaN(true);
  11. Number.isNaN(null);
  12. Number.isNaN(37);
  13. Number.isNaN("37");
  14. Number.isNaN("37.37");
  15. Number.isNaN("");
  16. Number.isNaN(" ");

isNaN()和Number.isNaN的区别

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

  1. isNaN == Number.isNaN //false

全局方法isNaN():

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

Number.isNaN()

  • 先判断参数类型,参数类型不是为number的,直接返回false
  • 参数类型是number,则再运行isNaN()方法
  • 判断isNaN()运行转换后的值是不是NaN,是则返回true,否则返回false
  1. isNaN('book') === Number.isNaN('book') //false
  2. isNaN('book') === Number.isNaN(Number('book')) //true

应用

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

  1. // 方法1,此方法eslint可能会报错
  2. isNaN(urlid)
  3. isNaN('book') //true
  4. isNaN('123book') //true
  5. // 方法2
  6. Number.isNaN(Number(urlid))
  7. Number.isNaN(Number('book')) //true
  8. 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

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •