js计算浮点数出现小数;解决js计算小数问题;js数组相加出现小数;

原博1 原博2

方案1和方案2都是有效的

=====注意参数一定要是数字 而不能是字符串 否则会计算错误 =====

情景: 在计算浮点数时候,出现多余小数。
例如: 1.11 + 1 = 2.1100000000000003
[外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述1]议将图片上https://传(imblog.cnimg.sg/na5c4ca3Nz9210e64f59acf9d40e5b8f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_52,text_Q1NETiBAaV9hbV9hX4Rpdl_ml6Xnp6_mnIjntK9f,size_20,color_FFFFFF,t_70,g_se,x_146026)(1)]

为什么计算小数会出现误差?
浮点数值的最高进度是17位小数,但在进行运算的时候其精确度却远远不如整数;整数在进行运算的时候都会转成10进制; 而Java和JavaScript中计算小数运算时,都会先将十进制的小数换算到对应的二进制,一部分小数并不能完整的换算为二进制,这里就出现了第一次的误差。待小数都换算为二进制后,再进行二进制间的运算,得到二进制结果。然后再将二进制结果换算为十进制,这里通常会出现第二次的误差。

方案1:简单的js加法和减法:

//加法
Math.round((parseFloat(num1) + parseFloat(num2))*100)/100
//减法
Math.round((parseFloat(num1) - parseFloat(num2))*100)/100

方案2:复杂的加减乘除运算封装:

以下代码可以直接复制使用

有效的话请点赞评论下,让更多的朋友能够看到解决问题!

