js includes函数为何对NaN判断失效？

Question

在JavaScript中，`includes()` 方法用于判断数组是否包含某个值，其底层使用“严格相等”（`===`）进行比较。然而，当涉及 `NaN` 时，`includes()` 会失效，原因在于 `NaN !== NaN` —— 这是IEEE 754标准定义的特性，即 `NaN` 与任何值（包括自身）都不严格相等。因此，即使数组中包含 `NaN`，调用 `arr.includes(NaN)` 理论上应返回 `true`，但因比较机制依赖 `===`，导致无法正确识别。这暴露了 `includes()` 在处理特殊值时的局限性，开发者需借助 `Number.isNaN()` 或 `indexOf()`（同样受限）等替代方案进行判断，凸显了理解语言底层行为的重要性。

Answer 1

1. JavaScript中 includes() 方法的基本行为

includes() 是数组实例上的一个方法，用于判断数组是否包含某个指定值。它返回一个布尔值：true 表示存在，false 表示不存在。

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

该方法底层使用“严格相等”（===）进行比较，这意味着类型和值都必须完全匹配。

2. 严格相等与特殊值 NaN

在JavaScript中，NaN（Not-a-Number）是一个特殊的数值，表示非数字的无效计算结果。根据IEEE 754浮点数标准，NaN 不等于任何值，包括它自身：

console.log(NaN === NaN); // false
console.log(NaN == NaN);  // false

这一特性直接影响了依赖严格相等的数组方法，如 includes() 和 indexOf()。

3. includes() 在处理 NaN 时的异常表现

尽管数组中确实包含 NaN，但由于其内部使用 === 比较，导致无法正确识别：

const arrWithNaN = [1, NaN, 3];
console.log(arrWithNaN.includes(NaN)); // true？ 实际上是：true！

令人惊讶的是，includes() 实际上能正确识别 NaN。这与直觉相反，因为它是少数几个对 NaN 做了特殊处理的方法之一。

方法	能否检测 NaN	原因
includes()	✅ 可以	内部使用了额外逻辑处理 NaN
indexOf()	❌ 不可以	仅依赖 ===，NaN !== NaN
findIndex()	✅ 可以（配合 isNaN）	可自定义判断逻辑

4. 深入源码：为何 includes() 能识别 NaN？

虽然规范基于严格相等，但ECMAScript标准为 Array.prototype.includes 引入了一个特殊机制：当当前元素和搜索值都是 NaN 时，返回 true。

1. 遍历数组每个元素
2. 若元素与目标值满足 ===，返回 true
3. 否则，检查两者是否均为 NaN（通过 IsNaN(value) 抽象操作）
4. 若是，则返回 true
5. 继续下一个元素

5. 对比其他常用查找方法的行为差异

不同方法在处理 NaN 时表现出显著差异：

const arr = [NaN, 1, 2];

console.log(arr.includes(NaN));     // true ✅
console.log(arr.indexOf(NaN));      // -1 ❌
console.log(arr.findIndex(x => x !== x)); // 0 ✅ (x !== x 是检测 NaN 的技巧)
console.log(arr.some(Number.isNaN)); // true ✅

6. 替代方案与最佳实践

为了更稳健地处理 NaN 判断，推荐以下策略：

• 使用 Number.isNaN() 进行精确判断
• 结合 some() 或 find() 实现灵活查找
• 避免依赖 indexOf() 检测 NaN

7. 流程图：判断数组是否包含 NaN 的决策路径

graph TD
    A[开始] --> B{使用 includes(NaN)?}
    B -- 是 --> C[返回 true]
    B -- 否 --> D{是否需兼容旧环境?}
    D -- 是 --> E[使用 some(Number.isNaN)]
    D -- 否 --> F[使用 findIndex(x => x !== x)]
    E --> G[结束]
    F --> G

8. 扩展思考：语言设计中的权衡

includes() 对 NaN 的特殊支持体现了JavaScript在实用性与一致性之间的平衡。尽管违反了“完全基于 ===”的直观预期，但它提升了开发者体验。类似的例外还包括 Object.is() 提供了更精确的相等判断，能够区分 +0 和 -0，并认为 NaN === NaN。

console.log(Object.is(NaN, NaN)); // true

9. 实际应用场景分析

在数据清洗、科学计算或用户输入解析中，NaN 是常见问题。例如，在处理CSV导入的数值字段时：

function hasInvalidNumbers(data) {
  return data.some(item => Number.isNaN(item));
}

这种模式比依赖 includes(NaN) 更清晰且语义明确。

10. 总结性对比表：各方法对 NaN 的处理能力

方法	语法示例	返回类型	支持 NaN?	备注
includes()	arr.includes(NaN)	boolean	✅	唯一内置支持 NaN 的查找方法
indexOf()	arr.indexOf(NaN)	number	❌	永远返回 -1
some()	arr.some(Number.isNaN)	boolean	✅	推荐方式，语义清晰
findIndex()	arr.findIndex(x => x !== x)	number	✅	利用 NaN ≠ itself 特性
filter()	arr.filter(Number.isNaN).length > 0	boolean (间接)	✅	性能较低，适用于提取场景