在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. 提速企业应用开发,Ntaub 3极速开发平台发布

    企业管理系统搞了这么多年,还是以表单.数据增删改这些功能为主.唯一的变化就是“变化”,企业的业务模式和流程越来越多样化,开发需求变更越来越频繁,开发周期却要求越来越短. 无代码.低代码开发平台开始流行 ...

  2. 抖音短视频教程VIP培训课程(2019实时更新中)

    抖音联盟,抖友会,抖音联盟会员,抖音联盟学员,抖音批量做号团队,工作室带队,联盟学员统一官网认证可查,统一变现渠道担保,成熟技术技术后盾,实时工作室真机实测规则,抖音情感励志书单模式2.0升级,拒绝落 ...

  3. MySQL创建、修改、删除数据库

    创建数据库 CREATE DATABASE [IF NOT EXISTS] t1 CHARACTER SET [=] utf8: 中括号中的代码可有可无:CHARATER如果不写则创建为默认的字符. ...

  4. [Go] golang定时器的使用

    golang中的定时器是使用的chanel阻塞来实现的,主要使用到了time包中的内容,如果有多个定时器的channel,为了防止阻塞,可以使用select来获取遍历channel 定时器获取的cha ...

  5. 小程序之--动态设置页面标题 wx.setNavigationBarTitle

    参考地址 http://www.yilingsj.com/xwzj/2018-11-26/weixin-navigationbartitletext.html 页面最初是[在线教研] 可以在这个页面的 ...

  6. JavaScript-----11.预解析

    1.预解析 1.1引子 //1问 console.log(num);//报错 num未定义 //2问 console.log(num); //undefined 未报错 var num = 10; / ...

  7. sql语句复习(基础-提升-技巧-经典数据开发案例-sql server配置)

    1 基础 1.说明:创建数据库 CREATE DATABASE database-name charset=utf8 2.说明:删除数据库 drop database dbname 3.说明:备份sq ...

  8. Java中文本文件的读取(按行读取)

    在之前的学习过程中,经常会遇到将文本文件中的数据读取到数组或其他数据结构中.每次遇到,总是在网上搜索代码解决,解决之后并没有总结复习,因此在下一次遇到同样的问题时,又重复之前的过程.这样周而复始,并没 ...

  9. [译]Vulkan教程(08)逻辑设备和队列

    [译]Vulkan教程(08)逻辑设备和队列 Introduction 入门 After selecting a physical device to use we need to set up a  ...

  10. python __getattr__和 __getattribute__

    __getattr__ 这个魔法函数会在类中查找不到属性时调用 class User: def __init__(self): self.info = 1 def __getattr__(self, ...