在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. 3、nio中的selector使用

    通过编写一个客户端和服务器端的例子来熟悉selector的使用 服务端逻辑: 1. 绑定一个端口号2. channel注册到selector中3. 用死循环来监听如果有时间发生,遍历selection ...

  2. redis scan命令使用

      以前的项目中有用到redis的keys命令来获取某些key,知道看了这篇文章 https://mp.weixin.qq.com/s/SGOyGGfA6GOzxwD5S91hLw.安全起见,这次打算 ...

  3. Django实现标签联动以及xadmin中实现标签联动

    如图,即实现点击一个城市,出现对应的学校名称.开始一直以为是建立数据表的时候实现的,原来是通过ajax实现的. 思路:当get请求显示原始状态(即下拉框呈现全部内容).当点击一个城市后,通过ajax的 ...

  4. 如何在Python中调用打包好的Jar文件?

    首先是在anaconda中进入我这个项目对应的一个环境,然后在这个环境中下载并且安装jpype.那么就可以直接import了.但是这里出现了一系列的问题 第一个问题,getDefaultJVM()报错 ...

  5. 如何在Mac上使用Netstat命令

    macOS上的netstat命令是一个终端命令,用于显示有关Mac网络通信的详细信息.网络通信包括Mac通过所有端口和所有应用程序与外界进行交流的所有方式.掌握netstat可以帮助您了解计算机之间的 ...

  6. 简单的PHP上传图片实例

    分享一个简单的PHP上传图片实例,本实例主要介绍了上传图片的一些限制判断和上传图片的方法. 首先我们在form表单加上上传附件#file,上传按钮#imgbut,记得给form 表单加上multipa ...

  7. javaWeb核心技术第七篇之HTTP、Tomcat、Servlet、Request和Response

    - Web服务器 - 概念: - web资源: "英文直译"网"的意思 资源:一切数据文件 web资源:通过网络可以访问到的资源,通常指的是一切放在服务器上的文件&quo ...

  8. Servlet小结(面试)

    1.doGet()和doPost()区别/get和post请求方法区别: (1)在form表单中:method  = “get/post”相对应doGet和doPost方法. (2)在http协议中: ...

  9. JS基础语法---函数作为参数使用---回调函数

    1. 函数可以作为参数使用, 如果一个函数作为参数, 那么我们说这个参数(函数)可以叫回调函数 2. 只要是看到一个函数作为参数使用了, 那就是回调函数 function sayHi(fn) { co ...

  10. OpenCV:图像平滑和图像模糊处理

    导包: import numpy as np import cv2 import matplotlib.pyplot as plt def show(image): plt.imshow(image) ...