JavaScript 类型判断中的“怪异”边界与实战技巧

JavaScript 的类型系统和相等比较存在不少不直观的行为： NaN 是唯一一个不等于自身的值；标准的 === 无法区分 +0 和 -0，但 Object.is 可以； typeof null 会错误地返回 "object"，这是早期设计遗留的 Bug； typeof 对数组、日期等所有复杂对象都返回 "object"，需要 Array.isArray 等工具才能精确判断。ES6+ 新增的 Symbol 和 BigInt 又分别对应 "symbol" 和 "bigint"。Vue 的响应式系统中， hasChanged 就依赖 Object.is 来捕获这些边界情况。

本文将深入探讨 JavaScript 类型判断中的各种边界和“怪异”场景，并结合 Vue 2 中的 hasChanged 函数，分析如何在实际工程中应对这些边界问题。

一、基础回顾：JavaScript 类型与比较

1. typeof 操作符

• typeof 返回操作数的数据类型字符串，基本类型包括：
  undefined, boolean, number, string, symbol, bigint, function, object。
• 误区：typeof null === 'object'，历史遗留 Bug，已无法修复。
• 对所有对象（包括数组、Date、Map、Set）均返回 "object"，判断数组推荐使用 Array.isArray。

2. 新增原始类型

• Symbol：调用 Symbol() 返回唯一值，typeof Symbol() === 'symbol'。
• BigInt：表示超出 Number 表示范围的整数，typeof BigInt(123) === 'bigint'。

---

二、相等比较：=== 与 Object.is

1. NaN 的特殊性

• NaN 表示“不是数”，任何对它的比较（==、===）都返回 false。
• 它是唯一不等于自身的值：NaN !== NaN 为 true。
• 检测 NaN 推荐使用 Number.isNaN()，避免类型转换问题。

2. +0 与 -0

• +0 === -0 返回 true，但 Object.is(+0, -0) 返回 false，可用于区分两者。

3. Object.is 语义

• 与 === 相似，但在处理 NaN 和零符号时更“严格”：

  Object.is(NaN, NaN); // true
  Object.is(+0, -0);   // false
  

• 推荐在对等比较有高精度需求时使用 Object.is。

---

三、常见“怪异”边界场景

1. typeof null

console.log(typeof null); // "object"

• 根源：最初实现时以 32 位类型标记为基础，null 被标记为“对象”。

2. 数组与其他对象

console.log(typeof []); // "object"
console.log(Array.isArray([])); // true

• typeof 无法区分数组和普通对象，务必使用 Array.isArray 或 instanceof Array。

3. 原始包装对象

console.log(typeof new String("hi")); // "object"

• String, Number, Boolean 构造函数会产生对象，而非原始值。

4. 函数、正则、日期

• typeof function(){} 返回 "function"；
• typeof /regex/ 返回 "object"；
• typeof new Date() 返回 "object"。

---

四、Vue 2 中的边界处理：hasChanged 示例

Vue 2 中判断数据是否变化时，使用了 Object.is 的 polyfill 实现：

function is(x, y) {
  if (x === y) {
    // 区分 +0 和 -0
    return x !== 0 || 1 / x === 1 / y;
  } else {
    // 判断 NaN
    return x !== x && y !== y;
  }
}

export function hasChanged(value, oldValue) {
  return !is(value, oldValue);
}

• 当新旧值均为 NaN 时，hasChanged 返回 false（视为未变化）；
• 对 +0 和 -0 也能正确识别；
• 引用类型依旧通过 === 判断是否引用变化。

---

五、最佳实践与应对策略

场景	推荐实践
判断 NaN	使用 Number.isNaN()
判断数组	使用 Array.isArray()
判断是否相等（含 NaN、±0）	使用 Object.is()
避免误判 null 类型	value === null
精准判断类型	Object.prototype.toString.call(val)
避免使用	new String() 等包装类型构造器

---

六、总结

• JavaScript 的类型系统中充满边界陷阱，最典型如：NaN !== NaN、+0 !== -0、typeof null === 'object' 等。
• Vue 等框架已在底层处理了这些边界问题，我们在业务层面应复用已有方法。
• 日常开发中推荐使用 Object.is、Array.isArray、Number.isNaN 等专用方法进行判断。
• 类型判断是 JavaScript 稳定系统设计的基石，掌握这些边界是构建健壮应用的第一步。

---

参考文献

• MDN: NaN
• MDN: Object.is
• MDN: typeof
• Stack Overflow: Why is typeof null “object”?
• MDN: Number.isNaN vs isNaN
• MDN: Symbol
• MDN: BigInt
• MDN: Array.isArray
• Vue 2 源码: core/util/lang.js