关闭

js浮点数精度丢失问题_如何解决js中浮点数计算不精准?

时间: 2017-11-24阅读: 1883标签: 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


完结~~~~~~~~~~~~


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/165

关闭

19 个 JavaScript 常用有用的简写技术

Js中有用的简写技术:1.三元操作符、2.短路求值简写方式、3.声明变量简写方法、4.if存在条件简写方法、5.JavaScript循环简写方法、6.短路评价...

数字在JavaScript中是如何编译的

JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。浮点数并不一定等于小数,定点数也并不一定就是整数。所谓浮点数就是小数点在逻辑上是不固定的,而定点数只能表示小数点固定的数值

Performance_js中计算网站性能监控利器

Performance提供的方法可以灵活使用,获取到页面加载等标记的耗时情况。Performance.timing属性对象提供了浏览器从打开网页到加载完成之间各个节点的耗时数据,包括重定向开始、DNS查询、浏览器响应数据、DOM解析等相关节点

javascript怎么输出?

JavaScript怎么输出?输出方式有哪些?下面本篇文章就给大家介绍JavaScript的几种输出方式。window.alert()方法用于显示带有一条指定消息和一个【确认】 按钮的警告框。

js实现获取手机相册并上传

当初有很多人说使用form方法将文件封装来上传,可是因为要照顾到从相机中选择图片,所以一直没有去做。 后来看到了Uploader的方法来传文件,感觉自己找到了 。是使用plus.uploader来完成的

JavaScript中的循环和作用域

JavaScript有一个特点,也许会让开发者头痛, 是与循环和作用域相关的.const。最简单的方案是用 let 声明、另外一个非常普遍的解决这个问题是使用pre-ES6代码, 同时它被称作即时调用函数表达式(IIFE)

javascript由几部分组成?

JavaScript有三部分组成。分别为核心(ECMAScript) 、文档对象模型(DOM)、浏览器对象模型(BOM)。这三部分分别描述了该语言的语法和基本对象、处理网页内容的方法和接口、与浏览器进行交互的方法和接口。

为什么javascript不起作用?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

7个常见的 JavaScript 测验及解答

我相信学习新事物并评估我们所知的东西对自己的进步非常有用,可以避免了我们觉得自己的知识过时的情况。在本文中,我将介绍一些常见的 JavaScript 知识。请享用!

JavaScript的声明提升

在JavaScript中,当出现var声明的变量或者function声明的函数时,会将该声明提到当前作用域的前面执行,这便是声明提升。值得注意的是,只是提升了声明操作,赋值还是在原来的位置进行。声明提升包括变量声明提升和函数声明提升。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!