摘要：以和為例，說(shuō)明中的數(shù)字?jǐn)?shù)據(jù)如何轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)。對(duì)象用來(lái)表示通用的固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。中的數(shù)字?jǐn)?shù)據(jù)如何轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)對(duì)和有了一個(gè)大概的了解，下面讓我們來(lái)看下它是如何進(jìn)行二進(jìn)制數(shù)據(jù)操作的。

本文主要通過(guò)對(duì)JavaScript中數(shù)字?jǐn)?shù)據(jù)與二進(jìn)制數(shù)據(jù)之間的轉(zhuǎn)換，讓讀者能夠了解在JavaScript中如何對(duì)數(shù)字類(lèi)型（包括但不限于Number類(lèi)型）進(jìn)行處理。

二進(jìn)制數(shù)據(jù)在日常的JavaScript中很少遇到，但是當(dāng)你使用WebSocket與后端進(jìn)行數(shù)據(jù)交互時(shí)，就有可能會(huì)用到二進(jìn)制的數(shù)據(jù)格式。因此，為了更好的理解本系列中之后發(fā)布的關(guān)于WebSocket傳輸二進(jìn)制相關(guān)的內(nèi)容，我們有必要了解二進(jìn)制數(shù)據(jù)在JavaScript中是如何進(jìn)行操作和存儲(chǔ)的。

本文內(nèi)容主要為：

JavaScript中如何操作與存儲(chǔ)二進(jìn)制數(shù)據(jù)——ArrayBuffer存儲(chǔ)結(jié)構(gòu)相關(guān)基礎(chǔ)知識(shí)以及對(duì)應(yīng)的DataView相關(guān)數(shù)據(jù)類(lèi)型基礎(chǔ)知識(shí)和和API接口，同時(shí)對(duì)字節(jié)序問(wèn)題進(jìn)行介紹。

以Int和Short為例，說(shuō)明JavaScript中的數(shù)字?jǐn)?shù)據(jù)如何轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)。

以L(fǎng)ong類(lèi)型為例，說(shuō)明JavaScript中如何表示Long類(lèi)型并且如何將其轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)。

如何將二進(jìn)制數(shù)據(jù)中轉(zhuǎn)換為JavaScript中的數(shù)字?jǐn)?shù)據(jù)。

本文與WebSocket并無(wú)太強(qiáng)關(guān)聯(lián)，不過(guò)作為在WebSocket中傳遞二進(jìn)制數(shù)據(jù)的基礎(chǔ)知識(shí)儲(chǔ)備，因此放入了此系列當(dāng)中。

如果讀者對(duì)WebSocket并不了解，或者說(shuō)不明白它的使用場(chǎng)景和細(xì)節(jié)，可以閱讀我的前一篇博客——WebSocket系列之基礎(chǔ)知識(shí)入門(mén)篇。

如果讀者想了解String類(lèi)型與二進(jìn)制之間的處理和轉(zhuǎn)換，可以于都WebSocket系列稍后發(fā)布的文章（文章發(fā)布后會(huì)替換此段）。

如果讀者想了解在WebSocket中如何進(jìn)行二進(jìn)制的傳遞和解析，可以閱讀WebSocket系列稍后發(fā)布的文章（文章發(fā)布后會(huì)替換此段）。

了解了為什么需要使用二進(jìn)制數(shù)據(jù)，我們來(lái)看下，在JavaScript中如何存儲(chǔ)和操作二進(jìn)制數(shù)據(jù)。

首先，我們要介紹下在JavaScript中用來(lái)存儲(chǔ)二進(jìn)制數(shù)據(jù)的ArrayBuffer。

ArrayBuffer 對(duì)象用來(lái)表示通用的、固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。

在MDN的文檔中，我們能夠看到ArrayBuffer的介紹。它是在JavaScript中用來(lái)進(jìn)行二進(jìn)制數(shù)據(jù)存儲(chǔ)的一種數(shù)據(jù)對(duì)象。

下面我們通過(guò)一個(gè)示例來(lái)簡(jiǎn)單介紹下ArrayBuffer相關(guān)操作。

const buffer = new ArrayBuffer(8);

buffer.byteLength; // 結(jié)果為8

