数据精度丢失

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/47133.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

快手开源LivePortrait,实现表情姿态极速迁移,GitHub 6.5K Star

近日&#xff0c;快手可灵大模型团队开源了名为LivePortrait的可控人像视频生成框架&#xff0c;能够准确、实时地将驱动视频的表情、姿态迁移到静态或动态人像视频上&#xff0c;生成极具表现力的视频结果。如下动图所示&#xff1a; 来自网友测试LivePortrait 来自网友测试Li…

2.I/O口

I/O输出(点灯) 分析电路 看电路图&#xff0c;元器件形成电压差&#xff0c;即可点亮LED灯 代码编写 使用不同操作进行LED控制 #include "reg52.h" //51单片机头文件 #include <intrins.h> sbit LED1 P1^0; //引脚初始化&#xff1a;P1^0&#xff1a;对应引脚…

<Rust>egui部件学习:如何在窗口及部件显示中文字符?

前言 本专栏是关于Rust的GUI库egui的部件讲解及应用实例分析&#xff0c;主要讲解egui的源代码、部件属性、如何应用。 环境配置 系统&#xff1a;windows 平台&#xff1a;visual studio code 语言&#xff1a;rust 库&#xff1a;egui、eframe 概述 本文是本专栏的第一篇博…

应用实践之基于MobileNetv2的垃圾分类

MobileNetv2模型原理介绍 前言 MobileNet是2017年由Google团队提出的轻量级CNN网络&#xff0c;专注于移动端、嵌入式或IoT设备。它使用深度可分离卷积的思想来减小模型参数与运算量&#xff0c;同时引入宽度系数和分辨率系数以满足不同应用场景的需求。MobileNetV2则采用倒残…

STM32智能交通灯系统教程

目录 引言环境准备智能交通灯系统基础代码实现&#xff1a;实现智能交通灯系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;交通管理与优化问题解决方案与优化收尾与总结 1. 引言 智能交通灯系统通过STM…

Hadoop3:HDFS-存储优化之纠删码

一、集群环境 集群一共5个节点&#xff0c;102/103/104/105/106 二、纠删码原理 1、简介 HDFS默认情况下&#xff0c;一个文件有3个副本&#xff0c;这样提高了数据的可靠性&#xff0c;但也带来了2倍的冗余开销。Hadoop3.x引入了纠删码&#xff0c;采用计算的方式&#x…

【Python实战因果推断】37_双重差分8

目录 Diff-in-Diff with Covariates Diff-in-Diff with Covariates 您需要学习的 DID 的另一个变量是如何在模型中包含干预前协变量。这在您怀疑平行趋势不成立&#xff0c;但条件平行趋势成立的情况下非常有用&#xff1a; 考虑这种情况&#xff1a;您拥有与之前相同的营销数…

c语言唯一一个三目运算符

条件表达式由两个符号&#xff08;&#xff1f;和&#xff1a;&#xff09;组成&#xff0c;必须一起使用。要求有三个操作对象&#xff0c;称为三目运算符。 一般形式为 表达式1&#xff1f;表达式2&#xff1a;表达式3 理解如下&#xff1a; a>b?(maxa):(maxb); //相当…

Apache trino的ldap认证开启

作者&#xff1a;櫰木 1、背景 由于trino 默认没有开启用户认证体系&#xff0c;需要ldap用户进行认证。开启tls和ldap用户认证&#xff0c;提高安全性。 2、配置 前置条件。 trino 集群已经部署完成 ldap 服务 openjdk 版本大于11.0.17 生成证书 keytool -genkeypair…

【动态规划1】斐波那契数列模型篇

文章目录 声明动态规划介绍1137.第N个泰波那契数题目描述分析代码 面试题 08.01. 三步问题题目描述分析代码 746.使用最小花费爬楼梯题目描述分析代码 91.解码⽅法题目描述分析代码 声明 本篇博客为动态规的基础篇&#xff0c;从零开始学习动态规划&#xff0c;如有错误&#…

AGI 之 【Hugging Face】 的【问答系统】的 [评估并改进问答Pipeline] / [ 生成式问答 ] 的简单整理

