欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解JS-- 浮點數(shù)運算處理

 更新時間：2016年11月28日 08:25:14   作者：我有一顆四葉草  
本篇文章主要介紹了JS--浮點數(shù)運算處理，現(xiàn)在分享給大家，也給大家做個參考。感興趣的小伙伴們可以參考一下。

一. 問題描述

最近在做一個項目，頁面上會存在一些JS浮點數(shù)的運算，發(fā)現(xiàn)JS浮點數(shù)運算存在一些bug.譬如:

0.1+0.2 == 0.30000000000000004
 
0.1 + 0.7 == 0.7999999999999999
 
7*0.8 == 5.6000000000000005
 
5.6/7 == 0.7999999999999999

二.解決方案　　 

JS運算后都會有很小的誤差. 不像.Net或者Java那樣準確. 主要是JS重點不在運算上面,可是有時候項目一定要用到.想了一下大概有兩種解決方案

A 方案一:

運算結(jié)果保留2-3位小數(shù)位數(shù). 前端界面一般用到的運算比較少。精度要求不會太高。 所以取2位小數(shù)位即可。

B. 方案二:

將小數(shù)位數(shù)轉(zhuǎn)換為整數(shù)運算.　譬如：

0.1+0.2 =》　(1+2)/10 == 0.3
 
0.1 + 0.7 =》 (1+7)/10 == 0.8
 
7*0.8 == (7*8)/10 == 5.6
 
5.6/7 == (56/7)/10 == 0.1

為了方便調(diào)用. 所以我們可以提取一個公共的方法出來.譬如下面的JSMath庫，JSMath重寫了加減乘除. 會先將參數(shù)轉(zhuǎn)換為整數(shù)再運算JSMath(參數(shù)1).操作(參數(shù)2)

參數(shù)1和參數(shù)2分別就是運算的第一個Number和第二個Number. 計算后通過Value屬性獲取值．

 (function() {
 
  var JSMath = function() {
    return this;
  }
 
  JSMath.prototype.from = function(value) {
 
    // 支持JSMath參數(shù)傳遞主要是用于嵌套的調(diào)用
    if ((typeof(value) == 'object') && (value.value != undefined)) {
      this.value = value.value;
    } else {
      this.value = value;
    }
    return this;
  }
 
　 // 加法
  JSMath.prototype.add = function(value) {
    var thisValueString = this.value.toString();
    var valueString = value.toString();
    var timesCount1 = 0;
    var timesCount2 = 0;
    if (thisValueString.indexOf('.') > 0) {
      timesCount1 = thisValueString.split('.')[1].length;
    }
    if (valueString.indexOf('.') > 0) {
      timesCount2 = valueString.split('.')[1].length;
    }
    var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
    this.value = (Math.pow(10, maxtimeCount) * this.value + Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount);
    return this;
  }
　　　
　// 減法
  JSMath.prototype.sub = function(value) {
    var thisValueString = this.value.toString();
    var valueString = value.toString();
    var timesCount1 = 0;
    var timesCount2 = 0;
    if (thisValueString.indexOf('.') > 0) {
      timesCount1 = thisValueString.split('.')[1].length;
    }
    if (valueString.indexOf('.') > 0) {
      timesCount2 = valueString.split('.')[1].length;
    }
    var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
    this.value = (Math.pow(10, maxtimeCount) * this.value - Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount);
    return this;
  }
 
  // 除法　　
  JSMath.prototype.div = function(value) {
    var thisValueString = this.value.toString();
    var valueString = value.toString();
    var timesCount1 = 0;
    var timesCount2 = 0;
    if (thisValueString.indexOf('.') > 0) {
      timesCount1 = thisValueString.split('.')[1].length;
    }
    if (valueString.indexOf('.') > 0) {
      timesCount2 = valueString.split('.')[1].length;
    }
    var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
    this.value = ((Math.pow(10, maxtimeCount) * this.value) / (Math.pow(10, maxtimeCount) * value));
    return this;
  }
 
　 // 乘法
  JSMath.prototype.times = function(value) {
 
    var thisValueString = this.value.toString();
    var valueString = value.toString();
    var timesCount1 = 0;
    var timesCount2 = 0;
    if (thisValueString.indexOf('.') > 0) {
      timesCount1 = thisValueString.split('.')[1].length;
    }
    if (valueString.indexOf('.') > 0) {
      timesCount2 = valueString.split('.')[1].length;
    }
    var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
    this.value = (Math.pow(10, maxtimeCount) * this.value * Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount * 2);
    return this;
  }
 
  if (window.JSMath == undefined) {
    window.JSMath = function(value) {
      var result = new JSMath();
      result.from(value);
      return result;
    }
  }
})()

