详细谈谈JS中的内存与变量存储

目录
  • 前言
  • JS神奇的Number
  • 存储数字
    • 二进制如何转换
  • why 0.1 + 0.2 !== 0.3?
  • 总结

前言

在前端领域,因为大部分在跟UI打交道,内存管理是最容易被忽略的部分。如果不懂内存,就看不清很多问题的本质,也难以写出更合格的代码,本次带大家走进内存的世界。

JS神奇的Number

案例一:金额的计算与传递

18.9 * 100
=1889.9999999999998

案例二:违背的数学定律

0.1 + 0.2 === 0.3
// false

(function (a, b, c) {
    return a + b + c === a + ( b + c )
})(0.1, 0.2, 0.3)
// false

案例三:无限循环的加法

(function (num) {
    while(true) {
        if (++num % 13 === 0) {
            return num
        }
    }
})(2 ** 53)

案例四:JSON.parse

JSON.parse('{"a":180143985094813214124}')
//{a: 180143985094813220000}

通过上面的四个案例我们可以看出,数字在计算机中运算往往会给人带来一些“惊喜”,要想防止这些意想不到的结果,我们首先要了解Number在Javascript中到底是怎么存储的?

存储数字

计算机是用二进制来存储数据的,所以数字也需要转换成相应二进制: 000 或者 111 的不同组合序列。

二进制如何转换

如何将一个数字转换成二进制,这里举个例子说明一下:

把十进制小数 106.6953125106.6953125106.6953125 转换成二进制

遇到小数转换时,需要把整数和小数两部分分别进行处理,整数 106106106 除以 222 直到商是 000 为止,取每次除 222 得到的余数结果

106 / 2 = 53  ...... 0
53  / 2 = 26  ...... 1
26  / 2 = 13  ...... 0
13  / 2 = 6   ...... 1
6   / 2 = 3   ...... 0
3   / 2 = 1   ...... 1
1   / 2 = 0   ...... 1
结果为得到的余数按照从右往左排列   1101010

小数 0.69531250.69531250.6953125 乘以 222 直到不存在小数位为止,并计下每次乘后的整数位结果,

0.6953125 x 2 = 1.390625  ...... 1
0.390625  x 2 = 0.78125   ...... 0
0.78125   x 2 = 1.5625    ...... 1
0.5625    x 2 = 1.125     ...... 1
0.125     x 2 = 0.25      ...... 0
0.25      x 2 = 0.5       ...... 0
0.5       x 2 = 1         ...... 1
结果为得到的整数位按照从左往右排列   1011001

将计算后的 000 111 序列拼在一起就得到转换的二进制 1101010.10110011101010.10110011101010.1011001,用科学计数法表示为1.1010101011001∗261.1010101011001*2^61.1010101011001∗26,算出了二进制,接下来需要将它存进计算机中,在Javascript中不区分整数和小数,数字统一按照双精度浮点数的要求来存储,主要包含下面规则:

  • 使用 8bytes(64bits)8bytes(64bits)8bytes(64bits) 存储双精度浮点数
  • 存储小数用科学计数法表示的数据
  • 第一位表示符号,后 111111 位表示指数,指数按照补位运算,即直接 102310231023 加指数位
  • 剩余 525252 位表示小数点后的尾数,超过 525252 位的部分 000 舍 111 进

由于指数位的 11 位不包括符号位,那么为了达到正负指数的效果,就引入了指数的偏移值。

用图表示如下:

我们将转换好的二进制数按规则放进内存中,首先 106.6953125106.6953125106.6953125 是正数,所以符号位应该为 111, 000 表示正号, 111 表示负号(图片应该为显示 000,笔误了)

二进制 1.1010101011001∗261.1010101011001*2^61.1010101011001∗26 指数是 666(这里需要加上偏移量1023),转成二进制为 100000001011000000010110000000101,指数位要求放置二进制的补码,而补码的计算规则是:

  • 正数的补码就是其本身
  • 负数的补码是在其原码的基础上, 符号位不变, 其余各位取反, 最后+1. (即在反码的基础上+1)
[+1] = [00000001]原 = [00000001]反

[-1] = [10000001]原 = [11111110]反

所以图片指数位应该填

尾数位部分直接将小数转换后的二进制填入即可

数字最后就是以这样的形式存入计算机中

why 0.1 + 0.2 !== 0.3?

在理解数字存储的原理后,我们再来分析下为什么 0.1+0.2!==0.30.1 + 0.2 !== 0.30.1+0.2!==0.3

首先将 0.10.10.1 0.20.20.2 0.30.30.3 分别转换成二进制

