JavaScript DataView：初學者的指南
你好，未來的JavaScript大師！今天，我們將踏上一段令人興奮的旅程，探索DataView對象的世界。如果你從未聽說過它們，別擔心——在本教程結束時，你將能夠像專業人士一樣處理二進制數據！
DataView是什麼？
在我們深入細節之前，讓我們從基礎開始。想像你是一名偵探，剛收到一個裝滿二進制數據的神秘包裹。你該如何理解它？這就是DataView出場的時候！
DataView對象讓你能在ArrayBuffer中讀取和寫入多種數字類型，無論計算機的字節序如何（別擔心，我們稍後會解釋這個）。這就像擁有一個二進制數據的萬用翻譯器！
語法
讓我們看看如何創建一個DataView對象：
new DataView(buffer [, byteOffset [, byteLength]])別被這個嚇到了！其實它比看起來簡單。讓我們分解一下：
-
buffer：這是我們的ArrayBuffer，我們二進制數據的容器。 -
byteOffset（可選）：我們想在緩衝區的哪裡開始讀取。 -
byteLength（可選）：我們想在視图中包含多少個字節。
示例：創建一個DataView對象
讓我們捋起袖子，創建我們的第一個DataView對象：
// 首先，我們創建一個16字節的ArrayBuffer
const buffer = new ArrayBuffer(16);
// 現在，讓我們創建一個覆蓋整個緩衝區的DataView
const view1 = new DataView(buffer);
// 讓我們創建另一個從第12個字節開始，長度為4個字節的DataView
const view2 = new DataView(buffer, 12, 4);
console.log(view1.byteLength); // 輸出：16
console.log(view2.byteLength); // 輸出：4在這個示例中，我們首先創建了一個16字節的ArrayBuffer。把它想像成一幅16像素的空白的畫布。然後，我們創建了兩個DataView對象：
-
view1覆蓋整個緩衝區。 -
view2從第12個字節開始，覆蓋最後4個字節。
這就像有兩個不同的放大鏡來觀察我們的數據！
JavaScript DataView屬性
DataView帶有一些方便的屬性。讓我們看看：
| 屬性 | 描述 |
|---|---|
| buffer | 返回DataView引用的ArrayBuffer |
| byteLength | 返回DataView的字節長度 |
| byteOffset | 返回DataView從其ArrayBuffer開始的字節偏移 |
以下是如何使用這些屬性的方法：
const buffer = new ArrayBuffer(16);
const view = new DataView(buffer, 2, 12);
console.log(view.buffer); // ArrayBuffer(16)
console.log(view.byteLength); // 12
console.log(view.byteOffset); // 2在這個示例中，我們創建了一個從我們緩衝區的第2個字節開始，長度為12個字節的DataView。這些屬性幫我們確認這些細節。
JavaScript DataView方法
現在，讓我們來到令人興奮的部分——方法！DataView提供了讀取和寫入不同類型數字的方法。這裡是最常用方法的表格：
| 方法 | 描述 |
|---|---|
| getInt8(byteOffset) | 在指定的字節偏移處獲取一個有符號的8位整數 |
| getUint8(byteOffset) | 在指定的字節偏移處獲取一個無符號的8位整數 |
| getInt16(byteOffset [, littleEndian]) | 在指定的字節偏移處獲取一個有符號的16位整數 |
| getUint16(byteOffset [, littleEndian]) | 在指定的字節偏移處獲取一個無符號的16位整數 |
| getInt32(byteOffset [, littleEndian]) | 在指定的字節偏移處獲取一個有符號的32位整數 |
| getUint32(byteOffset [, littleEndian]) | 在指定的字節偏移處獲取一個無符號的32位整數 |
| getFloat32(byteOffset [, littleEndian]) | 在指定的字節偏移處獲取一個32位浮點數 |
| getFloat64(byteOffset [, littleEndian]) | 在指定的字節偏移處獲取一個64位浮點數 |
對於這些get方法，也有對應的set方法。
讓我們看看一些方法的使用：
const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);
// 讓我們寫入一些數據
view.setInt16(0, 42);
view.setFloat32(2, 3.14);
// 現在，讓我們讀取這些數據
console.log(view.getInt16(0)); // 輸出：42
console.log(view.getFloat32(2)); // 輸出：3.140000104904175在這個示例中，我們在偏移量0處寫入了一個16位整數（42），在偏移量2處寫入了一個32位浮點數（3.14）。然後，我們讀回這些值。注意浮點數的值不是精確的3.14——這是由於浮點數在二進制中是如何存儲的。
字節序的謎團
記得上次我提到過的字節序嗎？現在是揭開這個謎題的時候了！字節序指的是將字節組合成較大數字值的順序。有兩種類型：
- 小端序：最低有效字節在前。
- 大端序：最高有效字節在前。
想像一下寫數字：123是大端序（最高有效位在前），而321是小端序。
DataView的優點在於，它讓你可以在讀取或寫入多個字節的值時指定字節序。讓我們看一個例子：
const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setUint16(0, 0x1234, true); // true代表小端序
view.setUint16(2, 0x5678, false); // false（或省略）代表大端序
console.log(view.getUint16(0, true)); // 0x1234
console.log(view.getUint16(0, false)); // 0x3412
console.log(view.getUint16(2, true)); // 0x7856
console.log(view.getUint16(2, false)); // 0x5678在這個示例中，我們在不同的字節序下寫入相同的值，然後以两种字節序讀取它們。這就像能夠從左到右和從右到左閱讀一本科書！
結論
恭喜你！你剛剛踏入了DataView的世界。我們已經介紹了創建DataView對象、使用它們的屬性和方法來操作數據。我們甚至揭開了字節序的謎題！
記住，處理二進制數據可能最初看起來很嚇人，但有了DataView，你手中就有一個強大的工具。這就像為二進制數據擁有一把瑞士軍刀——多用途、精確且非常有用。
在你繼續你的JavaScript旅程時，你會發現，當你處理像文件格式或網絡協議這樣的複雜二進制數據結構時，DataView是非常有價值的。持續練習，很快你就能像真正的編碼偵探一樣操作位和字節！
Credits: Image by storyset