【JavaScript】浮点数精度问题

✨ 专栏介绍

在现代Web开发中,JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性,还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言,JavaScript具有广泛的应用场景,并且不断发展演进。在本专栏中,我们将深入学习JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。让我们一起开始JavaScript之旅吧!

在这里插入图片描述

文章目录

    • ✨ 专栏介绍
    • 引言
    • 常见浮点数精度问题
        • 示例一:浮点值运算结果
        • 示例二:小数乘以10的n次方取整(比如:元转分,米转厘米)
        • 示例三:四舍五入保留 *n* 位小数
    • 为什么会出现这样的结果
      • 浮点数表示
      • 举例说明
        • 示例一
        • 示例二
        • 示例三
    • 前端数学库
    • 总结
    • 😶 写在结尾
        • `前端设计模式专栏`
        • `Vue专栏`
        • `JavaScript(ES6)专栏`


引言

浮点数精度问题是指在计算机中使用二进制表示浮点数时,由于二进制无法精确表示某些十进制小数,导致计算结果可能存在舍入误差或不精确的情况。

这个问题主要源于浮点数的存储方式。在计算机中,浮点数通常使用IEEE 754标准来表示。该标准将浮点数分为符号位、指数位和尾数位,使用科学计数法来表示一个浮点数。

在这里插入图片描述

常见浮点数精度问题

示例一:浮点值运算结果
// 加法 
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.7 + 0.1); // 0.7999999999999999
console.log(0.2 + 0.4); // 0.6000000000000001
console.log(2.22 + 0.1); // 2.3200000000000003// 减法
console.log(1.5 - 1.2); // 0.30000000000000004
console.log(0.3 - 0.2); // 0.09999999999999998// 乘法 
console.log(19.9 * 100); // 1989.9999999999998
console.log(19.9 * 10 * 10); // 1990
console.log(9.7 * 100); // 969.9999999999999
console.log(39.7 * 100); // 3970.0000000000005// 除法 
console.log(0.3 / 0.1); // 2.9999999999999996
console.log(0.69 / 10); // 0.06899999999999999
示例二:小数乘以10的n次方取整(比如:元转分,米转厘米)
console.log(parseInt(0.58 * 100, 10)); // 57

在上面的例子中,我们得出的结果是 57,而不是预期结果 58

示例三:四舍五入保留 n 位小数

例如我们会写出 (number).toFixed(2),但是看下面的例子:

console.log((1.335).toFixed(2)); // 1.33

在上面的例子中,我们得出的结果是 1.33,而不是预期结果 1.34

为什么会出现这样的结果

浮点数表示

在计算机中,浮点数通常使用IEEE 754标准来表示。该标准将浮点数分为符号位、指数位和尾数位,使用科学计数法来表示一个浮点数。

该规范定义了浮点数的格式,对于 64 位的浮点数在内存中的表示,最高的 1 位是符号位,接着的 11 位是指数,剩下的 52 位为有效数字,具体表示方式如下:

  • 符号位 S:用于表示正负号。第 1 位是正负数符号位(sign),0 代表正数,1 代表负数。
  • 指数位 E:用于表示浮点数的指数部分,以二进制补码形式存储。中间的 11 位存储指数(exponent),用来表示次方数。
  • 尾数位 M:用于表示浮点数的有效数字部分,以二进制形式存储。最后的 52 位是尾数(mantissa),储存小数部分,超出的部分自动进一舍零。

即:浮点数最终在运算的时候实际上是一个符合该标准的二进制数

符号位决定了一个数的正负,指数部分决定了数值的大小,小数部分决定了数值的精度。

IEEE 754 规定,有效数字第一位默认总是 1,不保存在 64 位浮点数之中。也就是说,有效数字总是 1.xx…xx 的形式,其中 xx…xx 的部分保存在 64 位浮点数之中,最长可能为 52 位。因此,JavaScript 提供的有效数字最长为 53 个二进制位(64 位浮点的后 52 位 + 有效数字第一位的 1)。

既然限定位数,必然有截断的可能。

举例说明

示例一
console.log(0.1 + 0.2); // 0.30000000000000004

为了验证该例子,我们得先知道怎么将浮点数转换为二进制,整数我们可以用除 2 取余的方式,小数我们则可以用乘 2 取整的方式。

*0.1* 转换为二进制

0.1 * 2,值为 0.2,小数部分 0.2,整数部分 0

0.2 * 2,值为 0.4,小数部分 0.4,整数部分 0

0.4 * 2,值为 0.8,小数部分 0.8,整数部分 0