<template><div style="padding:20px;"><div><span>1.11 + 1 = {{ 1.11 + 1 }}</span> <span>-----处理浮点计算:{{ addNum }}</span></div><div><span>1.11 - 1 = {{ 1.11 - 1 }}</span> <span>-----处理浮点计算:{{ subNum }}</span></div><div><span>1.11 * 100= {{ 1.11 * 100 }}</span> <span>-----处理浮点计算:{{ mulNum }}</span></div><div><span>0.11 / 0.1 = {{ 0.11 / 0.1 }}</span> <span>-----处理浮点计算:{{ divNum }}</span></div><div><span> (((1.11 + 1) - 1) * 100) / 0.1 = {{ (((1.11 + 1) - 1) * 100) / 0.1 }}</span> <span>-----处理浮点计算:{{ lastNum }}</span></div></div>
</template><script>export default {data () {return {addNum: 0,subNum: 0,mulNum: 0,divNum: 0,lastNum: 0}},created () {this.getNum()},methods: {getNum () {console.log(1.11 + 1)console.log(1.11 - 1)console.log(1.11 * 100)console.log(0.11 / 0.1)console.log((((1.11 + 1) - 1) * 100) / 0.1)// ================注意参数一定要是数字 而不能是字符串 否则会计算错误 ====================this.addNum = this.floatObj().add(1.11, 1)// 加法this.subNum = this.floatObj().subtract(1.11, 1)// 减法this.mulNum = this.floatObj().multiply(1.11, 100)// 乘法this.divNum = this.floatObj().divide(0.11, 0.1)// 除法this.lastNum = this.floatObj().divide(this.floatObj().multiply(this.floatObj().subtract(this.floatObj().add(1.11, 1), 1), 100), 0.1)// 混合运算},/** * 封装了加减乘除四种计算方法 **// ================注意参数一定要是数字 而不能是字符串 否则会计算错误 ====================*  add / subtract / multiply /divide* this.floatObj().add(1.11, 1)// 加法* this.floatObj().subtract(1.11, 1)// 减法* this.floatObj().multiply(1.11, 100)// 乘法* this.floatObj().divide(0.11, 0.1)// 除法*/floatObj () {// 判断obj是否为一个整数function isInteger (obj) {return Math.floor(obj) === obj}/** 将一个浮点数转成整数,返回整数和倍数。如 3.14 >> 314,倍数是 100* @param floatNum {number} 小数* @return {object}* {times:100, num: 314}*/function toInteger (floatNum) {var ret = { times: 1, num: 0 }if (isInteger(floatNum)) {ret.num = floatNumreturn ret}var strfi = floatNum + ''var dotPos = strfi.indexOf('.')var len = strfi.substr(dotPos + 1).lengthvar times = Math.pow(10, len)var intNum = Number(floatNum.toString().replace('.', ''))ret.times = timesret.num = intNumreturn ret}/** 核心方法,实现加减乘除运算,确保不丢失精度* 思路:把小数放大为整数(乘),进行算术运算,再缩小为小数(除)** @param a {number} 运算数1* @param b {number} 运算数2* @param op {string} 运算类型,有加减乘除(add/subtract/multiply/divide)**/function operation (a, b, op) {var o1 = toInteger(a)var o2 = toInteger(b)var n1 = o1.numvar n2 = o2.numvar t1 = o1.timesvar t2 = o2.timesvar max = t1 > t2 ? t1 : t2var result = nullswitch (op) {case 'add':if (t1 === t2) { // 两个小数位数相同result = n1 + n2} else if (t1 > t2) { // o1 小数位 大于 o2result = n1 + n2 * (t1 / t2)} else { // o1 小数位 小于 o2result = n1 * (t2 / t1) + n2}return result / maxcase 'subtract':if (t1 === t2) {result = n1 - n2} else if (t1 > t2) {result = n1 - n2 * (t1 / t2)} else {result = n1 * (t2 / t1) - n2}return result / maxcase 'multiply':result = (n1 * n2) / (t1 * t2)return resultcase 'divide':result = (n1 / n2) * (t2 / t1)return result}}// 加减乘除的四个接口function add (a, b) { // 加法return operation(a, b, 'add')}function subtract (a, b) { // 减法return operation(a, b, 'subtract')}function multiply (a, b) { // 乘法return operation(a, b, 'multiply')}function divide (a, b) { // 除法return operation(a, b, 'divide')}return {add: add,subtract: subtract,multiply: multiply,divide: divide}}}
}
</script><style>
</style>

有效的话请点赞评论下,让更多的朋友能够看到解决问题!

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

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

相关文章

VMware安装系统时没有弹出分区设置

在安装虚拟机系统的时候&#xff0c;有时候会遇到在安装一些镜像时没有弹出分区设置的画面&#xff0c;比如&#xff0c;我在使用 VMware 安装 CentOS 的时候&#xff0c;在选择完镜像&#xff0c;设置好启动安装的时候系统自动为我划分了 3 个分区&#xff1a;/boot、/、swap分…

如何在postgresql中模拟oracle的dual表,来测试数据库最基本的连接功能?

还好&#xff0c;网上弄到的&#xff0c;&#xff0c;没有dual的数据库&#xff0c;可以试图用select函数不带from数据表的方式来实现返回值。 一段测试代码&#xff1a; try:conn psycopg2.connect(databasedb.service_name, userdb.username, passwordpassword, hostdb.ip, …

vue+element实现树状表格的增删改查;使用el-table树形数据与懒加载实现树状表格增删改查

以下代码可以直接复制使用 一、情景&#xff1a; 列表是一个树状表格&#xff0c;可以无限添加下级&#xff0c;以及对列表的某一行进行增删改查&#xff08;目前查没有写&#xff09;。 原博链接 二、本篇是在原博主的代码基础上添加了部分功能。 功能1&#xff1a; 给树状表格…

ISCSI 1-由零开始

iSCSI的概念 iSCSI&#xff0c;即Internet SCSI&#xff0c;是IETF制订的一项标准&#xff0c;用于将SCSI数据块映射为以太网数据包。从根本上说&#xff0c;它是一种基于IP Storage理论的新型存储技术&#xff0c;该技术将存储行业广泛应用的SCSI接口技术与IP网络技术相结合&a…

存储技术与iSCSI

本章主要介绍基于IP SAN的网络存储iSCSI。iSCSI技术以其低廉的构建成本和优秀的存储性能&#xff0c;博得了很多CIO和存储管理员的喜爱&#xff0c;目前陆续进入企业应用领域&#xff0c;推动了企业的存储环境向集中式转变。虽然&#xff0c;目前对于iSCSI应该在什么样的环境中…

lvs和HA的高可用性

Heartbeat实现Lvs高可用和HA高可用效果图如下1、heartbeat的介绍Heartbeat 项目是 Linux-HA 工程的一个组成部分&#xff0c;它实现了一个高可用集群系统。心跳服务和集群通信是高可用集群的两个关键组件&#xff0c;在 Heartbeat 项目里&#xff0c;由 heartbeat 模块实现了这…

输入框限制只能输入数字,正数、负数、0,最多两位小数;数字输入框可以输入负数,并最多保留两位小数;el-number-input去掉四舍五入和自动补齐小数;

场景&#xff1a; –要求1&#xff1a;输入框只能输入数字&#xff0c;可以使正数、负数、0&#xff0c;小数点最多保留两位。 –要求2&#xff1a;不需要自动补齐小数点&#xff0c;也不需要自动四舍五入。 element-ui的数字输入框el-input-number只能满足要求1&#xff0c;所…

【工具】Win 7/8/10 下使用 VC++6.0

Microsoft Visual C&#xff08;也就是 MSVC或者VC&#xff09;&#xff0c;是大部分计算机专业学生接触的第一款编译器。它具有轻量&#xff0c;界面简洁等优点&#xff0c;也是许多计算机考试的指定工具。VC6.0已经推出近20年&#xff0c;仍旧深受许多编程人员的喜爱&#xf…

【maven3学习之一】window7下maven环境搭建

2019独角兽企业重金招聘Python工程师标准>>> 软件准备&#xff1a; jdk-7u10-windows-i586 apache-maven-3.0.4-bin maven介绍&#xff1a; 按照一般的套路老说应该要说明一下maven&#xff0c;觉得maven就是一个项目管理的框架&#xff0c;因为之前的一个项目对mav…

解决去除“请输入有效值。两个最接近的有效值分别为1和2“提示

场景&#xff1a;el-input输入框&#xff0c;hover上去会有"请输入有效值。两个最接近的有效值分别为1和2"提示。 只需要给el-input加上属性 :step“0.01” 即可&#xff0c;注意精确度与你的小数点位数有关。也就是说如果你是三位小数点&#xff0c;那就是:step“0.…

【贪心】Vijos P1615 旅行

题目链接&#xff1a; https://vijos.org/p/1615 题目大意&#xff1a; N条路&#xff0c;路的高度给你&#xff0c;走一条路的耗费体力是从上一条路的高度到当前路高度的绝对值差。 可以改变一条路的高度&#xff0c;耗费的体力等于改变前后的路高度差。求最小耗费体力。 题目…

向 Web 开发人员推荐35款 JavaScript 图形图表库

From: http://www.cnblogs.com/lhb25/p/35-javascript-chart-and-graph-libraries.html 图表是数据图形化的表示&#xff0c;通过形象的图表来展示数据&#xff0c;比如条形图&#xff0c;折线图&#xff0c;饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据&#xff…

解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中

解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中 以下代码可直接复制&#xff1a; 两种方法&#xff1a;分别是方法1&#xff1a;bfc配合浮动撑高 其他项目子绝父相 方法二&#xff1a;第一项也是相对定位&#xff08;不推荐&#xff09; <templat…

uni-app更新某个组件版本;uni-app更新插件版本;uni-app更新uni_modules插件;uni-app小程序更新某一个组件的版本库

uni-app官方介绍的更新某一个组件的uni_modules方法 注意&#xff1a;本篇只是记录更新uni-app的组件库下某一个组件的版本。不是更新微信小程序版本。 场景原因&#xff1a;项目最初是去年开发的&#xff0c;当时下载了uni-app的自带组件库。但是时间筛选器uni-datetime-picke…

课文《小站》

小站 --作者&#xff1a;袁鹰 这是一个铁路线上的小站&#xff0c;只有慢车才停两三分钟。快车疾驰而过&#xff0c;旅客们甚至连站名还来不及看清楚。 就在这一刹那&#xff0c;你也许看到一间红瓦灰墙的小屋&#xff0c;一排漆成白色的小栅栏&#xff0c;或者还有三五个人影…

wordpress在新窗口打开留言者链接

为什么80%的码农都做不了架构师&#xff1f;>>> 没有什么技术含量可言&#xff0c;网上早有高手支招&#xff0c;但其方法在我现在使用的inove主题下不行&#xff0c;于是自己研究了下代码&#xff0c;完美解决&#xff0c;分享一下&#xff1a; 一般主题都可以这…

vue上传图片加水印;js上传图片添加水印;vue给图片添加水印;canvas图片添加水印;canvas画布导出图片

uni-app微信小程序图片加水印&#xff0c;点击看这篇 需求场景&#xff1a; 要求上传图片&#xff0c;并给图片添加水印。传给后端的也是有水印的图片。 逻辑步骤&#xff1a; 通过input上传图片&#xff0c;拿到图片的信息和base64&#xff0c;将图片绘制到画布上&#xff0c;…

The path is not a valid path to the xx-generic kernel headers

如果在安装 VMware Tools 的过程中弹出该选项&#xff0c;按照以下步骤进行操作&#xff1a; 1. 检查系统内是否已经安装好相应的 kernel headers&#xff0c;比如我的系统&#xff1a; 如果没有该目录的话&#xff0c;那么需要安装以下资源&#xff1a; sudo apt-get instal…

库-libuv:概述

From&#xff1a; http://blog.chinaunix.net/uid-28458801-id-4464173.html libuv 是 Node 的新跨平台抽象层&#xff0c;用于抽象 Windows 的 IOCP 及 Unix 的 libev。作者打算在这个库的包含所有平台的差异性。特性&#xff1a;非阻塞 TCP 套接字非阻塞命名管道UDP定时器子进…

input上传图片;input上传file;vue上传图片。js读取文件的base64;通过File文件读取base64;

本篇是通过File文件来获取base64的&#xff1b;如果需要 通过文件url获取base64看这篇 需求&#xff1a;上传图片并获取base&#xff0c;用的是input file功能上传 注意点&#xff1a;input上传相同文件不触发的原因。需要将inputDOM.value null (不过置空后 29行的打印 就看不…