NaN 不等于 NaN引发的血案，以及一场自救之旅

2024-01-18 18:01:29

在 JavaScript 中，NaN（Not a Number）是一个表示非数字值的特殊值。它是一个独特的浮点数，它的特点是与自身不相等。然而，在一些情况下，NaN 可能会表现得像一个数字，比如参与算术运算。这可能会导致一些令人惊讶和难以调试的错误。

本文将探讨一个由 NaN 不等于 NaN 引发的真实案例，并分享我们如何定位和解决这个问题的经验。此外，我们还将探讨第三方依赖项中 bug 的临时解决方法，以及我们对 miniprogram-computed 库的实现原理和源代码的见解。

定位问题

我们遇到的问题出现在一个使用第三方依赖库 miniprogram-computed 的小程序中。miniprogram-computed 是一个用于计算小程序数据响应式变化的库。当我们使用该库时，我们发现当涉及到 NaN 值时，它会产生意外的结果。

具体来说，问题发生在以下代码段中：

const computed = miniprogram-computed(() => {
  if (isNaN(value)) {
    return 0;
  }
  return value + 1;
});

这段代码定义了一个计算属性，如果 value 是 NaN，则返回 0，否则返回 value 加 1。然而，当我们运行此代码时，我们发现即使 value 是 NaN，也会返回 value 加 1。

为了解决这个问题，我们必须在使用 miniprogram-computed 库之前修复第三方依赖项中的 bug。我们发现，问题出在 miniprogram-computed 库中 isNaN() 函数的实现上。该函数没有正确处理 NaN 值，导致在某些情况下将 NaN 视为数字。

我们通过覆盖 isNaN() 函数来临时解决此问题，如下所示：

const originalIsNaN = isNaN;
isNaN = (value) => {
  if (value === NaN) {
    return true;
  }
  return originalIsNaN(value);
};

这个临时解决方法覆盖了原始的 isNaN() 函数，并添加了对 NaN 值的特殊处理。现在，当我们运行上述代码段时，如果 value 是 NaN，它将正确地返回 0。

为了更深入地了解这个问题，我们研究了 miniprogram-computed 库的实现原理和源代码。我们发现，该库使用 Proxy 对象来拦截数据的访问和修改。当数据发生变化时，Proxy 对象会触发更新过程，从而更新依赖于该数据的计算属性。

我们还发现，在 miniprogram-computed 库中，isNaN() 函数用于检查数据值是否为 NaN。然而，该函数的实现没有正确处理 NaN 值，导致在某些情况下将 NaN 视为数字。

通过这个案例，我们了解了 NaN 不等于 NaN 这一特性可能导致的意外行为。我们还展示了如何定位和解决第三方依赖项中的 bug，以及如何临时解决这些 bug。此外，我们还研究了 miniprogram-computed 库的实现原理和源代码，这使我们能够更深入地了解其工作原理和局限性。

在开发过程中，重要的是要意识到潜在的陷阱和限制，例如 NaN 的行为和第三方依赖项的质量。通过仔细的测试和对所使用库的深入了解，我们可以避免意外的行为并构建健壮且可靠的应用程序。

具体来说，问题发生在以下代码段中：

const computed = miniprogram-computed(() => {
  if (isNaN(value)) {
    return 0;
  }
  return value + 1;
});

我们通过覆盖 isNaN() 函数来临时解决此问题，如下所示：

const originalIsNaN = isNaN;
isNaN = (value) => {
  if (value === NaN) {
    return true;
  }
  return originalIsNaN(value);
};

这个临时解决方法覆盖了原始的 isNaN() 函数，并添加了对 NaN 值的特殊处理。现在，当我们运行上述代码段时，如果 value 是 NaN，它将正确地返回 0。

探索Web开发资源和人工智能教程的代码社区

扫码关注微信公众号