0.8 * 2,值为 1.6,小数部分 0.6,整数部分 1

0.6 * 2,值为 1.2,小数部分 0.2,整数部分 1

0.2 * 2,值为 0.4,小数部分 0.4,整数部分 0

0.2 开始循环

*0.2* 转换为二进制

可以直接参考上述,肯定最后也是一个循环的情况

所以最终我们能得到两个循环的二进制数:

0.1:0.0001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1100 …

0.2:0.0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 …

这两个的和的二进制就是:

sum:0.0100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 …

最终我们只能得到和的近似值(按照 IEEE 754 标准保留 52 位,按 01 入来取值),然后转换为十进制数变成:

sum ≈ 0.30000000000000004

示例二
console.log((1.335).toFixed(2)); // 1.33

因为 1.335 其实是 1.33499999999999996447286321199toFixed 虽然是四舍五入,但是是对 1.33499999999999996447286321199 进行四五入,所以得出 1.33

示例三

Javascript 中,整数精度同样存在问题,先来看看问题:

console.log(19571992547450991) // 19571992547450990
console.log(19571992547450991 === 19571992547450992) // true

同样的原因,在 JavaScriptnumber 类型统一按浮点数处理,整数是按最大 54 位来算。

  • 最大( 253 - 1Number.MAX_SAFE_INTEGER9007199254740991)
  • 最小( -(253 - 1)Number.MIN_SAFE_INTEGER-9007199254740991)

在浮点数计算中,有一些特定的小数情况可以避免舍入误差。这是因为这些特定的小数可以精确地表示为二进制分数,而不会导致舍入误差。以下是一些常见的特定情况:

  1. 小数部分是2的负整数次幂:例如,0.5、0.25、0.125等。这些小数在二进制中可以精确表示,因此计算时不会出现舍入误差。
  2. 小数部分是10的负整数次幂:例如,0.1、0.01、0.001等。尽管在十进制中无法精确表示,但在二进制中可以通过有限位数进行近似表示,并且通常不会引起明显的舍入误差。

前端数学库

Math.js、Decimal.js和Big.js都是用于处理精确计算的JavaScript库。它们提供了更高精度的数学运算功能,解决了JavaScript中浮点数精度问题。

Math.js

Math.js是一个功能强大的数学库,提供了丰富的数学函数和运算符,以及矩阵、统计、线性代数等功能。它支持高精度计算,并提供了大整数和有理数的支持。Math.js还具有表达式解析和求值功能,可以处理复杂的数学表达式。

Decimal.js

Decimal.js是一个专门用于高精度浮点数计算的JavaScript库。它通过使用字符串来表示数字,避免了浮点数舍入误差。Decimal.js支持基本的四则运算、比较、取模等操作,并提供了各种格式化选项和精度控制。

Big.js

Big.js是另一个用于高精度计算的JavaScript库。它也使用字符串来表示数字,并提供了大整数和大浮点数的支持。Big.js支持基本运算符、比较操作、取模运算等,并具有可配置的舍入模式和格式化选项。

这些库都可以帮助开发人员在需要进行精确计算或处理大数字时避免浮点数精度问题。根据具体需求,可以选择适合自己项目的库来进行高精度计算。

需要注意的是,使用这些库可能会带来一些性能上的开销,因为高精度计算需要更多的计算资源。因此,在实际应用中,需要根据具体情况权衡精度和性能之间的平衡。

总结

浮点数精度问题是计算机科学中一个常见的问题,由于二进制无法精确表示某些十进制小数,进行浮点数运算时可能会出现舍入误差。为了解决这个问题,可以使用整数进行计算、使用专门的库或者比较时使用误差范围。了解浮点数精度问题对于开发人员在处理浮点数运算时具有重要意义。


😶 写在结尾

前端设计模式专栏

在这里插入图片描述
设计模式是软件开发中不可或缺的一部分,它们帮助我们解决了许多常见问题,并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中,我们介绍了所有的前端设计模式,包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式,并将其应用于实际项目中,我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式,写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

在这里插入图片描述

Vue.js是一款流行的JavaScript框架,用于构建用户界面。它采用了MVVM(Model-View-ViewModel)的架构模式,通过数据驱动和组件化的方式,使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中,我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面,并探索其强大的生态系统,如Vue Router和Vuex、Pinia。通过学习这些内容,你将能够成为一名熟练的Vue.js开发者,并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript(ES6)专栏

在这里插入图片描述

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点,是构建现代Web应用程序的重要工具之一。在这个专栏中,我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6(ECMAScript 2015)及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript(ES6)专栏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/310712.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构】 常见的八大排序算法

