WebSocket系列之JavaScript中數字數據如何轉換為二進制數據

MASAILA 發布于2019-08-22 15:50 / 2995人閱讀

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

概述

本文主要通過對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類型相關的二進制處理與轉換操作，有興趣的同學可以關注留意下相關內容。

部分參考資料

阮一峰老師關于字節序的介紹

云服務器 GPU云服務器 jsp轉換為數字 asp轉換為數字 php字符轉換為數字 js如何二進制轉換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93799.html

WebSocket系列之字符串如何與二進制數據間進行互相轉換

摘要：總結通過使用和，我們能夠在數據和二進制數據中進行互相轉換。下一篇系列相關的博客，將會介紹如何通過來向后端傳遞二進制數據，以及如何處理通過收到的二進制數據。概述上一篇博客我們說到了如何進行數字類型（如Short、Int、Long類型）如何在JavaScript中進行二進制轉換，如果感興趣的可以可以閱讀本系列第二篇博客——WebSocket系列之JavaScript中數字數據如何轉換為...

stackfing 2019-08-22 15:53 評論0 收藏0
WebSocket系列之二進制數據設計與傳輸

摘要：本文作為系列的第四篇內容，將會用一個簡單的聊天應用把整個傳輸二進制數據類型的內容連接起來，讓用戶對整個傳輸二進制數據的方法有個了解。如何發送二進制數據通過如何設計一個二進制協議一章，我們知道了如何定義傳輸的二進制數據格式。概述通過前三篇博客，我們能夠了解在通過WebSocket發送數據之前，我們需要傳遞的數據是如何變成ArrayBuffer二進制數據的；在我們收到二進制數據之后，我...

amc 2019-08-22 15:55 評論0 收藏0
WebSocket系列之如何建立和維護可靠的連接

摘要：與此同時，后端服務的中也有相關的長連接維持時長設置。如何快速的恢復連接根據上面的操作方案，我們會在網絡異常時斷開連接。概述通過前四篇博客，相信讀者對于WebSocket的使用和數據（不論是ArrayBuffer還是String）傳輸都有了一個深刻的了解。現在我們來介紹下，我在使用WebSocket時，連接相關模塊遇到的一些共性問題，以及我們如何解決這些問題。本文作為WebSock...

BetaRabbit 2019-08-22 16:03 評論0 收藏0
WebSocket系列之基礎知識入門篇

摘要：概述本文是系列的第一篇，主要介紹相關的基礎協議知識和。客戶端收到響應后，立即發起下一次的請求。收到消息通過事件來接收消息。類型則需要傳遞一個對象作為參數，相關的內容也將在本系列第二篇中進行介紹。概述本文是WebSocket系列的第一篇，主要介紹WebSocket相關的基礎協議知識和API。由于WebSocket的相關介紹在MDN中分布較亂，初學者不太容易入門，因此通過本文將相關基礎...

Yuqi 2019-08-22 15:46 評論0 收藏0
JavaScript 工作原理之五－深入理解 WebSockets 和帶有 SSE 機制的HTTP/

摘要：幀協議讓我們深入了解下幀協議。目前可用的值該幀接續前面一幀的有效載荷。該幀包含二進制數據。幀有以下幾類長度表示有效載荷的長度。數據分片有效載荷數據可以被分成多個獨立的幀。接收端會緩沖這些幀直到位有值。原文請查閱這里，略有改動，本文采用知識共享署名 3.0 中國大陸許可協議共享，BY Troland。本系列持續更新中，Github 地址請查閱這里。這是 JavaScript 工作原...

lijinke666 2019-08-22 17:08 評論0 收藏0