数据精度丢失

js数据精度丢失

最近看面试题想到了之前在开发钟遇到过的问题，现总结一下

在开发过程中，发现从后台返回的数据结构中的id字段在前端显示为不正确的值。经过排查，怀疑是JavaScript中Number类型精度丢失的问题。通过将id字段的类型从Number改为String进行测试，确认了问题的根源。尝试在前端获取数据后立即转换为String类型，但发现数据在JavaScript中接收时精度已经丢失，因此最佳解决方案是让后端将id字段的类型改为String。
在开发的时候，后台返回了一个数据结构如下

const list= [{id: 421234567891234567,name: '数据1'},{id: 421234567891234668,name: '数据2'},{id: 421234567891234679,name: '数据3'},{id: 421234567891234697,name: '数据4'}]

<template><button @click="btn">按钮</button>
</template>
<script setup lang="ts">const num: Array<{ id: number, name: string }> = [{id: 421234567891234567,name: '数据1'},{id: 421234567891234668,name: '数据2'},{id: 421234567891234679,name: '数据3'},{id: 421234567891234697,name: '数据4'}]const btn = () => {console.log('num:', num)}
</script>

通过打印发现数据结果如下图

通过图片发现数据和原始数据不一样了

开始怀疑是数据传输过程造成的，换乘postman 测试发现数据正常

最后怀疑是js在Number类型时精度丢失，于是讲数据换乘String类型测试

<template><button @click="btn">按钮</button>
</template>
<script setup lang="ts">const num1: Array<{ id: string, name: string }> = [{id: '421234567891234567',name: '数据1'},{id: '421234567891234668',name: '数据2'},{id: '421234567891234679',name: '数据3'},{id: '421234567891234697',name: '数据4'}]const btn = () => {console.log('num1:', num1)}
</script>

打印结果如下图

发现确实是Number类型时精度丢失，于是让后端将id改成了String类型

后来想前端能不能解决于是就有了一下的一些尝试

前端获取到数据后就转换一下

<template><button @click="btn">按钮</button>
</template>
<script setup lang="ts">
const num: Array<{ id: number, name: string }> = [{id: 421234567891234567,name: '数据1'
}, {id: 421234567891234668,name: '数据2'
}, {id: 421234567891234679,name: '数据3'
}, {id: 421234567891234697,name: '数据4'
}]const btn = () => {const num2 = num.map((item) => {return {...item, id: item.id.toString()}})console.log('num2', num2)
}
</script>

结果发现不行

最后还实验了别的方法都不行，在js拿到数据的那一刻数据的精度就已经丢失了，最好的方法还是后端去转换

js的数据最大精度为2的53次方 也就是最大只能是9007199254740992

js的数据最小精度为2的-53次方 也就是最大只能是-9007199254740992

js数据范围-9007199254740992~9007199254740992