概述
本文重要经由历程对JavaScript中数字数据与二进制数据之间的转换，让读者能够相识在JavaScript中怎样对数字范例（包含但不限于Number范例）举行处置惩罚。
二进制数据在一样平常的JavaScript中很少碰到，然则当你运用WebSocket与后端举行数据交互时，就有能够会用到二进制的数据格式。因而，为了更好的明白本系列中以后宣布的关于WebSocket传输二进制相干的内容，我们有必要相识二进制数据在JavaScript中是怎样举行操纵和存储的。
本文内容重要为：
- JavaScript中怎样操纵与存储二进制数据——ArrayBuffer存储组织相干基础知识以及对应的DataView相干数据范例基础知识和和API接口，同时对字节序题目举行引见。
- 以Int和Short为例，申明JavaScript中的数字数据怎样转换为二进制数据。
- 以Long范例为例，申明JavaScript中怎样示意Long范例而且怎样将其转换为二进制数据。
- 怎样将二进制数据中转换为JavaScript中的数字数据。
本文与WebSocket并没有太强关联，不过作为在WebSocket中通报二进制数据的基础知识贮备，因而放入了此系列当中。
假如读者对WebSocket并不相识，或许说不明白它的运用场景和细节，能够浏览我的前一篇博客——WebSocket系列之基础知识入门篇。
假如读者想相识String范例与二进制之间的处置惩罚和转换，能够于都WebSocket系列稍后宣布的文章（文章宣布后会替代此段）。
假如读者想相识在WebSocket中怎样举行二进制的通报和剖析，能够浏览WebSocket系列稍后宣布的文章（文章宣布后会替代此段）。
JavaScript中怎样存储和操纵二进制数据
相识了为何须要运用二进制数据，我们来看下，在JavaScript中怎样存储和操纵二进制数据。
ArrayBuffer
起首，我们要引见下在JavaScript中用来存储二进制数据的ArrayBuffer。
ArrayBuffer 对象用来示意通用的、牢固长度的原始二进制数据缓冲区。
在MDN的文档中，我们能够看到ArrayBuffer的引见。它是在JavaScript中用来举行二进制数据存储的一种数据对象。
下面我们经由历程一个示例来简朴引见下ArrayBuffer相干操纵。
const buffer = new ArrayBuffer(8);
buffer.byteLength; // 效果为8上面的示例经由历程建立一个长度为8Byte的二进制数据缓冲区。缓冲区只是一个数据存储的空间，怎样对这个存储空间举行读取，完整取决于运用者。比方：8个字节能够当做是2个Int范例的数据，也能够是一个Long范例的数据，或许4个Short型的数据。
DataView
看完了存储数据的ArrayBuffer，我们来看下数据读写的DataView。
DataView 视图是一个能够从
ArrayBuffer对象中读写多种数值范例的底层接口，在读写时不必斟酌平台字节序题目。
这个是在MDN中关于DataView的引见。DataView供应了大批的API接口来举行数据的读和写操纵，我们在后三章将会举例举行申明。然则，起首我们得先看下申明中提到的字节序题目。
字节序
在现有的计算机系统中，有两种字节序：
- 大端字节序：高位在前，低位在后。相符人类浏览习气。
- 小端字节序：低位在前，高位在后。相符计算机读取习气。
上面所说的递次均是针对多字节对象而言，如Int范例，Long范例。以Int范例数据0x1234为例，假如是大端字节序，那末数据从人类对数值的一般写法上来看就是0x1234；假如是小端字节序，那末从人类对数值的一般写法上来看，应当写成0x3412。
关于单字节对象如Byte范例数据而言，没有字节序一说。
在差别的平台中，能够运用差别的字节序，这就是所谓的字节序题目。DataView所谓的在读写时不须要斟酌平台字节序题目是指：同时运用DataView举行写入和读取的数据保持一致。
JavaScript中的数字数据怎样转换为二进制数据
对ArrayBuffer和DataView有了一个也许的相识，下面让我们来看下它是怎样举行二进制数据操纵的。
本章，我以Short范例和Int范例为例，引见下相干操纵步骤。
let buffer = new ArrayBuffer(6); // 初始化6个Byte的二进制数据缓冲区
let dataView = new DataView(buffer);
dataView.setInt16(0, 3); // 从第0个Byte位置最先，安排一个数字为3的Short范例数据(占2 Byte)
dataView.setInt32(2, 15); // 从第2个Byte位置最先，安排一个数字为15的Short范例数据(占4 Byte)经由历程上面的示例，我们一共初始化了6个Byte的存储空间，运用1个Short范例（占2 Byte）和一个Int范例（占4 Byte）的数据举行添补。
DataView还供应了很多的API接口来举行其他数据范例的处置惩罚，如无符号型，浮点数等。他们的运用方法和上面引见的API雷同，我们在这里就不逐一举行引见了，愿望相识更多API接口的读者能够检察MDN文档。
JavaScript中怎样示意Long范例而且怎样将其转换为二进制数据
经由历程DataView供应的API接口，我们晓得了怎样处置惩罚Short范例、Int范例、Float范例和Double范例。那末，假如是关于Long范例这类原生API中没有供应处置惩罚函数的数据范例，我们应当怎样处置惩罚呢？
起首，我们须要明白Long数据范例的组织，它是由一个高位的4个Byte和低位的4个Byte构成的数据范例。由于Long范例示意的局限比Number范例大，所以我们在JavaScript中是运用了两个Number范例（即Int范例）的对象来示意Long范例数据，相干的详细细节能够见我之前的博客Long.js源码剖析与进修。
明白了JavaScript中怎样存储Long范例，我们就晓得假如对其举行存储。
import Long from 'long';
let long = Long.fromString('123');
let buffer = new ArrayBuffer(8);
let dataView = new DataView(buffer);
dataView.setInt32(0, long.high); // 采纳大端字节序安排
dataView.setInt32(4, long.low);经由历程上面的示例，我们将一个Long范例的数据拆分成了两个Int范例的数据，依据大端字节序放入到了ArrayBuffer中。同理，假如是想依据小端字节序安排，只须要将数据举行部份处置惩罚后再放入即可，在此我就不过量引见了。
怎样将二进制数据中转换为JavaScript中的数据范例
当你晓得了怎样将数据转换为ArrayBuffer中存储的二进制数据后，就能够简朴推测出怎样举行反向操纵——将数据从ArrayBuffer中读取出来，再转换成JavaScript中经常使用数据范例。
import Long from 'long';
let buffer = new ArrayBuffer(14); // 初始化14个Byte的二进制数据缓冲区
let dataView = new DataView(buffer);
let long = Long.fromString('123');
// 数据写入历程
dataView.setInt16(0, 3); // 从第0个Byte位置最先，安排一个数字为3的Short范例数据(占2 Byte)
dataView.setInt32(2, 15); // 从第2个Byte位置最先，安排一个数字为15的Short范例数据(占4 Byte)
dataView.setInt32(6, long.high); // 采纳大端字节序安排
dataView.setInt32(10, long.low);
// 数据读取历程
let shortNumber = dataView.getInt16(0);
let intNumber = dataView.getInt32(2);
let longNumber = Long.fromBits(dataView.getInt32(10), dataView.getInt32(6)); // 依据大端字节序读取，该组织函数入参依次为：低16位，高16位经由历程上面的示例，我们将一串二进制数据转换成为了JavaScript中通用的数据范例。
总结
经由历程运用ArrayBuffer和DataView，我们能够疾速的将数字数据从二进制转换为JavaScript经常使用数据范比方Int、Short等；同时，我们也能够将这些数据范例转换为二进制数据。有了这些基础知识，我们就能够明白在以后的博客中讲到的关于运用WebSocket举行二进制数据通报的历程和处置惩罚逻辑。
下一篇博客我们将引见String范例相干的二进制处置惩罚与转换操纵，有兴致的同砚能够关注注意下相干内容。