AGI 之 【Hugging Face】 的【问答系统】的 [评估并改进问答Pipeline] / [ 生成式问答 ] 的简单整理 目录 AGI 之 【Hugging Face】 的【问答系统】的 [评估并改进问答Pipeline] / [ 生成式问答 ] 的简单整理 一、简单介绍 二、构建问答系统 三、评估并改进问答pipeline 1…

[k8s源码]4.informer

Informer 是 client-go 库中的一个核心组件,它提供了一种高效的方式来监视 Kubernetes 集群中资源的变化。Informer 通过 Watch 机制与 API Server 建立长连接&#xff0c;初次同步时会获取资源的完整列表&#xff0c;之后只接收增量更新,大大减少了网络流量。 使用informer可…

Java常用排序算法

算法复杂度 详解Java常用排序算法&#xff08;10种&#xff0c;含演示动画&#xff09; 冒泡排序&#xff08;Bubble Sort&#xff09; arr[0] 与 arr[1]比较&#xff0c;如果前面元素大就交换&#xff0c;如果后边元素大就不交换。然后依次arr[1]与arr[2]比较&#xff0c;第…

可视化工具选择指南:助力企业数字化转型和新质生产力发展

随着信息技术的快速发展和新质生产力概念的兴起&#xff0c;可视化工具在各个行业中的作用日益凸显。这些工具不仅能够帮助用户更直观地理解和分析数据&#xff0c;还能提升团队的协作效率和决策质量。 在当今数字化转型迅速发展的背景下&#xff0c;新质生产力的概念正在成为…

SpringBoot使用开发环境的application.properties

在Spring Boot项目中&#xff0c;application.properties 或 application.yml 文件是用于配置应用程序外部属性的重要文件。这些文件允许定制你的应用&#xff0c;而无需更改代码。根据不同的运行环境&#xff0c;可以通过创建以application-{profile}.properties格式命名的文件…

python-区间内的真素数(赛氪OJ)

[题目描述] 找出正整数 M 和 N 之间&#xff08;N 不小于 M&#xff09;的所有真素数。真素数的定义&#xff1a;如果一个正整数 P 为素数&#xff0c;且其反序也为素数&#xff0c;那么 P 就为真素数。 例如&#xff0c;11&#xff0c;13 均为真素数&#xff0c;因为 11 的反序…

利用Amazon Rekognition Face Liveness进行人脸活体检测的实践与探索

在人工智能、机器学习技术日渐普及的当下&#xff0c;出海企业都希望能够加快利用人工智能、机器学习技术&#xff0c;从而打造智能产品及其增值服务、为各地区提供本地化和个性化的服务体验及实现自身业务流程智能化。九河云将介绍人脸活体检测解决方案&#xff0c;亚马逊云科…

录频软件大盘点,哪款是你的最爱?

随着网络技术的飞速发展&#xff0c;人们对于录频软件的需求越来越强烈。无论是教育工作者、学生、游戏玩家还是商务人士&#xff0c;一款合适的录频软件都可以为他们提供便利。本文将介绍3款主流的录频软件&#xff0c;以帮助用户了解它们的特点、功能以及操作方法。 录频软件…

在Centos上安装MySQL

目录 在Centos上安装MySQL1.确认当前的系统版本2.添加 MySQL Yum 源2.1访问MySQL开发者专区2.2根据当前系统选择对应的发布包2.3补充 3.MySQL的历史发行版本4.安装发布包5.安装MySQL5.1启动MySQL服务器5.2查看服务器状态5.3开机自启动5.4 登入MySQL5.5修改密码 在Centos上安装M…

Spring Data Redis + Redis数据缓存学习笔记

文章目录 1 Redis 入门1.1 简介1.2 Redis服务启动与停止&#xff08;Windows&#xff09;1.2.1 服务启动命令1.2.2 客户端连接命令1.2.3 修改Redis配置文件1.2.4 Redis客户端图形工具 2. Redis数据类型2.1 五种常用数据类型介绍 3. Redis常用命令3.1 字符串操作命令3.2 哈希操作…