在JavaScript的数字类型Number中,我们最常使用的大概是整数类型与浮点数类型,但除这两者外,还有个特殊的存在NaN,为什么NaN!==NaN?我们如何判断一个值是否等于NaN呢?这篇文章好好聊聊NaN。

1.NaN是什么?

NaN全称是Not-A-Number(不是一个数字),我们可以通过Number.NaN来获得一个NaN,在类型转换失败时,我们常常会得到一个NaN,需要注意的是,NaN是JS中唯一一个自身不相等的存在。

Number.NaN //NaN
NaN === NaN //false

2.为什么NaN!==NaN?

NaN只是Number上的一个静态属性。

Number('echo') //NaN

比如Number('echo')会得到NaN,它只是为了告诉你这个值不是一个数字,一种表示方法,而非一个精准有效的值,因此NaN不能参与计算,也无法与自身比较。

3.什么情况下产生NaN

当Number提供的类型转换方法在解析一个值却无法返回数字时:

Number('echo') //NaN

parseInt('echo123') //NaN
parseInt('123echo') // parseFloat('时间跳跃123.1') //NaN
parseFloat('123.1时间跳跃') //123.1

计算中使用-  /   *运算符,参与计算的值转换类型失败时:

1 - '听风是风' //NaN
1 * '123时间跳跃' //NaN
1 / 'echo123' //NaN

特别注意,两个数字0相除也会得到NaN:

0 / 0 //NaN

4.isNaN方法的含义,如何判断一个值严格等于NaN

window上有一个全局方法isNaN(),可能大分部人习惯理解此方法为判断一个值是等于NaN,这是因为is NaN直译就是“是不是NaN”所带来的误解,其实本意不是这样:

isNaN(123) //false
isNaN('123时间跳跃') //true
isNaN(NaN) //true

当我们向isNaN传递一个参数,它的本意是通过Number()方法尝试转换参数的类型为Number,如果转换成功返回false,否则转返回true,它只是判断这个参数能否转成数字而已,并不是判断是否严格等于NaN

所以当你要判断某个值是否严格等于NaN时无法使用isNaN()方法,毕竟你传递任意字符串它都会返回true。

ES6中提供了一个Number.isNaN()方法用于判断一个值是否严格等于NaN:

Number.isNaN(NaN)//true

与isNaN最大的区别是,Number.isNaN不存在转换类型的行为,这点是最大的不同:

isNaN(NaN) //true
Number.isNaN(NaN) //true isNaN('听风是风') //true
Number.isNaN('听风是风') //false

我们在前面说过,NaN是唯一一个与自身不相等的特殊值,如果你觉得Number.isNaN存在兼容问题,也可以利用这个特点自己定义验证方法:

const ISNAN = (value) => value !== value;
ISNAN('听风是风'); //false
ISNAN(123); //false
ISNAN(NaN); //true

参考资料:

JavaScript中的 NaN 与 isNaN

MDN--NaN

MDN--isNaN

js中的NaN,isNaN与Number.isNaN的区别,如何判断一个值严格等于NaN的更多相关文章

  1. 神马是 NaN,它的类型是神马?怎么测试一个值是否等于 NaN?

    NaN 是 Not a Number 的缩写,JavaScript 的一种特殊数值,其类型是 Number,可以通过 isNaN(param) 来判断一个值是否是 NaN: console.log(i ...

  2. 什么是NaN?它的类型是什么?如何可靠的测试一个值是否等于NaN?

    NaN属性表示"不是数字"的值.这个特殊值是由于一个操作数是非数字的(例如"abc"/4)或者因为操作的结果是非数字而无法执行的. 虽然看起来很简单,但是NaN ...

  3. js中isNaN和Number.isNaN的区别

    isNaN 当我们向isNaN传递一个参数,它的本意是通过Number()方法尝试将这参数转换成Number类型,如果成功返回false,如果失败返回true. 所以isNaN只是判断传入的参数是否能 ...

  4. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  5. js中的text(),html() ,val()的区别

    js中的text(),html() ,val()的区别 text(),html() ,val()三个方法用于html元素的存值和取值,但是他们各有特点,text()用于html元素文本内容的存取,ht ...

  6. js中把字符串转换成number格式方法

    方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有 ...

  7. js中直接调用函数和new函数的区别

    如果函数返回值为常规意义上的值类型(Number.String.Boolean)时,new函数将会返回一个该函数的实例对象,而如果函数返回一个引用类型(Object.Array.Function),则 ...

  8. [置顶] js中如何复制一个对象,如何获取所有属性和属性对应的值

    在js中如何复制一个对象,例如如下一个js对象. 如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢? var obj= ...

  9. js中箭头函数和普通函数this的区别

    最近在学习angularJs的时候由于里面涉及到了箭头函数,箭头函数除了声明上有点区别以外,和普通函数最主要的区别还是在this的问题上. Js中函数中嵌套的函数this不会 “继承”.比如说以下代码 ...

随机推荐

  1. spring+cxf No bean named 'cxf' available

    最近项目中需要用到webservice,在spring中集成cxf时一直报错: 严重: StandardWrapper.Throwable org.springframework.beans.fact ...

  2. R语言实战 第7章

    # 01 描述性统计分析 --------------------------------------------------------------#针对总体的mycavs = mtcars[,c( ...

  3. Java程序远程无法执行nohup命令

    问题的上下文: 由于生产无法使用 jenkins 发布,所以采用 ch.ethz.ssh2 或叫 ganymed-ssh2 的开源 java 的 ssh api 进行远程发布. 在发起重启时,远程执行 ...

  4. WSGI与uWSGI的应用场景与使用方法

    WSGI  /与/  uWSGI 在阿里云上部署项目时,在通信中我们都会用到wsgi与uWSGI,这此我就带大家来了解一下wsgi与uWSGI. 对了,上次有个朋友问我Django的生命周期是什么?我 ...

  5. java之父类中的构造器是否能被子类继承?

    子类默认继承父类的属性和方法,但不会继承父类的构造器,而是在子类被实例化时会默认调用父类的空构造器.子类在创建的时候会调用自己的空构造器,并在空构造器会隐式调用super(),即父类的空构造器.如果父 ...

  6. Json数组(以[ ] 中括号开头)字符串转为json对象

    以 [] 开头的json数组字符串: str = "[{ "姓名":"张三", "年龄":"28" }]&qu ...

  7. go语言的json

    简介 json 中提供的处理 json 的标准包是 encoding/json,主要使用的是以下两个方法: // 序列化 func Marshal(v interface{}) ([]byte, er ...

  8. goroutine,channel

    Go语言中有个概念叫做goroutine, 这类似我们熟知的线程,但是更轻. 以下的程序,我们串行地去执行两次loop函数: package main import "fmt" f ...

  9. 在 Linux 下学习 C 语言有什么好处?

    作者:宅学部落链接:https://www.zhihu.com/question/23893390/answer/832610610来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  10. node-express脚手架生成的项目中实现浏览器缓存

    前言: 最近在做基于 node-express 的个人站点 朵朵视野 ,在站点发布之后自己在访问测试的过程中发现站点是没有缓存机制的,这样就导致每次访问站点都需要重新去加载资源,很消耗资源以及用户体验 ...