javascript没有长整型

记录一下前几天踩坑的经历。

背景：一个项目某一版之后很多用easyui的表格控件treegrid渲染的表格都显示不出来了

奇怪的地方主要有以下几点:

1. 项目在测试环境才会这样，在本机能够正常运行，多次重新发布后无果
2. 有很多表格显示不出来，但也有的代码几乎一样的表格却能正常显示数据
3. 重新部署曾经可以正常运行的版本后依然如此

测试环境有问题本地没问题的情况我也是见得不少了，无论如何先F12看看

Uncaught TypeError: Cannot read property 'length' of undefined

观察异常栈，是easyui报的这个错，吐槽一下easyui报的错太不友好。这样很难看出问题，于是我又把测试服务器返回的html与本地服务器返回的html用工具进行比较，结果是只有渲染服务器地址的部分不一样（一个是localhost一个是ip）没看出来任何问题。观察ajax请求的数据，只有数据的id不一样（这是伏笔），id是后台随机生成的用于作表格的唯一标识符，也没有看出来问题。无奈之下，我只有debug到easyui的源码分析原因。

一个小时后。。。

通过对比服务端和本地的代码运行状况，观察差异，找到了报错的原因：id有重复，id重复导致树结构混乱，通过parentId查找父节点时查找到的是错误的父节点。这里再次吐槽一下easyui，您不能先验证一遍id有没有重复，有提示一下不好吗？无论如何，我找到了报错原因，那么接下来问题来了：为什么id会有重复？

System.nanoTime()

前面有提到这里是用的是treegrid控件，这里树有三级，后台方法使用System.nanoTime()方法产生一个随机数作为id设置给第二，三级树节点。这个方法返回的是Long值

现在一切都可以解释了。

1.项目在测试环境才会这样，在本机能够正常运行，多次重新发布后无果

System.nanoTime()产生的id会因为环境而有差异，在本地产生的id可能并未达到浮点数精度丢失的范围，而服务端产生的id超过了，导致了精度丢失，不一样的长整型由js处理后转换成浮点数后得到的结果是一样的，10000000000000000和10000000000000001得到的结果是一样的，从而导致了id重复

2.有很多表格显示不出来，但也有的代码几乎一样的表格却能正常显示数据

这一点是数据的问题，表格本身几乎一样但数据不一样，显示出数据的表格没有第三级节点，而报错的表格有，一二级节点因为是父节点所以都有children属性,easyui的treegrid根据此属性形成树结构，而第三级节点没有children属性因为它根本没有子节点，从而导致报错Uncaught TypeError: Cannot read property 'length' of undefined

3.重新部署曾经可以正常运行的版本后依然如此

因为相关代码并没有变动，这是一个地雷，早早埋下而不知何时会爆炸的地雷。

根本原因为后台返回的Long类型数据由js处理后可能导致精度丢失。最后解决方案非常简单，把long转换成int就一切解决了。由此得出教训，后台返回给js的数据不要使用Long类型。

参见：

What is JavaScript's highest integer value that a number can go to without losing precision?