你真的知道 Number.isNaN 和 isNaN 的区别嘛?

前言

本文和大家分享一个前几天写代码踩的坑,笔者在业务逻辑中需要对一个值进行 NaN 的判断,由于笔者的不严谨,使用了isNaN,从而引起了Bug,也正是因为这个,笔者才知道了 isNaNNumber.isNaN 的区别,如果你认为这俩没区别,觉得 isNaN 是历史遗留的全局变量,后面又加到 Number 上的话,建议你接着往下看。如果你知道他们的区别,可以划走了。👻

笔者将从以下两个方面来描述这个知识点:

  1. 什么是NaN
  2. isNaNNumber.isNaN 的区别是什么。

什么是NaN

JS 中的 NaN,是 Not a Number 的缩写,代表一个值 或者 一个表达式的值 不是一个数字。它有以下几个特点:

  1. 不等于任何其他值,包括它本身。这意味着 NaN 与任何值的比较都会返回false,包括 NaN 本身。
  2. 它是全局作用域中的一个变量。
  3. Number.NaNNaN 是同一个东西,有相同的特性,只不过一个是全局变量;一个是 Number 上的属性。但是它俩也不能划等号,毕竟 NaN 自己都不等于自己。
  4. NaN 涉及数学运算,通常情况下都会返回 NaN,但是还有例外,看下图:
  5. NaN 涉及关系比较(>, <, >=, <=)时,都返回false

什么情况下会得到NaN呢?

  1. 显式将非 NumBer 类型转为 Number 类型,比如 Number('aaa')
  2. 在调用一些需要数字类型参数的 API 时,可能 API 内部会做转换,一旦无法转为数字,可能就返回了 NaN,比如 Math.abs('aaa')
  3. 等等......

那在平时开发中,为了保证我们写的代码逻辑运行正常,就可能需要对 NaN 判断,接下来我们就来看下判断 NaN 的两个 API 有啥不同。

isNaNNumber.isNaN 的区别

首先,这俩 API 都能够用于判断 NaN,这一点从 API 的名字就能看出,然后各位看图总结不同的地方:

不同点:

  • Number.isNaN 是直接拿参数与 NaN 去比,也就是说,你一定要传 NaN 进去才返回 true。至于怎么比的,咱也不知道,反正不是 ===,因为 NaN 的特性------自己不等于自己
  • isNaN 会先尝试将参数转换成数字,如果可以转换成数字,则返回 false;否则返回true

咱们不妨来讨论一下,Number.isNaN内部的实现,肯定不是:

js 复制代码
Number.isNaN = (target) => target === NaN  // 自己不等于自己

我猜可能是:

js 复制代码
// 因为只有传 `NaN` 进去才返回 `true`,而 NaN 是 Number 类型
// 再加上 `NaN + '' === 'NaN'`
// 也许是对的
Number.isNaN = (target) => Object.prototype.toString.call(target) === '[object Number]' && target+'' === 'NaN'

总结

本文主要内容为:

  1. NaN 的特性
  2. isNaNNumber.isNaN 的区别,一句话总结:Number.isNaN只有传 NaN 进去才返回 trueisNaNNaN 或者不能转化为 Number 的都会返回 true

以后咱们还是不要使用isNaN为好!

如果本文对你有一点点帮助,点个赞支持一下吧,你的每一个【】都是我创作的最大动力 ^_^

相关推荐
DanB2420 分钟前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
浮生带你学Java9 小时前
2025Java面试题及答案整理( 2025年 7 月最新版,持续更新)
java·开发语言·数据库·面试·职场和发展
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~10 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安11 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202011 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css