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

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

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

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

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

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

以Long類型為例，說明JavaScript中如何表示Long類型并且如何將其轉(zhuǎn)換為二進制數(shù)據(jù)。

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

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

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

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

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

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

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

ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數(shù)據(jù)緩沖區(qū)。

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

下面我們通過一個示例來簡單介紹下ArrayBuffer相關(guān)操作。

const buffer = new ArrayBuffer(8);

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

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

看完了存儲數(shù)據(jù)的ArrayBuffer，我們來看下數(shù)據(jù)讀寫的DataView。

DataView 視圖是一個可以從 ArrayBuffer 對象中讀寫多種數(shù)值類型的底層接口，在讀寫時不用考慮平臺字節(jié)序問題。

這個是在MDN中關(guān)于DataView的介紹。DataView提供了大量的API接口來進行數(shù)據(jù)的讀和寫操作，我們在后三章將會舉例進行說明。但是，首先我們得先看下說明中提到的字節(jié)序問題。

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

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

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

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

對于單字節(jié)對象如Byte類型數(shù)據(jù)而言，沒有字節(jié)序一說。

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

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

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

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

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

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

DataView還提供了許多的API接口來進行其他數(shù)據(jù)類型的處理，如無符號型，浮點數(shù)等。他們的使用方法和上面介紹的API相同，我們在這里就不一一進行介紹了，希望了解更多API接口的讀者可以查看MDN文檔。

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

首先，我們需要理解Long數(shù)據(jù)類型的結(jié)構(gòu)，它是由一個高位的4個Byte和低位的4個Byte組成的數(shù)據(jù)類型。因為Long類型表示的范圍比Number類型大，所以我們在JavaScript中是使用了兩個Number類型（即Int類型）的對象來表示Long類型數(shù)據(jù)，相關(guān)的具體細節(jié)可以見我之前的博客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); // 采用大端字節(jié)序放置
dataView.setInt32(4, long.low);

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

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

import Long from "long";

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


// 數(shù)據(jù)寫入過程

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

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

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

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位

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

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

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

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