概述 排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,这里八大排序就是内部排序,指直接插入,希尔,选择,堆排,冒泡,快排,归并,计数。 下面让我…

跨域是什么,如何解决跨域

文章目录 前言一、 什么是跨域?二、常见跨域问题三、如何解决跨域JSONP 和 CORS 跨域原理如何解决跨域(方式)前端解决跨域问题CORS反向代理JSONP 总结 前言 跨域是在开发中经常遇到的问题,那什么是跨域呢?及常见跨域的…

Spring Cloud Gateway + Nacos 实现动态路由

1、maven 依赖 主要依赖 <!-- 网关 --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency>案件差不多完整主要依赖 <!--Spring boot 依赖(微服务基…

Qt 5.9.4 转 Qt 6.6.1 遇到的问题总结(一)

最近公司对大家的开发的硬件环境进行了升级&#xff0c;电脑主机的配置、显示器&#xff08;两台大屏显示器&#xff09;变得的逼格高多了。既然电脑上的开发环境都需要重装&#xff0c;就打算把开发环境也升级到最新版本&#xff0c;要用就用最新版本。下面对升级后的开发环境…

10 款顶级的免费U盘数据恢复软件(2024 年 更新)

你曾经遇到过U盘无法访问的情况吗&#xff1f;现在我们教你如何恢复数据。 在信息时代&#xff0c;数据丢失往往会造成巨大的困扰。而USB闪存驱动器作为我们常用的数据存储设备&#xff0c;其重要性不言而喻。但是&#xff0c;U盘也可能会出现各种问题&#xff0c;如无法访问、…

C语言-第十七周做题总结-数组2

id&#xff1a;464 A.求矩阵各行元素之和 题目描述 本题要求编写程序&#xff0c;求一个给定的mn矩阵各行元素之和。 输入 输入第一行给出两个正整数m和n&#xff08;1≤m, n≤6&#xff09;。随后m行&#xff0c;每行给出n个整数&#xff0c;其间以空格分隔。 输出 每行…

3DV 2024 Oral | SlimmeRF:可动态压缩辐射场,实现模型大小和建模精度的灵活权衡

目前大多数NeRF模型要么通过使用大型模型来实现高精度&#xff0c;要么通过牺牲精度来节省内存资源。这使得任何单一模型的适用范围受到局限&#xff0c;因为高精度模型可能无法适应低内存设备&#xff0c;而内存高效模型可能无法满足高质量要求。为此&#xff0c;本文研究者提…

游戏任务系统实现思路

文章目录 一、需求介绍二、数据库设计3、代码部分实现 一、需求介绍 1、首先任务的类型不同&#xff0c;可以分为&#xff1a;日常任务、成长任务、活动任务等等。 2、当达到任务目标时&#xff0c;自动发放任务奖励。 3、任务需要后台可配置&#xff0c;例如&#xff1a;任务…

前馈神经网络复习

习题4-1 对于一个神经元(wx b),并使用梯度下降优化参数w时如果输入x 恒大于0,其收敛速度会比零均值化的输入更慢 在全连接网络模型中&#xff0c;将输入的x值进行零均值化是一种预处理方法&#xff0c;旨在将训练集中的每个输入值x减去其均值&#xff0c;以0为中心&#xff0…

用IDEA创建/同步到gitee(码云)远程仓库(保姆级详细)

前言&#xff1a; 笔者最近在学习java&#xff0c;最开始在用很笨的方法&#xff1a;先克隆远程仓库到本地&#xff0c;再把自己练习的代码从本地仓库上传到远程仓库&#xff0c;很是繁琐。后发现可以IDEA只需要做些操作可以直接把代码上传到远程仓库&#xff0c;也在网上搜了些…

Python 下载与安装

1、下载 打开Python官网&#xff1a;Welcome to Python.org 点击下图所示的【Downloads】按钮进入下载页面。 ​ 进入下载页面后下拉至下图位置&#xff0c;选择版本&#xff0c;点击下载按钮下载。 页面会跳转至下一页下载页面&#xff0c;下拉到下图位置&#xff0c;选择…

缓存cache和缓冲buffer的区别

近期被这两个词汇困扰了&#xff0c;感觉有本质的区别&#xff0c;搜了一些资料&#xff0c;整理如下 计算机内部的几个部分图如下 缓存&#xff08;cache&#xff09; https://baike.baidu.com/item/%E7%BC%93%E5%AD%98 提到缓存&#xff08;cache&#xff09;&#xff0c;就…