当前位置:  首页>> 技术小册>> Javascript重点难点实例精讲(一)

在JavaScript中,整数和浮点数都属于Number类型,它们都统一采用64位浮点数进行存储。
虽然它们存储数据的方式是一致的,但是在进行数值运算时,却会表现出明显的差异性。整数参与运算时,得到的结果往往会和我们所想的一样,例如下面的代码。

  1. // 加法
  2. 1 + 2 = 3
  3. 7 + 1 = 8
  4. // 减法
  5. 15
  6. ``` 12 = 3
  7. 3
  8. ``` 2 = 1
  9. // 乘法
  10. 7 * 180 = 1260
  11. 97 * 100 = 9700
  12. // 除法
  13. 3 / 1 = 3
  14. 69 / 10 = 6.9

而对于浮点型运算,有时却会出现一些意想不到的结果,如下面的代码所示。

  1. // 加法
  2. 0.1 + 0.2 = 0.30000000000000004
  3. 0.7 + 0.1 = 0.7999999999999999
  4. // 减法
  5. 1.5
  6. ``` 1.2 = 0.30000000000000004
  7. 0.3
  8. ``` 0.2 = 0.09999999999999998
  9. // 乘法
  10. 0.7 * 180 = 125.99999999999999
  11. 9.7 * 100 = 969.9999999999999
  12. // 除法
  13. 0.3 / 0.1 = 2.9999999999999996
  14. 0.69 / 10 = 0.06899999999999999

得到这样的结果,大家是不是觉得很奇怪呢?0.1 + 0.2为什么不是等于0.3,而是等于0.30000000000000004呢?接下来我们一探究竟。

  1. 问题原因
    首先我们来看看一个浮点型数在计算机中的表示,它总共长度是64位,其中最高位为符号位,接下来的11位为指数位,最后的52位为小数位,即有效数字的部分。
    · 第0位:符号位sign表示数的正负,0表示正数,1表示负数。
    · 第1位到第11位:存储指数部分,用e表示。
    · 第12位到第63位:存储小数部分(即有效数字),用f表示

因为浮点型数使用64位存储时,最多只能存储52位的小数位,对于一些存在无限循环的小数位浮点数,会截取前52位,从而丢失精度,所以会出现上面实例中的结果。

  1. 计算过程
    接下来以0.1 + 0.2 = 0.30000000000000004的运算为例,看看为什么会得到这个计算结果。
    首先将各个浮点数的小数位按照“乘2取整,顺序排列”的方法转换成二进制表示。
    具体做法是用2乘以十进制小数,得到积,将积的整数部分取出;然后再用2乘以余下的小数部分,又得到一个积;再将积的整数部分取出,如此推进,直到积中的小数部分为零为止。
    然后把取出的整数部分按顺序排列起来,先取的整数作为二进制小数的高位有效位,后取的整数作为低位有效位,得到最终结果。
    0.1转换为二进制表示的计算过程如下。
  1. 0.1 * 2 = 0.2 //取出整数部分0
  2. 0.2 * 2 = 0.4 //取出整数部分0
  3. 0.4 * 2 = 0.8 //取出整数部分0
  4. 0.8 * 2 = 1.6 //取出整数部分1
  5. 0.6 * 2 = 1.2 //取出整数部分1
  6. 0.2 * 2 = 0.4 //取出整数部分0
  7. 0.4 * 2 = 0.8 //取出整数部分0
  8. 0.8 * 2 = 1.6 //取出整数部分1
  9. 0.6 * 2 = 1.2 //取出整数部分1

1.2取出整数部分1后,剩余小数为0.2,与这一轮运算的第一位相同,表示这将是一个无限循环的计算过程。

  1. 0.2 * 2 = 0.4 //取出整数部分0
  2. 0.4 * 2 = 0.8 //取出整数部分0
  3. 0.8 * 2 = 1.6 //取出整数部分1
  4. 0.6 * 2 = 1.2 //取出整数部分1
  5. ...

因此0.1转换成二进制表示为0.0 0011 0011 0011 0011 0011 0011……(无限循环)。
同理对0.2进行二进制的转换,计算过程与上面类似,直接从0.2开始,相比于0.1,少了第一位的0,其余位数完全相同,结果为0.0011 0011 0011 0011 0011 0011……(无限循环)。
将0.1与0.2相加,然后转换成52位精度的浮点型表示。
-
0.0001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 (0.1)

  • 0.0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 (0.2)
    = 0.0100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100
    -
    得到的结果为0.0100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100,转换成十进制值为0.30000000000000004。
  1. 解决方案
    通过上面详细的讲解,相信大家已经了解了对浮点数进行运算时会存在的问题,那么我们该如何解决呢?
    这里提供一种方法,主要思路是将浮点数先乘以一定的数值转换为整数,通过整数进行运算,然后将结果除以相同的数值转换成浮点数后返回。
    下面提供一套用于做浮点数加减乘除运算的代码。
  1. const operationObj = {
  2. /**
  3. * 处理传入的参数,不管传入的是数组还是以逗号分隔的参数都处理为数组
  4. * @param args
  5. * @returns {*}
  6. */
  7. getParam(args) {
  8. return Array.prototype.concat.apply([], args);
  9. },
  10. /**
  11. * 获取每个数的乘数因子,根据小数位数计算
  12. * 1.首先判断是否有小数点,如果没有,则返回1;
  13. * 2.有小数点时,将小数位数的长度作为Math.pow()函数的参数进行计算
  14. * 例如2的乘数因子为1,2.01的乘数因子为100
  15. * @param x
  16. * @returns {number}
  17. */
  18. multiplier(x) {
  19. let parts = x.toString().split('.');
  20. return parts.length < 2 ? 1 : Math.pow(10, parts[1].length);
  21. },
  22. /**
  23. * 获取多个数据中最大的乘数因子
  24. * 例如1.3的乘数因子为10,2.13的乘数因子为100
  25. * 则1.3和2.13的最大乘数因子为100
  26. * @returns {*}
  27. */
  28. correctionFactor() {
  29. let args = Array.prototype.slice.call(arguments);
  30. let argArr = this.getParam(args);
  31. return argArr.reduce((accum, next) => {
  32. let num = this.multiplier(next);
  33. return Math.max(accum, num);
  34. }, 1);
  35. },
  36. /**
  37. * 加法运算
  38. * @param args
  39. * @returns {number}
  40. */
  41. add(...args) {
  42. let calArr = this.getParam(args);
  43. // 获取参与运算值的最大乘数因子
  44. let corrFactor = this.correctionFactor(calArr);
  45. let sum = calArr.reduce((accum, curr) => {
  46. // 将浮点数乘以最大乘数因子,转换为整数参与运算
  47. return accum + Math.round(curr * corrFactor);
  48. }, 0);
  49. // 除以最大乘数因子
  50. return sum / corrFactor;
  51. },
  52. /**
  53. * 减法运算
  54. * @param args
  55. * @returns {number}
  56. */
  57. subtract(...args) {
  58. let calArr = this.getParam(args);
  59. let corrFactor = this.correctionFactor(calArr);
  60. let di = calArr.reduce((accum, curr, curIndex) => {
  61. // reduce()函数在未传入初始值时,curIndex从1开始,第一位参与运算的值需要
  62. // 乘以最大乘数因子
  63. if (curIndex === 1) {
  64. return Math.round(accum * corrFactor)
  65. Math.round(curr * corrFactor);
  66. }
  67. // accum作为上一次运算的结果,就无须再乘以最大因子
  68. return Math.round(accum)
  69. Math.round(curr * corrFactor);
  70. });
  71. // 除以最大乘数因子
  72. return di / corrFactor;
  73. },
  74. /**
  75. * 乘法运算
  76. * @param args
  77. * @returns {*}
  78. */
  79. multiply(...args) {
  80. let calArr = this.getParam(args);
  81. let corrFactor = this.correctionFactor(calArr);
  82. calArr = calArr.map((item) => {
  83. // 乘以最大乘数因子
  84. return item * corrFactor;
  85. });
  86. let multi = calArr.reduce((accum, curr) => {
  87. return Math.round(accum) * Math.round(curr);
  88. }, 1);
  89. // 除以最大乘数因子
  90. return multi / Math.pow(corrFactor, calArr.length);
  91. },
  92. /**
  93. * 除法运算
  94. * @param args
  95. * @returns {*}
  96. */
  97. divide(...args) {
  98. let calArr = this.getParam(args);
  99. let quotient = calArr.reduce((accum, curr) => {
  100. let corrFactor = this.correctionFactor(accum, curr);
  101. // 同时转换为整数参与运算
  102. return Math.round(accum * corrFactor) / Math.round(curr * corrFactor);
  103. });
  104. return quotient;
  105. }
  106. };

接下来我们通过以下这些代码对加减乘除运算分别做测试,运算结果和我们期望的一致。

  1. console.log(operationObj.add(0.1, 0.7)); // 0.8
  2. console.log(operationObj.subtract(0.3, 0.2)); // 0.1
  3. console.log(operationObj.multiply(0.7, 180)); // 126
  4. console.log(operationObj.divide(0.3, 0.1)); // 3

该分类下的相关小册推荐: