js浮点数精度丢失问题及如何解决js中浮点数计算不精准
js中进行数字计算时候,会出现精度误差的问题。先来看一个实例:
console.log(0.1+0.2===0.3);//false
console.log(0.1+0.1===0.2);//true
上面第一个的输出会超出我们的常识,正常应该为true,这里为什么会是false呢,直接运行会发现0.1+0.2在js中计算的结果是:
console.log(0.1+0.2);//输出0.30000000000000004
这对于浮点数的四则运算(加减乘除),几乎所有的编程语言都会出现上面类似的精度误差问题,只是大部分语言都处理封装了避免误差的方法。对于js而言,由于它是一门弱类型的语言,所以并没有对浮点数的运算有解决的封装方法,这能我们自己来解决。这里为什么会出现这个精度误差呢?
浮点数产生的原因
我们首先就想到计算机能读懂的是二进制,所以我们进行运算的时候,实际上是把数字转换为了二进制进行的,所以我们把0.1和0.2转换为二进制:
0.1 => 0.0001 1001 1001 1001..(无限循环)
0.2 => 0.0011 0011 0011 0011…(无限循环)
这里可以看出转换为二进制是一个无限循环的数字,单在计算机中对于无限循环的数字会进行舍入处理的,进行双精度浮点数的小数部分最多支持52位。然后把两个2进制的数进行运算得出的也是一个二进制数值,最后再把它转换为十进制。保留17位小数,所以0.1+0.2的值就成了 0.30000000000000004。 0.1+0.1的值成了0.20000000000000000,全是0的时候可以省略,就成了0.2
解决浮点数精度误差的办法
最简单的处理,通过toFixed方法,
console.log(parseFloat(0.1+0.2).toFixed(1));//输出0.3
说明:通过toFixed(num)方法来保留小数,其中num为保留小数的位数,这个方法是根据四舍五入来保留小数的,所以计算的结果并不是最精确的。所以我们需要采用其它方法来实现,通过Number.prototype的属性进行添加,如下:
js加法:
//加法函数
function accAdd(arg1, arg2) {
var r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length;
} catch(e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
}catch(e){
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
return(arg1 * m + arg2 * m) / m;
} //给Number类型增加一个add方法,使用时直接用 .add 即可完成计算。
Number.prototype.add = function(arg){
return accAdd(arg, this);
};
console.log(0.1.add(0.2).add(0.3));//等价于0.1+0.2+0.3,输出0.6
console.log(0.1+0.2+0.3);//输出0.6000000000000001
js减法:
//减法函数
function Subtr(arg1, arg2) {
var r1, r2, m, n;
try {
r1 = arg1.toString().split(".")[1].length;
} catch(e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch(e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2)); //动态控制精度长度
n = (r1 >= r2) ? r1 : r2;
return parseFloat(((arg1 * m - arg2 * m) / m).toFixed(n));
}
Number.prototype.sub = function(arg) {
return Subtr(this, arg);
};
console.log(0.6.sub(0.2).sub(0.3));//等价于0.6-0.2-0.3 输出0.1
console.log(0.6-0.2-0.3);//输出:0.09999999999999998
js乘法:
//乘法函数
function accMul(arg1, arg2) {
var m = 0,
s1 = arg1.toString(),
s2 = arg2.toString();
try {
m += s1.split(".")[1].length;
} catch(e) {}
try {
m += s2.split(".")[1].length;
} catch(e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
}
Number.prototype.mul = function (arg) {
return accMul(arg, this);
};
console.log(0.1.mul(0.2).mul(0.3)); //等价于0.1 * 0.2 * 0.3 输出0.006
console.log(0.1 * 0.2 * 0.3); //输出:0.006000000000000001
js除法:
//除法函数
function accDiv(arg1, arg2) {
var t1 = 0,
t2 = 0,
r1, r2;
try {
t1 = arg1.toString().split(".")[1].length;
} catch(e) {}
try {
t2 = arg2.toString().split(".")[1].length;
} catch(e) {}
with(Math) {
r1 = Number(arg1.toString().replace(".", ""));
r2 = Number(arg2.toString().replace(".", ""));
return(r1 / r2) * pow(10, t2 - t1);
}
}
Number.prototype.div = function (arg) {
return accDiv(this, arg);
};
console.log(0.6.div(0.2).div(0.1)); //等价于0.6 / 0.2 / 0.1 输出30
console.log(0.6 / 0.2 / 0.1); //输出:29.999999999999993
js浮点数精度丢失问题及如何解决js中浮点数计算不精准的更多相关文章
- Java 浮点数精度丢失
Java 浮点数精度丢失 问题引入 昨天帮室友写一个模拟发红包抢红包的程序时,对金额统一使用的 double 来建模,结果发现在实际运行时程序的结果在数值上总是有细微的误差,程序运行的截图: 输入依次 ...
- 计算价格, java中浮点数精度丢失的解决方案
计算价格, java中浮点数精度丢失的解决方案
- javascript(js)小数精度丢失的解决方案
原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况. javascript(js)的小数点加减乘除问题,是一个js的bug如0.3* ...
- js数字精度丢失
http://www.cnblogs.com/snandy/p/4943138.html
- JavaScript数字精度丢失问题总结
本文分为三个部分 JS 数字精度丢失的一些典型问题 JS 数字精度丢失的原因 解决方案(一个对象+一个函数) 一.JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加 0.1 + 0.2 != ...
- JavaScript数字精度丢失的一些问题
本文分为三个部分 JS 数字精度丢失的一些典型问题 JS 数字精度丢失的原因 解决方案(一个对象+一个函数) 一.JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加 1 0.1 + 0.2 ! ...
- 学以致用:手把手教你撸一个工具库并打包发布,顺便解决JS浮点数计算精度问题
本文讲解的是怎么实现一个工具库并打包发布到npm给大家使用.本文实现的工具是一个分数计算器,大家考虑如下情况: \[ \sqrt{(((\frac{1}{3}+3.5)*\frac{2}{9}-\fr ...
- 后端传Long类型至前端js会出现精度丢失问题
今天开发遇到个问题,Java后端的Long类型数据,传到前端会出现精度丢失,如:164379764419858435,前端会变成164379764419858430.在浏览器中做测试可知,这就是一个精 ...
- JavaScript数字计算精度丢失的问题和解决方案
一.JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加:0.1 + 0.2 != 0.3 // true,下图是firebug的控制台截图: 看看java的计算结果:是不是让你很不能接受 再来 ...
随机推荐
- requestAnimationFrame ---- 请求动画帧。
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画.该方法需要传入一个回调函数作为参数,该回调函数会 ...
- 你与BAT只差这一套面试题
1.Linux如何挂载windows下的共享目录?mount.cifs //IP地址/server /mnt/server -o user=administrator,password=123456l ...
- Nginx + PHP 修改单次请求 最大执行时间
1. php.ini (usr/local/php/etc) max_execution_time = 2. php-fpm.conf (usr/local/php/etc) request_t ...
- WSGI——python web 服务器网关接口
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826084.html 一:服务器.服务器软件.应用程序(后台) 我们常说“服务器”,实际上服务器是一个很宽 ...
- java常见数据结构的时间复杂度总结
- IDisposable 接口
提供一种用于释放非托管资源的机制. 地址:https://docs.microsoft.com/zh-cn/dotnet/api/system.idisposable?view=netframewor ...
- Win10 家庭版 VMware 无法启动 解决办法
引发原因 最近更新了一个补丁 KB4524147 安装后会导致 VM 无法打开(如果你没有安装hyper-v的话) 解决方案 控制面板 -> 程序 -> 查看已安装的更新 -> 找到 ...
- P3398 仓鼠找sugar[LCA]
题目描述 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐厅(b),而他的基友同时要从他的卧室(c) ...
- 通过PHP自带的$_SERVER判断 自动识别移动设备
因为站点需要,手机端和PC端分离,所以通过PHP自带的$_SERVER判断 自动识别移动设备 代码如下: <?php $agent = $_SERVER['HTTP_USER_AGENT']; ...
- egg 阻止 sql 注入,相关文章
egg 阻止 sql 注入,相关文章 网址 注意!!我们极其不建议开发者拼接 sql 语句,这样很容易引起 sql 注入!!如果必须要自己拼接 sql 语句,请使用 mysql.escape 方法. ...