10 number 超出值域导致的相关问题

前言

呵呵最近同事碰到了这样的一个问题

接口返回列表信息给前端页面, 然后前端页面点击按钮去操作列表记录, 然后交互给后端服务之后, 发现记录不存在

呵呵最开始我们一直怀疑的是后端接口返回来的列表中的 id 存在问题

然后但是最终发现问题居然是 js 里面 number 类型的值域问题, 导致变量出现了一些数据偏差

测试用例

如下测试用例, num 为 1484344536143634433, 最终转换为之后为 1484344536143634400

因此在实际的业务场景中出现了问题

其他的是一些测试case, 不多介绍

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>测试</title>
  <script src="../js/jquery.min.js" type="text/javascript"></script>

</head>
<body>

<script type="text/javascript">
  const num = 1484344536143634433
  console.log(num)
  console.log(typeof(num))
  console.log(isFinite(num))
  const num2 = 14843445361436343
  console.log(num2)
  const num3 = 14843445361436342.3
  console.log(typeof(num3))
  console.log(num3)
  const num4 = 1486342.3
  console.log(typeof(num4))
  console.log(num4)
  const num5 = 1484344536143634.3
  console.log(typeof(num5))
  console.log(num5)

  const num6 = 1484344536143634433
  console.log(num === num6)
  // Number.MAX_VALUE
  const num7 = 9007199254740992
  console.log(num7)
  const num8 = 9007199254740993
  console.log(num8)
</script>

</body>
</html>

完

0 条评论