B1.基本運算

  0.1+0.2
=> JSMath(0.1).add(0.2).value == 0.3
 
7+0.8
=> JSMath(7).times(0.8).value == 5.6
 
5.6/7
=> JSMath(5.6).div(7).value = 0.8

B2.多目運算

  0.05 + 0.05 + 0.2
=> JSMath(JSMath(0.05).add(0.05)).add(0.2).value == 0.3
 
(5+0.6)/7
=> JSMath(JSMath(5).add(0.6)).div(7).value == 0.8

三．小總結(jié)

上面自己自己暫時知道的一些解決方案．不太清楚是否有開源的更可靠的三方庫來解決這個問題。以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 實現(xiàn)高性能JavaScript之執(zhí)行與加載

    實現(xiàn)高性能JavaScript之執(zhí)行與加載

    avaScript在瀏覽器中的性能，此問題因JavaScript的阻塞特征而復雜，也就是說JavaScript運行時其他的事情不能被瀏覽器處理，事實上，大多數(shù)瀏覽器使用單進程處理JavaScript運行等多個任務，而同一時間只能有一個任務被執(zhí)行。
    2016-01-01
  • 從零學JSON之JSON數(shù)據(jù)結(jié)構(gòu)

    從零學JSON之JSON數(shù)據(jù)結(jié)構(gòu)

    這篇文章主要介紹了JSON數(shù)據(jù)結(jié)構(gòu)的相關(guān)知識,需要的朋友可以參考下
    2014-05-05
  • 詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用

    詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用

    這篇文章主要介紹了詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用,文中特別提及了IE8的兼容問題以及for in的使用問題,需要的朋友可以參考下
    2016-03-03
  • js 實現(xiàn)復制到粘貼板的功能代碼

    js 實現(xiàn)復制到粘貼板的功能代碼

    主要是用到了 window.clipboardData.setData("Text",copyText);
    2010-05-05
  • AngularJS 指令詳細介紹

    AngularJS 指令詳細介紹

    本文主要介紹AngularJS 指令,這里詳細介紹AngularJS 指令知識并提供實例代碼,有需要的小伙伴可以參考下
    2016-07-07
  • 深入分析JavaScript 事件循環(huán)(Event Loop)

    深入分析JavaScript 事件循環(huán)(Event Loop)

    這篇文章主要介紹了JavaScript 事件循環(huán)(Event Loop)的的相關(guān)資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下
    2020-06-06
  • JavaScript的instanceof運算符學習教程

    JavaScript的instanceof運算符學習教程

    instanceof運算符可以用來判斷某個構(gòu)造函數(shù)的prototype屬性所指向的對象是否存在于另外一個要檢測對象的原型鏈上,這里我們就來看一下JavaScript的instanceof運算符學習教程
    2016-06-06
  • 詳解javascript設(shè)計模式三：代理模式

    詳解javascript設(shè)計模式三：代理模式

    這篇文章主要介紹了javascript設(shè)計模式三：代理模式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-03-03
  • js獲取height和width的方法說明

    js獲取height和width的方法說明

    js獲取height和width屬性的值在日常開發(fā)中很常見，于是本人搜集整理了一下，感興趣的朋友可以參考下
    2013-01-01
  • BOM與DOM的區(qū)別分析

    BOM與DOM的區(qū)別分析

    DHTML技術(shù)各項功能的實現(xiàn)都依賴于使用客戶端腳本與瀏覽器宿主及在宿主中輸出的Web頁面之間的交互，這種交互是通過對象這個技術(shù)手段實現(xiàn)的。
    2010-10-10

最新評論