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,一经查实,立即删除!

相关文章

Shell脚本中获取本机ip地址的3个方法

From: http://www.jb51.net/article/56585.htm 这篇文章主要介绍了Shell脚本中获取本机ip地址的3个方法,本文直接给出实现代码,需要的朋友可以参考下方法一&#xff1a; 复制代码 代码如下:/sbin/ifconfig -a|grep inet|grep -v 127.0.0.1|grep -v inet6|awk {print $2}|tr -d…

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, …

Linux 系统如何查看硬盘UUID与修改

一、查看 1. sudo blkid 2. ls -l /dev/disk/by-uuid 3. tune2fs -l /dev/sdb 二、修改与恢复 uuidgen 会返回一个合法的 uuid&#xff0c;结合 tune2fs 可以新生成一个 uuid 并写入 ext2,3,4 分区中&#xff1a; 比如新建或改变 sda5 的 uuid &#xff08;需要 root 权限…

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

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

定时任务 Crontab命令 详解

From: http://www.centoscn.com/CentOS/help/2014/1030/4025.html 前言 crontab是Unix和Linux用于设置周期性被执行的指令&#xff0c;是互联网很常用的技术&#xff0c;很多任务都会设置在crontab循环执行&#xff0c;如果不使用crontab&#xff0c;那么任务就是常驻程序&…

Web Js 按键事件……Enter提交事件 Enter Js事件

$(document).ready(function(){document.onkeydown function (event){ if (event.keyCode13) //回车键的键值为13 submit();}; });$(document).ready(funtion) 可以简写为 ↓ $(function(){});转载于:https://www.cnblogs.com/blogs2014/p/5789256.html

ISCSI 1-由零开始

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

js获取当前日期并格式化(多种格式)

获取当前日期的格式&#xff1a;2022-01-07 或者 2022/01/07 或者 2022-01-07 12:00:00 或者 2022/01/07 12:00:00 原博链接 方法1&#xff1a; // 对Date的扩展&#xff0c;将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个…

为什么移动硬盘的实际容量比标注容量小

很多网友都反映&#xff0c;自己的移动硬盘实际容量并没有厂商标注的容量大&#xff0c;都怀疑自己是不是被坑了&#xff0c;其实不是的&#xff0c;小编现在为你解密为何硬盘实际容量小于标注容量的问题。对于此种情况&#xff0c;有多方面原因导致1.对于存储容量的计算&#…

bash: mail: command not found的解决方法

From: http://hxl2009.blog.51cto.com/779549/884569 近日&#xff0c;安装了一个最小化的centos 6.2 64bit&#xff0c;系统中显示有root用户的mail&#xff0c;想用mail命令查看相关信件&#xff0c; 但发现一个问题&#xff1a; -bash: mail: command not found 呵呵&#…

Who is the best at Dataset X?

推荐一个关于分类、目标检测、姿态估计的数据集收藏的网页。 Did you ever want to quickly learn&#xff1f;which paper provides the best results on standard dataset X ?Wait no more, just click below and discover the current state of the art. URL&#xff1a;ht…

存储技术与iSCSI

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

js判断字符串包含英文;js判断字符串包含汉字;

let str 123qwer汉字if (/.*[\u4e00-\u9fa5].*$/.test(str)) {this.alert(包含汉字)}if (/[a-zA-Z]/.test(str)) {this.alert(包含英文字母)}

lvs和HA的高可用性

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

postfix报错postfix: fatal: parameter inet_interfaces: no local interface found for ::1

From: http://blog.csdn.net/xiangshanqishi/article/details/23439397 启动postfix出错&#xff0c;查看centos中的postfix日志 more /var/log/maillog postfix: fatal: parameter inet_interfaces: no local interface found for ::1 vi /etc/postfix/main.cf 发现配…

Linux LVM-删除卷组逻辑卷物理卷

查看卷组相关信息 [rootlocalhost /]# vgscanReading all physical volumes. This may take a while...Found volume group "VolGroup00" using metadata type lvm2 查看卷组VolGroup00包含的PV、LV信息。 [rootlocalhost /]# vgdisplay -v VolGroup00Using volume …

输入框限制只能输入数字,正数、负数、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…

iSCSI 2-环境搭建二

客户端安装配置 iSCSI initiator 1. 安装scsi-initiator-utils 软件包 [rootlocalhost /]# yum install scsi-initiator-utils 2. 查看相关配置文件 # /etc/iscsi/iscsi.conf 主要配置文件&#xff0c;用来连接到iscsi target的设置 # /sbin/iscsid 启动iSCSI initiator的…