上面的示例通過(guò)創(chuàng)建一個(gè)長(zhǎng)度為8Byte的二進(jìn)制數(shù)據(jù)緩沖區(qū)。緩沖區(qū)只是一個(gè)數(shù)據(jù)存儲(chǔ)的空間，如何對(duì)這個(gè)存儲(chǔ)空間進(jìn)行讀取，完全取決于使用者。例如：8個(gè)字節(jié)可以當(dāng)成是2個(gè)Int類(lèi)型的數(shù)據(jù)，也可以是一個(gè)Long類(lèi)型的數(shù)據(jù)，或者4個(gè)Short型的數(shù)據(jù)。

看完了存儲(chǔ)數(shù)據(jù)的ArrayBuffer，我們來(lái)看下數(shù)據(jù)讀寫(xiě)的DataView。

DataView 視圖是一個(gè)可以從 ArrayBuffer 對(duì)象中讀寫(xiě)多種數(shù)值類(lèi)型的底層接口，在讀寫(xiě)時(shí)不用考慮平臺(tái)字節(jié)序問(wèn)題。

這個(gè)是在MDN中關(guān)于DataView的介紹。DataView提供了大量的API接口來(lái)進(jìn)行數(shù)據(jù)的讀和寫(xiě)操作，我們?cè)诤笕聦?huì)舉例進(jìn)行說(shuō)明。但是，首先我們得先看下說(shuō)明中提到的字節(jié)序問(wèn)題。

在現(xiàn)有的計(jì)算機(jī)體系中，有兩種字節(jié)序：

大端字節(jié)序：高位在前，低位在后。符合人類(lèi)閱讀習(xí)慣。

小端字節(jié)序：低位在前，高位在后。符合計(jì)算機(jī)讀取習(xí)慣。

上面所說(shuō)的順序均是針對(duì)多字節(jié)對(duì)象而言，如Int類(lèi)型，Long類(lèi)型。以Int類(lèi)型數(shù)據(jù)0x1234為例，如果是大端字節(jié)序，那么數(shù)據(jù)從人類(lèi)對(duì)數(shù)值的通常寫(xiě)法上來(lái)看就是0x1234；如果是小端字節(jié)序，那么從人類(lèi)對(duì)數(shù)值的通常寫(xiě)法上來(lái)看，應(yīng)該寫(xiě)成0x3412。

對(duì)于單字節(jié)對(duì)象如Byte類(lèi)型數(shù)據(jù)而言，沒(méi)有字節(jié)序一說(shuō)。

在不同的平臺(tái)中，可能使用不同的字節(jié)序，這就是所謂的字節(jié)序問(wèn)題。DataView所謂的在讀寫(xiě)時(shí)不需要考慮平臺(tái)字節(jié)序問(wèn)題是指：同時(shí)使用DataView進(jìn)行寫(xiě)入和讀取的數(shù)據(jù)保持一致。

對(duì)ArrayBuffer和DataView有了一個(gè)大概的了解，下面讓我們來(lái)看下它是如何進(jìn)行二進(jìn)制數(shù)據(jù)操作的。

本章，我以Short類(lèi)型和Int類(lèi)型為例，介紹下相關(guān)操作步驟。

let buffer = new ArrayBuffer(6); // 初始化6個(gè)Byte的二進(jìn)制數(shù)據(jù)緩沖區(qū)
let dataView = new DataView(buffer);

dataView.setInt16(0, 3); // 從第0個(gè)Byte位置開(kāi)始，放置一個(gè)數(shù)字為3的Short類(lèi)型數(shù)據(jù)(占2 Byte)
dataView.setInt32(2, 15); // 從第2個(gè)Byte位置開(kāi)始，放置一個(gè)數(shù)字為15的Short類(lèi)型數(shù)據(jù)(占4 Byte)

通過(guò)上面的示例，我們一共初始化了6個(gè)Byte的存儲(chǔ)空間，使用1個(gè)Short類(lèi)型（占2 Byte）和一個(gè)Int類(lèi)型（占4 Byte）的數(shù)據(jù)進(jìn)行填充。

DataView還提供了許多的API接口來(lái)進(jìn)行其他數(shù)據(jù)類(lèi)型的處理，如無(wú)符號(hào)型，浮點(diǎn)數(shù)等。他們的使用方法和上面介紹的API相同，我們?cè)谶@里就不一一進(jìn)行介紹了，希望了解更多API接口的讀者可以查看MDN文檔。

通過(guò)DataView提供的API接口，我們知道了如何處理Short類(lèi)型、Int類(lèi)型、Float類(lèi)型和Double類(lèi)型。那么，如果是對(duì)于Long類(lèi)型這種原生API中沒(méi)有提供處理函數(shù)的數(shù)據(jù)類(lèi)型，我們應(yīng)該如何處理呢？

