各位老铁，大家好！我是今天的主讲人，咱们今天聊聊 JavaScript 里一个挺有意思的家伙——NaN。别看它名字短小精悍，脾气可是相当古怪，能把不少新手甚至老手都给绕晕。今天咱们就来扒一扒 NaN 的底裤，看看它到底是个什么玩意儿，以及它那些让人哭笑不得的特性。
开场：NaN 是个啥？
首先，咱们得明确一点：NaN 全称是 "Not a Number"，意思就是“不是一个数字”。注意，它虽然说自己“不是一个数字”，但它实际上是 JavaScript 里的一个数值类型的值。是不是有点懵？别急，听我慢慢道来。
NaN 通常会在以下几种情况下出现：
- 数学运算失败： 比如
0/0,Infinity - Infinity,Math.sqrt(-1)（负数开平方根）。 - 类型转换失败： 尝试将无法转换为数字的字符串转换为数字时，比如
parseInt("hello")。 - 涉及
NaN的运算： 任何与NaN进行的数学运算结果都是NaN。这个特性很重要，后面我们会详细说。
NaN 的第一个坑：typeof NaN
好了，现在我们知道 NaN “不是一个数字”，但是它又属于数值类型。那 typeof NaN 的结果是什么呢？
console.log(typeof NaN); // 输出 "number"没错，就是 "number"。 是不是很讽刺？ NaN 明明说自己不是数字，但 typeof 却说它是数字类型。 这就像一个人跟你说：“我不是好人”，然后你问他：“你是啥？”，他说：“我是人！”。
NaN 的第二个坑：NaN == NaN
接下来是重头戏，也是 NaN 最让人摸不着头脑的地方：NaN 不等于任何值，包括它自己。
console.log(NaN == NaN); // 输出 false
console.log(NaN === NaN); // 输出 false这简直是颠覆了我们的认知！在数学里，任何数都等于它自己，但在 JavaScript 里，NaN 偏偏不认这个理。这就像一个人跟你说：“我不认识任何人”，然后你问他：“那你认识自己吗？”，他说：“我不认识我自己！”。
为什么会这样呢？ 因为 NaN 表示的是一个无效数值，而不是一个特定的值。 不同的无效数值可能是由于不同的错误导致的，所以它们不能被认为是相等的。 比如说， 0/0 和 Math.sqrt(-1) 都会产生 NaN，但它们的意义完全不同。
如何判断一个值是否是 NaN？
既然 NaN 不等于它自己，那我们该如何判断一个值是否是 NaN 呢？
-
使用
isNaN()函数：这是最常用的方法。
isNaN()函数会尝试将传入的值转换为数字。 如果转换成功，则返回false；如果转换失败，则返回true。console.log(isNaN(NaN)); // 输出 true console.log(isNaN("hello")); // 输出 true (因为 "hello" 无法转换为数字) console.log(isNaN(123)); // 输出 false console.log(isNaN("123")); // 输出 false (因为 "123" 可以转换为数字)需要注意的是，
isNaN()函数有一个坑：它会先尝试将传入的值转换为数字，如果转换失败，才会返回true。 这就导致一些非数字的值，比如字符串"hello"，也会被isNaN()判断为NaN。 -
使用
Number.isNaN()函数：Number.isNaN()是 ES6 引入的新方法，它解决了isNaN()函数的缺陷。Number.isNaN()函数只有在传入的值本身就是NaN类型时，才会返回true。 不会进行类型转换。console.log(Number.isNaN(NaN)); // 输出 true console.log(Number.isNaN("hello")); // 输出 false console.log(Number.isNaN(123)); // 输出 false console.log(Number.isNaN("123")); // 输出 false所以，推荐使用
Number.isNaN()函数来判断一个值是否是NaN。 -
利用
NaN不等于自身的特性：虽然不推荐，但你也可以利用
NaN不等于自身的特性来判断：function isReallyNaN(x) { return x !== x; } console.log(isReallyNaN(NaN)); // 输出 true console.log(isReallyNaN("hello")); // 输出 false console.log(isReallyNaN(123)); // 输出 false这种方法看起来很酷，但可读性较差，不建议在实际项目中使用。
NaN 的传染性：任何涉及 NaN 的运算结果都是 NaN
NaN 还有一个很重要的特性：它具有传染性。 也就是说，任何与 NaN 进行的数学运算，结果都会是 NaN。
console.log(NaN + 1); // 输出 NaN
console.log(NaN * 2); // 输出 NaN
console.log(NaN / 3); // 输出 NaN
console.log(Math.pow(NaN, 2)); // 输出 NaN这个特性在处理复杂运算时需要特别注意。 如果你的代码中出现了 NaN，很可能意味着你的某个环节出错了。 你需要仔细检查你的数据和运算逻辑，找到 NaN 的源头。
NaN 在实际开发中的应用场景
虽然 NaN 看起来很讨厌，但在实际开发中，它也有一些应用场景：
-
数据校验：
可以使用
Number.isNaN()函数来校验用户输入的数据是否合法。 例如，如果用户输入的是一个非数字的字符串，你可以将其转换为数字，然后使用Number.isNaN()判断结果是否为NaN。function validateInput(input) { const num = Number(input); if (Number.isNaN(num)) { console.log("输入无效，请输入数字！"); return false; } return true; } validateInput("hello"); // 输出 "输入无效，请输入数字！" validateInput("123"); // 返回 true -
错误处理：
NaN可以作为一种错误标志，表示某个运算或转换失败。 你可以在代码中检查NaN的出现，并进行相应的错误处理。function calculate(a, b) { const result = a / b; if (Number.isNaN(result)) { console.log("除数不能为 0！"); return null; // 或者抛出一个异常 } return result; } calculate(10, 0); // 输出 "除数不能为 0！"，返回 null calculate(10, 2); // 返回 5 -
数据清洗：
在处理大量数据时，可能会出现一些无效值。 你可以使用
Number.isNaN()函数将这些无效值替换为0或其他默认值。const data = [1, 2, NaN, 4, NaN, 6]; const cleanedData = data.map(value => Number.isNaN(value) ? 0 : value); console.log(cleanedData); // 输出 [1, 2, 0, 4, 0, 6]
总结：NaN 的特性一览
为了方便大家记忆，我把 NaN 的特性总结成一个表格：
| 特性 | 描述 |
|---|---|
| 名称 | Not a Number（不是一个数字） |
| 类型 | number |
| 相等性 | NaN == NaN 和 NaN === NaN 都返回 false |
| 判断方法 | 推荐使用 Number.isNaN() 函数。 isNaN() 会先尝试类型转换，可能导致误判。 |
| 传染性 | 任何涉及 NaN 的数学运算结果都是 NaN |
| 出现场景 | 数学运算失败、类型转换失败、涉及 NaN 的运算 |
| 实际应用 | 数据校验、错误处理、数据清洗 |
避坑指南
- 尽量避免出现
NaN： 在编写代码时，要仔细检查数据和运算逻辑，避免出现可能导致NaN的情况。 - 使用
Number.isNaN()函数进行判断： 避免使用isNaN()函数，因为它可能会产生误判。 - 注意
NaN的传染性： 如果你的代码中出现了NaN，要仔细检查之前的运算环节，找到NaN的源头。 - 不要使用
==或===来判断一个值是否是NaN： 永远使用Number.isNaN()函数。 - 了解
NaN的应用场景：NaN并非一无是处，它可以用于数据校验、错误处理和数据清洗。
总结：
NaN 是 JavaScript 里一个比较特殊的家伙，它的特性比较反直觉，容易让人困惑。 但只要你理解了它的本质和特性，掌握了正确的判断方法，就能轻松驾驭它，避免掉入它的陷阱。 记住，NaN 不是一个具体的数值，而是一个无效数值的标志。 理解这一点，就能更好地理解 NaN 的各种古怪行为了。
今天的分享就到这里，希望大家以后再遇到 NaN 的时候，能够胸有成竹，从容应对！ 咱们下次再见！