0.1 x 2 = 0.2  ...... 0
0.2 x 2 = 0.4  ...... 0
0.4 x 2 = 0.8  ...... 0
0.8 x 2 = 1.6  ...... 1
0.6 x 2 = 1.2  ...... 1
0.2 x 2 = 0.4  ...... 0
0.4 x 2 = 0.8  ...... 0
0.8 x 2 = 1.6  ...... 1
0.6 x 2 = 1.2  ...... 1
得到的整数位按照从左往右排列   000110011...

0.1→0.00011(0011)∞

0.2 x 2 = 0.4  ...... 0
0.4 x 2 = 0.8  ...... 0
0.8 x 2 = 1.6  ...... 1
0.6 x 2 = 1.2  ...... 1
0.2 x 2 = 0.4  ...... 0
0.4 x 2 = 0.8  ...... 0
0.8 x 2 = 1.6  ...... 1
0.6 x 2 = 1.2  ...... 1
0.2 x 2 = 0.4  ...... 0
得到的整数位按照从左往右排列   001100110...

0.2→0.00110(0110)∞

0.3 x 2 = 0.6  ...... 0
0.6 x 2 = 1.2  ...... 1
0.2 x 2 = 0.4  ...... 0
0.4 x 2 = 0.8  ...... 0
0.8 x 2 = 1.6  ...... 1
0.6 x 2 = 1.2  ...... 1
0.2 x 2 = 0.4  ...... 0
0.4 x 2 = 0.8  ...... 0
0.8 x 2 = 1.6  ...... 1
得到的整数位按照从左往右排列   010011001...

0.3→0.01001(1001)∞

统一用科学计数法表示为

0.1→0.00011(0011)∞→1.(1001)∞∗2−4

0.2→0.00110(0110)∞→1.(1001)∞∗2−3

0.3→0.01001(1001)∞→1.(0011)∞∗2−2

放入计算机中双精度浮点数存储,最后的红色表示超过尾数位的二进制,即需要做舍0进1处理

则经过64位双精度存储后,二进制如下表示
0.1→0−01111111011−(1001)121010

0.2→0−01111111100−(1001)121010

0.3→0−01111111101−(0011)120011

此时 0.1+0.20.1 + 0.20.1+0.2 可以看出与 0.30.30.3 不相等

这就是数字在计算机中运算往往会给人带来一些“惊喜”!

总结