首先，我們需要理解Long數(shù)據(jù)類(lèi)型的結(jié)構(gòu)，它是由一個(gè)高位的4個(gè)Byte和低位的4個(gè)Byte組成的數(shù)據(jù)類(lèi)型。因?yàn)長(zhǎng)ong類(lèi)型表示的范圍比Number類(lèi)型大，所以我們?cè)贘avaScript中是使用了兩個(gè)Number類(lèi)型（即Int類(lèi)型）的對(duì)象來(lái)表示Long類(lèi)型數(shù)據(jù)，相關(guān)的具體細(xì)節(jié)可以見(jiàn)我之前的博客Long.js源碼分析與學(xué)習(xí)。

理解了JavaScript中如何存儲(chǔ)Long類(lèi)型，我們就知道如果對(duì)其進(jìn)行存儲(chǔ)。

import Long from "long";

let long = Long.fromString("123");
let buffer = new ArrayBuffer(8);
let dataView = new DataView(buffer);

dataView.setInt32(0, long.high); // 采用大端字節(jié)序放置
dataView.setInt32(4, long.low);

通過(guò)上面的示例，我們將一個(gè)Long類(lèi)型的數(shù)據(jù)拆分成了兩個(gè)Int類(lèi)型的數(shù)據(jù)，按照大端字節(jié)序放入到了ArrayBuffer中。同理，如果是想按照小端字節(jié)序放置，只需要將數(shù)據(jù)進(jìn)行部分處理后再放入即可，在此我就不過(guò)多介紹了。

當(dāng)你知道了如何將數(shù)據(jù)轉(zhuǎn)換為ArrayBuffer中存儲(chǔ)的二進(jìn)制數(shù)據(jù)后，就能夠簡(jiǎn)單推測(cè)出如何進(jìn)行反向操作——將數(shù)據(jù)從ArrayBuffer中讀取出來(lái)，再轉(zhuǎn)換成JavaScript中常用數(shù)據(jù)類(lèi)型。

import Long from "long";

let buffer = new ArrayBuffer(14); // 初始化14個(gè)Byte的二進(jìn)制數(shù)據(jù)緩沖區(qū)
let dataView = new DataView(buffer);
let long = Long.fromString("123");


// 數(shù)據(jù)寫(xiě)入過(guò)程

dataView.setInt16(0, 3); // 從第0個(gè)Byte位置開(kāi)始，放置一個(gè)數(shù)字為3的Short類(lèi)型數(shù)據(jù)(占2 Byte)
dataView.setInt32(2, 15); // 從第2個(gè)Byte位置開(kāi)始，放置一個(gè)數(shù)字為15的Short類(lèi)型數(shù)據(jù)(占4 Byte)

dataView.setInt32(6, long.high); // 采用大端字節(jié)序放置
dataView.setInt32(10, long.low);

// 數(shù)據(jù)讀取過(guò)程

let shortNumber = dataView.getInt16(0);
let intNumber = dataView.getInt32(2);

let longNumber = Long.fromBits(dataView.getInt32(10), dataView.getInt32(6)); // 根據(jù)大端字節(jié)序讀取，該構(gòu)造函數(shù)入?yún)⒁来螢椋旱?6位，高16位

通過(guò)上面的示例，我們將一串二進(jìn)制數(shù)據(jù)轉(zhuǎn)換成為了JavaScript中通用的數(shù)據(jù)類(lèi)型。

通過(guò)使用ArrayBuffer和DataView，我們能夠快速的將數(shù)字?jǐn)?shù)據(jù)從二進(jìn)制轉(zhuǎn)換為JavaScript常用數(shù)據(jù)類(lèi)型如Int、Short等；同時(shí)，我們也可以將這些數(shù)據(jù)類(lèi)型轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)。有了這些基礎(chǔ)知識(shí)，我們就能夠理解在之后的博客中講到的關(guān)于使用WebSocket進(jìn)行二進(jìn)制數(shù)據(jù)傳遞的過(guò)程和處理邏輯。

下一篇博客我們將介紹String類(lèi)型相關(guān)的二進(jìn)制處理與轉(zhuǎn)換操作，有興趣的同學(xué)可以關(guān)注留意下相關(guān)內(nèi)容。

阮一峰老師關(guān)于字節(jié)序的介紹