從 0/1 到 0-255 — 理解 Byte 的誕生
如果你曾經好奇：「Blob 明明是二進制資料，只有 0 和 1，為什麼討論時又會冒出 0-255 這個範圍？」
這個問題觸及了計算機科學中 「編碼 (Encoding)」 與 「資料單位」 的核心觀念。
簡單的答案是：0 和 1 實在太小了，電腦為了方便管理，把每 8 個 0/1 打包成一組，這一組就叫做「Byte (位元組)」。而這一組所能表示的數字範圍，剛好就是 0 到 255。
一、 從 Bit 到 Byte：打包的藝術
電腦底層確實只有 Bit (位元)，也就是開關（0 或 1）。但如果我們傳輸資料只講 0 和 1，效率會極低且人類無法理解。
> **比喻**
就像你去便利商店買米，你不會跟店員說：「我要 50,000 粒米」，你會說：「我要 1 包 米」。
在電腦世界裡，「1 包」的標準規格就是 8 粒米 (8 Bits)。這包米就叫做 Byte (位元組)。
單位定義
| 單位 | 定義 | 範圍 |
|---|---|---|
| 1 Bit | 1 個開關 | 0 或 1 |
| 1 Byte | 8 個 Bits 排在一起 | 0 ~ 255 |
二、 數學解密：為什麼是 255？
當我們把 8 個開關排成一列，會有多少種組合？
每個位置都有 2 種可能（0 或 1），總共有 8 個位置：
$$ 2^8 = 256 \text{ 種狀態} $$
這代表一組 Byte 可以組出 256 種狀態。如果用十進位數字來表示：
- 最小的狀態 (全都是 0)：
00000000= 0 - 最大的狀態 (全都是 1)：
11111111= 255
二進位轉十進位計算
二進位的 11111111 換算成十進位是這樣加的：
位置: 7 6 5 4 3 2 1 0
權重: 128 64 32 16 8 4 2 1
值: 1 1 1 1 1 1 1 1
總和 = 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = 255所以，0 到 255 是電腦儲存資料的「最小可操作單位」的數值範圍。
三、 Blob 與 0-255 的關係
回到主題：Blob 是一大塊二進制資料。
雖然它的本質是長長一串的 010101...，但在程式語言（JavaScript, Python, C++）眼中，它被視為一個 「由 0-255 數字組成的超長陣列」。
舉個例子：一張圖片的 Blob
假設你有一個很小的紅色像素點圖片，它在 Blob 裡的樣子可能長這樣（簡化版）：
| 記憶體位置 | 二進位 (電腦看的) | 十進位 (程式碼看的) | 意義 |
|---|---|---|---|
| Byte 1 | 11111111 | 255 | 紅色 (R) |
| Byte 2 | 00000000 | 0 | 綠色 (G) |
| Byte 3 | 00000000 | 0 | 藍色 (B) |
| Byte 4 | 11111111 | 255 | 透明度 (Alpha) |
這就是為什麼你在 CSS 設定顏色時會看到 rgb(255, 0, 0)。因為電腦儲存顏色時，就是用一個 Byte (0-255) 來存紅色，一個 Byte 來存綠色，以此類推。
四、 在 JavaScript 中親眼看到它
在 Web 開發中，Blob 通常是包起來的，你看不到內容。但如果你把它「切開」變成 ArrayBuffer，再用 Uint8Array 去讀取，就會看到滿滿的 0-255。
Uint8Array 名詞解釋
- Unsigned: 無符號（沒有負數，只有正數）
- Int: 整數
- 8: 8 位元 (8 bits)
- Array: 陣列
翻譯： 「由 8 個 bit 組成的正整數陣列」，也就是 0-255 的陣列。
實際操作範例
你可以試著在瀏覽器的 Console 跑這段程式碼：
// 1. 建立一個簡單的 Blob (裡面只有文字 "Hi")
const blob = new Blob(["Hi"]);
// 2. 把 Blob 轉成 ArrayBuffer (取得記憶體控制權)
blob.arrayBuffer().then((buffer) => {
// 3. 用 "8位元視角" 去看這塊記憶體
const view = new Uint8Array(buffer);
console.log(view);
// 輸出: Uint8Array(2) [72, 105]
// 為什麼是 72 和 105？
// 因為在 ASCII 編碼中：
// 'H' = 72
// 'i' = 105
// 這些數字都在 0-255 之間！
});TypedArray 家族
除了 Uint8Array，JavaScript 還提供其他「視角」：
| 類型 | 每個元素大小 | 數值範圍 | 用途 |
|---|---|---|---|
Uint8Array | 1 Byte | 0 ~ 255 | 處理原始二進位、圖片像素 |
Uint16Array | 2 Bytes | 0 ~ 65535 | 音訊採樣 |
Uint32Array | 4 Bytes | 0 ~ 4,294,967,295 | 大整數運算 |
Float32Array | 4 Bytes | 浮點數 | WebGL 頂點座標 |
五、 為什麼這很重要？
理解了 Blob 其實就是一堆 0-255 的數字後，你就能做到：
- 安全驗證：透過檢查檔案開頭的數字（Magic Numbers），判斷使用者上傳的是否真的是圖片
- 檔案修復：有些損壞的檔案只是多了幾個錯誤的 Byte，你可以直接修正
- 自定義格式：你甚至可以發明自己的檔案格式，例如前 4 個 Byte 存版本號，後 4 個 Byte 存作者 ID
總結
| 概念 | 說明 |
|---|---|
| Bit | 最小單位，0 或 1，太細微難以操作 |
| Byte | 8 個 Bit 綁成一組，數值範圍 0-255 |
| Blob | 成千上萬個 Byte 堆疊起來的大物體 |
| Uint8Array | 用 0-255 視角去讀取二進制資料的工具 |
當我們說 Blob 是二進制資料時，意思是它底層是 0/1；但當我們去「讀取」或「處理」它時，我們是把它當成一連串 0-255 的數字在看。