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

时间: 2017-11-24阅读: 594标签: 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中的数据类型有两大类,基本数据类型和引用数据类型,下面从三个方面来解剖他们

js基础_如何理解作用域和作用域链?

作用域外,无法引用作用域内的变量;离开作用域后,作用域的变量的内存空间会被清除,比如执行完函数或者关闭浏览器,作用域与执行上下文是完全不同的两个概念。我曾经也混淆过他们,但是一定要仔细区分。JavaScript代码的整个执行过程,分为两个阶段,代码编译阶段与代码执行阶段。

Js中的命名空间(namespace)

全局变量应该由有系统范围相关性的对象们保留,并且它们的命名应该避免含糊并尽量减少命名冲突的风险。在实践中,这意味着你应该避免创建全局对象,除非它们是绝对必须的。 所以你对此是怎么做的?传统方法告诉我们,最好的消除全局策略是创建少数作为潜在模块和子系统的实际命名空间的全局对象。

js 实现栈和队列

js实现栈或者队列有两种方式: 1.数组:数组本身提供栈方法(push,pop),队列方法(push,shift)。 2.链表:构造链表结构,说白了就是链表的插入(尾插),移除(栈:末尾节点移除,队列:头结点移除)

javascript的Object. hasOwnProperty方法

hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中(非继承属性)是否具有指定的属性,如果 object 具有带指定名称的属性,则 hasOwnProperty 方法返回 true,否则返回 false。

js常见知识点整理总结

一些常用的JavaScript 知识点整理,包括:两个函数是否等价、NaN是什么?它是什么类型?如何检测一个变量是否是NaN?作用域相关问题?js小数计算不准确的bug,js算法/思路相关,js类型强制转换

JavaScript中的魔幻代理Proxy

什么是 JavaScript 代理?通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作,包括但不限于属性查找、赋值、枚举、函数调用等等。利用 Proxy,我们可以拦截并不存在的属性的读取

适配器在JavaScript中的体现

适配器设计模式在JavaScript中非常有用,在处理跨浏览器兼容问题、整合多个第三方SDK的调用,都可以看到它的身影。适配器模式是一种软件设计模式,允许从另一个接口使用现有类的接口。它通常用于使现有的类与其他类一起工作,而无需修改其源代码。

JavaScript中的循环和作用域

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

JavaScript中的行为委托

行为委托简单来说就是一种设计模式,不同于传统的构造函数的类式设计。这里每个例子会通过构造函数,class和行为委托来不同实现,不过不会评论class,是否使用class取决于你的观点。

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

广告合作文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