js加减乘除精确运算方法实例代码

前言

因为计算机数字是浮点型,所以在计算过程中通常得到的并不是一个准确的数据,所以在做一些数组运算的时候比较头疼,我们这里就来写一下精确运算的方法

首先是加法 (这里以两个数据相加为例)

function add(arg1, arg2) {

	 arg1 = arg1.toString(), arg2 = arg2.toString(); // 将传入的数据转化为字符串
  var arg1Arr = arg1.split("."), // 将小数的数据从小数点的位置拆开
   arg2Arr = arg2.split("."),
   d1 = arg1Arr.length == 2 ? arg1Arr[1] : "", // 获取第一个数的小数点的长度
   d2 = arg2Arr.length == 2 ? arg2Arr[1] : ""; // 获取第二个数的小数点的长度
  var maxLen = Math.max(d1.length, d2.length); // 获取小数点长度较大的值
  var m = Math.pow(10, maxLen); // 这里表示10的小数点长度次方 也就是说如果小数点长度为2 m的值就是100 如果小数点长度是3 m的值就是1000如果不懂请自行查找api
  var result = Number(((arg1 * m + arg2 * m) / m).toFixed(maxLen)); // 将小数转化为整数后相加在除掉两个数乘过的倍数然后去小数点较长的长度的小数位数
  var d = arguments[2]; // 第三个参数用户可以自行决定是否要传递 用来定义要保留的小数长度
  return typeof d === "number" ? Number((result).toFixed(d)) : result;
}

add(12.123, 12)

然后是减法 (减法其实就是一个数组加上另一个数字的负数所以和加法逻辑相同)

function sun(arg1, arg2) {
return add(arg1, -arg2)
}

其次是乘法

function mul(arg1, arg2) {
var r1 = arg1.toString(), // 将传入的数据转化为字符串
r2 = arg2.toString(),
m, resultVal, d = arguments[2];
m = (r1.split(".")[1] ? r1.split(".")[1].length : 0) + (r2.split(".")[1] ? r2.split(".")[1].length : 0); // 获取两个数字的小数位数的和
// 乘积的算法就是去掉小数点做整数相乘然后除去10的所有小数位的次方
resultVal = Number(r1.replace(".", "")) * Number(r2.replace(".", "")) / Math.pow(10, m);

return typeof d !== "number" ? Number(resultVal) : Number(resultVal.toFixed(parseInt(d)));
}

最后是减法 (除法和乘法就是一个相反的过程,不做过多解释)

function div(arg1, arg2) {
     var r1 = arg1.toString(),
      r2 = arg2.toString(),
      m, resultVal, d = arguments[2];
     m = (r2.split(".")[1] ? r2.split(".")[1].length : 0) - (r1.split(".")[1] ? r1.split(".")[1].length : 0);
     resultVal = Number(r1.replace(".", "")) / Number(r2.replace(".", "")) * Math.pow(10, m);
     return typeof d !== "number" ? Number(resultVal) : Number(resultVal.toFixed(parseInt(d)));
    }

总结

到此这篇关于js加减乘除精确运算方法的文章就介绍到这了,更多相关js加减乘除精确运算内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 超级简易的JS计算器实例讲解(实现加减乘除)

    废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> body{ margin: 0; } .tab{ border: 3px solid black ; border-radius: 2px; border-collapse:collapse; width: 268p

  • 详解js加减乘除精确计算

    JS无法进行精确计算的bug 在做CRM,二代审核需求审核详情页面时.需要按比例(后端传类似0.8的小数)把用户输入的数字显示在不同的地方. 在做dubheInvest = invest * (1 - ratio);运算时发现问题.具体如下: 示例代码: console.log( 1 - 0.8 ); //输出 0.19999999999999996 console.log( 6 * 0.7 ); //输出 4.199999999999999 console.log( 0.1 + 0.2 );

  • JS实现的加减乘除四则运算计算器示例

    本文实例讲述了JS实现超级简易的加减乘除四则运算计算器.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的计算器(www.jb51.net)</title> <style> body{ margin: 0; } .tab{ border: 3px solid

  • js精确的加减乘除实例

    实例如下: (function () { var calc = { /* 函数,加法函数,用来得到精确的加法结果 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. 参数:arg1:第一个加数:arg2第二个加数:d要保留的小数位数(可以不传此参数,如果不传则不处理小数位数) 调用:Calc.Add(arg1,arg2,d) 返回值:两数相加的结果 */ Add: function (arg1, arg2) { arg1 = arg1

  • javascript加减乘除的简单实例

    javascript加减乘除的简单实例 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <script language="javascript" type="text/javascript"> //除法函数 function accD

  • javascript解决小数的加减乘除精度丢失的方案

    原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况. javascript(js)的小数点加减乘除问题,是一个js的bug如0.3*1 = 0.2999999999等,下面列出可以完美求出相应精度的四种js算法 function accDiv(arg1,arg2){ var t1=0,t2=0,r1,r2; try{t1=arg1.toString().split(".")[1].length}catch(e){} t

  • html+js实现简单的计算器代码(加减乘除)

    html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&

  • js加减乘除丢失精度问题解决方法

    在javascript中,当你使用小数进行加减乘除运算时,你会发现,所得到的结果有时后面带有长长的一段小数,使运算变得复杂,并且影响计算结果.上网查询了一下原因,大致如下:在javascript中,带小数的数据运算时总会出现好多位小数.这是因为在javascript中浮点数的计算是以2进制计算的. 复制代码 代码如下: /** * 加法运算,避免数据相加小数点后产生多位数和计算精度损失. * * @param num1加数1 | num2加数2 */ function numAdd(num1,

  • js加减乘除精确运算方法实例代码

    前言 因为计算机数字是浮点型,所以在计算过程中通常得到的并不是一个准确的数据,所以在做一些数组运算的时候比较头疼,我们这里就来写一下精确运算的方法 首先是加法 (这里以两个数据相加为例) function add(arg1, arg2) { arg1 = arg1.toString(), arg2 = arg2.toString(); // 将传入的数据转化为字符串 var arg1Arr = arg1.split("."), // 将小数的数据从小数点的位置拆开 arg2Arr =

  • JS创建事件的三种方法(实例代码)

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

  • JS实现星星评分功能实例代码(两种方法)

    一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no

  • 原生js实现each方法实例代码详解

    jquery里面有个each方法,将循环操作简化.便捷. 随后es出了个forEach方法,两个虽然用法相近,但是不能处理对象类型.且无法通过return true达到continue效果. 此外还有个every方法,该方法虽然可以实现continue效果,但是在处理类数组与对象类型时,完全无用. 在不使用 jquery 的 each 方法时,该如何处理:或者说用原生如何来实现? 前些前写了个类库: jTool , 其中就实现了该方法. 简单实现: // 通过字面量方式实现的函数each var

  • Vue.js子组件向父组件通信的方法实例代码详解

    一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文

  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

  • Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

  • Angular.js 实现数字转换汉字实例代码

    AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 下面通过本文给大家介绍Angular.js 实现数字转换汉字实例代码,具体代码如下所示: // 1.实现输入数字输出对应汉字,要求使用angularjs,不准使用$watch函数,for循环:提示:ng-change指令 <div ng-app="my

  • JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)

    js判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head> <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title> <style type="text/css"> .pbt { margin-bottom: 10px; } .ie6 .pbt .ftid a, .ie

随机推荐