到此这篇关于JS中内存与变量存储的文章就介绍到这了,更多相关JS内存与变量存储内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript变量作用域及内存问题实例分析

    本文实例讲述了JavaScript变量作用域及内存问题.分享给大家供大家参考,具体如下: 学习要点: 1.变量及作用域 2.内存问题 JavaScript的变量与其他语言的变量有很大区别.JavaScript变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. 一.变量及作用域 1.基本类型和引用类型的值 ECMAScript变量可能包含两种不同的数据类型的值:

  • 简单谈谈javascript中的变量、作用域和内存问题

    [变量] [1]定义:可变的量,相当于给一个不定的数据起了一个外号.变量是存储信息的容器. [2]特性:js中的变量是松散类型的,可以保存任何类型的数据.它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. [3]变量声明:变量可以在声明时赋值,但不能有其他操作,如+=.-=等 var a = 2;//是正确的 var a += 2;//是错误的 var a = 2++;//是错误的,++只能用于变量

  • javascript 的变量、作用域和内存问题

    javascript 的变量.作用域和内存问题 (一)JavaScript变量可以用来保存两种类型的值:基本类型值和引用类型值.基本类型的值源自以下5种基本数据类型:Undefined.Null.Boolean.Number和 String.基本类型值和引用类型值具有以下特点: 1.基本类型值在内存中占据固定大小的空间,因此被保存在栈内存中: 2.从一个变量向另一个变量复制基本类型的值,会创建这个值的一个副本: 3.引用类型的值是对象,保存在堆内存中: 4.包含引用类型值的变量实际上包含的并不是

  • JavaScript 变量、作用域及内存

    JS变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已; 由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变; 一 变量及作用域 1.基本类型和引用类型 // JS变量包含两种不同的数据类型的值:基本类型值和引用类型值; // 1.基本类型值:保存在栈内存中的简单数据段;即这种值完全保存在内存中的一个位置; // 基本类型值包含:Undefined|Null|Boolean|Number|String; // 这

  • js变量、作用域及内存详解

    基本类型值有:undefined,NUll,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,他们的值保存在栈空间,我们通过按值来访问的. (1)值类型:数值.布尔值.null.undefined. (2)引用类型:对象.数组.函数. 如果赋值的是引用类型的值,则必须在堆内存中为这个值分配空间.由于这种值的大小不固定(对象有很多属性和方法),因此不能把他们保存到栈内存中.但内存地址大小是固定的,因此可以将内存地址保存在栈内存中. <script type="

  • 详细谈谈JS中的内存与变量存储

    目录 前言 JS神奇的Number 存储数字 二进制如何转换 why 0.1 + 0.2 !== 0.3? 总结 前言 在前端领域,因为大部分在跟UI打交道,内存管理是最容易被忽略的部分.如果不懂内存,就看不清很多问题的本质,也难以写出更合格的代码,本次带大家走进内存的世界. JS神奇的Number 案例一:金额的计算与传递 18.9 * 100 =1889.9999999999998 案例二:违背的数学定律 0.1 + 0.2 === 0.3 // false (function (a, b,

  • 详细谈谈MYSQL中的COLLATE是什么

    前言 在mysql中执行show create table <tablename>指令,可以看到一张表的建表语句,example如下: CREATE TABLE `table1` ( `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `field1` text COLLATE utf8_unicode_ci NOT NULL COMMENT '字段1', `field2` varchar(128) COLLATE utf8_unicode_ci

  • 简单谈谈JS中的正则表达式

    1.正则表达式包括两部分 ①定义正则表达式的规则: ②正则表达式的模式(i/g/m): 2.声明正则表达式 ① 字面量声明: var reg = /表达式规则/表达式模式: eg:var reg = /white/g: ② 使用new关键字: var reg = new RegExp("表达式规则","表达式模式") eg: var reg = new RegExp("white","g"): 3.正则表达式的三种模式 ① g

  • 在JS中如何使用css变量详解

    在JS中如何使用css变量 使用:export关键字在less/scss文件中导出一个js对象. $menuText:#bfcbd9; $menuActiveText:#409EFF; $subMenuActiveText:#f4f4f5; // $menuBg:#304156; $menuBg:#304156; $menuHover:#263445; $subMenuBg:#1f2d3d; $subMenuHover:#001528; $backWhite:#ffffff; $sideBarW

  • 中高级前端必须了解的JS中的内存管理(推荐)

    前言 像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()用于分配内存和释放内存. 而对于JavaScript来说,会在创建变量(对象,字符串等)时分配内存,并且在不再使用它们时"自动"释放内存,这个自动释放内存的过程称为垃圾回收. 因为自动垃圾回收机制的存在,让大多Javascript开发者感觉他们可以不关心内存管理,所以会在一些情况下导致内存泄漏. 内存生命周期 JS 环境中分配的内存有如下声明周期: 1.内存分配:当我们申明变量.函数.对象的时候

  • 谈谈js中的prototype及prototype属性解释和常用方法

    prototype是javascript中笔记难理解的一部分内容,下面通过几个关键知识点给大家讲解js中的prototype.具体内容请看下文详情. 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A. 2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法 例子: function People(name) { this.name=na

  • 浅析Node.js中的内存泄漏问题

    这篇文章是由Mozilla的Identity团队带来的 A Node.JS Holiday Season系列文章的首篇,该团队上个月发布了 Persona的第一个测试版本.在开发Persona时我们构建了一系列的工具,包括了从调试,到本地化,到依赖管理以及更多的方面.在这一系列的文章中我们将与社区分享我们的经验和这些工具,这对任何想用node.js建立一个高可用性服务的人都很有用.我们希望您能喜欢这些文章,并期待看到您的想法和贡献. 我们将从一篇关于Node.js的实质性问题:内存泄漏的主题文章

  • 谈谈JS中的!!

    !!一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是只能是true或者false. var a: var b=!!a; a默认是undefined.!a是true,!!a则是false,所以b的值是false,而不再是undefined,也非其它值,主要是为后续判断提供便利. 因为javascript是弱类型的语言(变量没有固定的数据类型)所以有时需要强制转换为相应的类型,类似的如: a=parseInt("1234″) a="1234″-0 //转换为数字 b

  • 详细谈谈Java中long和double的原子性

    目录 前言 JVM中对long的操作是不是原子操作? 为什么对long的操作不是原子的? 在硬件,操作系统,JVM都是64位的情况下呢? 总结 前言 java中基本类型中,long和double的长度都是8个字节,32位(4字节)处理器对其读写操作无法一次完成,那么,JVM,long和double是原子性的吗? JVM中对long的操作是不是原子操作? 首先,通过一段程序对long的原子性进行判断.测试程序如下: public class LongAtomTest implements Runn

  • js中各种类型的变量在if条件中是true还是false

    js的弱类型让人感觉很多东西都比较迷惑,例如变量在if条件中到底是true还是false,如果在强类型语言中将一个非boolean类型的变量放在if条件中时,是需要进行类型转换的,但是js不需要,下面来进行测试,测试常见的变量类型在if条件中的表现 !function test1(){ <span style="color:#ff0000;">var a,b=-1,c= 1,d= 0,e=null,f=undefined,g='',h="";</s

随机推荐