![2ee374248a6b5549fb550f7d70bfe7e7.png](https://i-blog.csdnimg.cn/blog_migrate/b4817ee946970f4ba4fc8cf6c09e60ad.jpeg)
大家好,我来了,本期为大家带来的前端开发知识是”Web前端:JavaScript中的NaN是什么?“,有兴趣做前端的朋友,一起来看看吧!
JavaScript中的数字类型包含整数和浮点数:
![cebff8bdfab7a74a1ecd13ccc38e813e.png](https://i-blog.csdnimg.cn/blog_migrate/069f8a65ce57506132de564e48745d81.png)
另外,还有2个特殊数字值:(Infinity
大于任何其他数字的数字)和NaN
(表示“非数字”概念):
![e1824d3b0658e469d29e2bf7a9f508e1.png](https://i-blog.csdnimg.cn/blog_migrate/f5097c8e29a09d2f93c7438cff509f89.png)
虽然直接使用的NaN
情况很少见,但在对数字进行失败的操作后却会令人惊讶地出现。
让我们仔细看一下NaN
特殊值:如何检查变量是否具有NaN
,并重要地了解创建“非数字”值的方案。
1. NaN号
JavaScript中的数字类型是所有数字值的集合,包括“非数字”,正无穷大和负无穷大。
可以使用特殊表达式NaN
或作为全局对象或Number
函数的属性来访问“非数字” :
![4b7b1e2d41763c45ccfa310d104e8421.png](https://i-blog.csdnimg.cn/blog_migrate/3635a1b3e654303c5d5bade7c3a1acdc.png)
尽管具有数字类型,但“非数字”是不代表实数的值。NaN
对于表示数字上的错误操作很有用。
例如,将数字与相乘undefined
不是有效运算,因此结果为NaN
:
![24cd246755bfc4c2812691fc8a5ca439.png](https://i-blog.csdnimg.cn/blog_migrate/cc43ed51d2a084d8c20a82e86c4f7b0b.png)
也尝试解析无效的数字字符串,例如'Joker'
导致NaN
:
![68f41969d3a03fab0bb05f0bd3d054ae.png](https://i-blog.csdnimg.cn/blog_migrate/73227a3681b84a62d5cab98d7cc7bc10.png)
第3.节“导致NaN的操作”详细信息会生成NaN
。
2.检查与NaN的相等性
的有趣特性NaN
是,即使它本身也不等于任何值NaN
:
![c6061ef96cc10c3ba0900c7b62b01afc.png](https://i-blog.csdnimg.cn/blog_migrate/ebd5718cbc46b86e44ab17a052ae3912.png)
此行为对于检测变量是否为有用NaN
:
![e2ee678356781609a666634c82087d40.png](https://i-blog.csdnimg.cn/blog_migrate/2ce8cd4fa519e8142f302f096c25c567.png)
someNumber !== someNumber
表达式true
仅当someNumber
为时NaN
。因此,以上代码片段将记录到控制台"Is NaN"
。
JavaScript具有内置功能来检测NaN
:isNaN()
和Number.isNaN()
:
![79294d181fca240964db7f94ede4e9e1.png](https://i-blog.csdnimg.cn/blog_migrate/0698c60a7ebd67e30b5f3adb807a6c21.png)
这些函数之间的区别在于Number.isNaN()
不会将其参数转换为数字:
![ecaa682d282680dbe0f7537308afd8ad.png](https://i-blog.csdnimg.cn/blog_migrate/9fd4a1a5c8a8f2695785ed3d7796026d.png)
isNaN('Joker12')
将参数'Joker12'
转换为数字NaN
。因此函数返回true
。
另一方面,Number.isNaN('Joker12')
检查参数是否为而不进行转换NaN
。该函数返回,false
因为'Joker12'
不相等NaN
。
3.产生NaN的运算
3.1解析数字
在JavaScript中,您可以将数字字符串转换为数字。
例如,您可以轻松地将'1.5'
字符串转换为1.5
浮点数:
![434230aff3a835f33c57e07749a20579.png](https://i-blog.csdnimg.cn/blog_migrate/e7e0600ce6216004c89c5bd86fb7c658.png)
当字符串不能转换为数字时,解析函数返回NaN
:表示解析失败。这里有些例子:
![854eb123b7ca8215bcad704aaafc723f.png](https://i-blog.csdnimg.cn/blog_migrate/c4900f0db8ac9b281c8b42c751eb0ca1.png)
解析数字时,最好验证一下解析结果是否为NaN
:
![3cc9ce56f97292b69628ea0dd1b8a36f.png](https://i-blog.csdnimg.cn/blog_migrate/20e182c8087832ec9fc3888865fb935f.png)
的解析inputToParse
失败,因此parseInt(inputToParse, 10)
返回NaN
。条件if (isNaN(number))
是true
,并且number
分配给0
。
3.2 未定义为操作数
undefined
在加法,乘法等算术运算中用作操作数的结果NaN
。
例如:
![d3ac9557018ae27fa4edc70d144aa20b.png](https://i-blog.csdnimg.cn/blog_migrate/9ae44d42fd1c0f1c76e34fb316f84540.png)
getFontSize()
是fontSize
从样式对象访问属性的函数。调用时getFontSize({ size: 16 })
,结果为undefined
(对象fontSize
中不存在{ size: 16 }
属性)。
fontSize * 2
被评估为undefined * 2
,结果为NaN
。
undefined
在算术运算中将缺少的属性或返回的函数用作值时,将生成“非数字” 。
确保undefined
不会达到算术运算是防止的好方法NaN
。随时检查“ 7个未在JavaScript中处理的提示”。
3.3 NaN作为操作数
NaN
当非整数操作中的操作数为时,也会生成值NaN
:
![2ca2e1e7c410c92b3f997facef16908e.png](https://i-blog.csdnimg.cn/blog_migrate/5928409c7c23bede3198f886dd96b1b4.png)
NaN
分布在算术运算中:
![651ed7cf9065d0ffc5fa5834d92ff89e.png](https://i-blog.csdnimg.cn/blog_migrate/5b33ec018155cb7d58210f5b6bd30515.png)
result
将invalidNumber
值(具有NaN
)附加到后,对变量的操作会中断 result
。
3.4不确定形式
NaN
算术运算采用不确定形式时,将创建值。
分工0 / 0
和Inifinity / Infinity
:
![3d1a1d289dad4588c55cab080e28b2dc.png](https://i-blog.csdnimg.cn/blog_migrate/0dabf0a1c5b9474e8efb316597a7b122.png)
的乘法0
和Infinity
:
![27a46da1df5a437500c33544931546b6.png](https://i-blog.csdnimg.cn/blog_migrate/263848ebc3d033f8130dab9ba54b7f06.png)
无限数量的不同符号的加法:
![8edb79f4f0226ee03b992bf3661eb3df.png](https://i-blog.csdnimg.cn/blog_migrate/25858e2db27f7b13734d5c6493e4e4ba.png)
3.5数学函数的无效参数
负数的平方根:
![da8648e86f32bc3e386b85adb492a33d.png](https://i-blog.csdnimg.cn/blog_migrate/78d279d9702fc8306d8d8d5eda196ebd.png)
或负数的对数:
![00688fe98415b05a7964ca4d3f1b78e8.png](https://i-blog.csdnimg.cn/blog_migrate/55217b037e150634ce7d361d9d0c134e.png)
4。结论
用JavaScript用表示的“非数字”概念NaN
对于表示数字上的错误操作很有用。
NaN
不等于任何值,即使是NaN
本身也不等于。建议使用检查变量是否包含NaN
的方法Number.isNaN(value)
。
将数字字符串转换为数字失败时,可能会导致显示“非数字”。这是一个好主意,检查是否parseInt()
,parseFloat()
或Number()
不返回NaN
。
undefined
或NaN
作为算术运算中的操作数通常会导致NaN
。正确处理undefined
(为缺少的属性提供默认值)是防止这种情况的好方法。
数学函数的不确定形式或无效参数也会导致“ Not A Number”。但是这些情况很少发生。
这是我的务实建议:“知道NaN
吗?搜索undefined
!”
原著作者:德米特里·帕夫鲁汀
文章来源:国外
原著链接:
Dmitri Pavlutin Blogdmitripavlutin.com![ce289af553a4a10d2cfdd1776dcca53c.png](https://i-blog.csdnimg.cn/blog_migrate/b3e86c2acd2a4c1f3dfa97f2559f8935.jpeg)
PS:原著文章内容为英文版本,建议使用360极速浏览器进行翻译阅读。