阅读 1884
理解JS的内存与变量存储

理解JS的内存与变量存储

在前端领域,因为大部分在跟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中到底是怎么存储的?

存储数字

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

二进制如何转换

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

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

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

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.6953125 乘以 22 直到不存在小数位为止,并计下每次乘后的整数位结果,

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
复制代码

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

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

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

用图表示如下:

Screen Shot 2021-08-17 at 12.20.14 PM.png

我们将转换好的二进制数按规则放进内存中,首先 106.6953125106.6953125 是正数,所以符号位应该为 0000 表示正号, 11 表示负号

Screen Shot 2021-08-17 at 12.20.22 PM.png

二进制 1.1010101011001261.1010101011001*2^6 指数是 66(这里需要加上偏移量1023),转成二进制为 1000000010110000000101,指数位要求放置二进制的补码,而补码的计算规则是:

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

[-1] = [10000001]原 = [11111110]反
复制代码

所以图片指数位应该填

Screen Shot 2021-08-17 at 12.20.47 PM.png

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

Screen Shot 2021-08-17 at 12.21.37 PM.png

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

why 0.1 + 0.2 !== 0.3?

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

首先将 0.10.1 0.20.2 0.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.10.00011(0011)0.1 \rightarrow 0.00011(0011)_\infty

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.20.00110(0110)0.2 \rightarrow 0.00110(0110)_\infty

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.30.01001(1001)0.3 \rightarrow 0.01001(1001)_\infty

统一用科学计数法表示为

0.10.00011(0011)1.(1001)240.1 \rightarrow 0.00011(0011)_\infty \rightarrow 1.(1001)_\infty*2^{-4}

0.20.00110(0110)1.(1001)230.2 \rightarrow 0.00110(0110)_\infty \rightarrow 1.(1001)_\infty*2^{-3}

0.30.01001(1001)1.(0011)220.3 \rightarrow 0.01001(1001)_\infty \rightarrow 1.(0011)_\infty*2^{-2}

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

Screen Shot 2021-08-17 at 12.30.01 PM.png

Screen Shot 2021-08-17 at 12.30.27 PM.png

Screen Shot 2021-08-17 at 12.32.27 PM.png

则经过64位双精度存储后,二进制如下表示

0.1001111111011(1001)1210100.1 \rightarrow 0-01111111011-(1001)_{12}1010

0.2001111111100(1001)1210100.2 \rightarrow 0-01111111100-(1001)_{12}1010

0.3001111111101(0011)1200110.3 \rightarrow 0-01111111101-(0011)_{12}0011

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

8.png

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

结束语

如果该文对您有帮助的话,请点个赞哦😯

文中若有错误,欢迎指正;若您有补充,欢迎留言。

文章分类
前端
文章标签