你真的知道 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为好!

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

相关推荐
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景10 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui