yuanyuanbyte / Blog

圆圆的博客,预计写七个系列:JavaScript深入系列、JavaScript专题系列、网络系列、Webpack系列、Vue系列、JavaScript基础系列、HTML&CSS应知应会系列。

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

JavaScript 基础系列之分析 0.1+0.2 !== 0.3

yuanyuanbyte opened this issue · comments

本系列的主题是 JavaScript 基础,每期讲解一个技术要点。如果你还不了解各系列内容,文末点击查看全部文章,点我跳转到文末

如果觉得本系列不错,欢迎 Star,你的支持是我创作分享的最大动力。

为什么0.1+0.2 ! == 0.3,如何处理

let n1 = 0.1, n2 = 0.2
console.log(n1 + n2)  // 0.30000000000000004

这里得到的不是想要的结果,要想等于0.3,就要把它进行转化:

(n1 + n2).toFixed(2) // '0.30' 注意,toFixed为四舍五入

JS中如何进入浮点数运算?

使用bignumber进行运算,BigNumber.js是一个用于任意精度计算的js库。

那为什么会出现这样的结果呢?

计算机是通过二进制的方式存储数据的,所以计算机计算0.1+0.2的时候,实际上是计算的两个数的二进制的和。0.1和0.2的二进制都是四位无限循环的数。

  • 0.1 的二进制是 0.00011001100110011001100110011001100110011001100110011,0011 四位无限循环;
  • 0.2 的二进制是 0.0011001100110011001100110011001100110011001100110011011,0011 四位无限循环。

JS采用的浮点数标准却会裁剪掉我们的数字。

这些循环的数字被裁剪了,就会出现精度丢失的问题,也就造成了 0.1 不再是 0.1 了,而是变成了 0.100000000000000002

在这里插入图片描述

0.100000000000000002 === 0.1 // true

那么同样的,0.2 在二进制也是无限循环的,被裁剪后也失去了精度变成了 0.200000000000000002

0.200000000000000002 === 0.2 // true

所以这两者相加不等于 0.3 而是 0.300000000000000004

在这里插入图片描述

查看全部文章

博文系列目录

  • JavaScript 深入系列
  • JavaScript 专题系列
  • JavaScript 基础系列
  • 网络系列
  • 浏览器系列
  • Webpack 系列
  • Vue 系列
  • 性能优化与网络安全系列
  • HTML 应知应会系列
  • CSS 应知应会系列

交流

各系列文章汇总:https://github.com/yuanyuanbyte/Blog

我是圆圆,一名深耕于前端开发的攻城狮。

weixin