红宝书第二十二讲：详解JavaScript类型化数组与二进制数据处理

---

红宝书第二十二讲：详解JavaScript类型化数组与二进制数据处理

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、为什么需要类型化数组？

普通JavaScript数组（Array）灵活但低效，不适合处理大量二进制数据（如文件、图像）。类型化数组（Typed Arrays）直接操作内存，解决以下痛点：

• 精准控制内存：每个元素类型和大小固定，避免无谓消耗¹²
• 高效操作二进制：适合WebGL、音视频处理等场景¹

---

二、核心概念：ArrayBuffer与视图

1. ArrayBuffer：内存中的二進制数据容器（不可直接操作）

   // 创建16字节的缓冲区
   const buffer = new ArrayBuffer(16); 

2. 视图（View）：通过指定格式访问缓冲区数据

   • 类型化数组（如Int32Array）→ 处理固定类型数据²
   • DataView → 灵活操作不同字节序和偏移²

flowchart TD
    ArrayBuffer(示例:16字节内存) --> Int32Array[视图1: 4个Int32数]
    ArrayBuffer --> Uint8Array[视图2: 16个Uint8数]
    ArrayBuffer --> DataView[视图3: 按需读写任意位置]

---

三、类型化数组的常见类型

类型	字节	范围	典型用途
Int8Array	1	-128 ~ 127	处理有符号整数
Uint8Array	1	0 ~ 255	图像像素数据（RGBA）
Float32Array	4	≈±3.4×10³⁸	3D图形（WebGL顶点数据）
BigInt64Array	8	-2⁶³ ~ 2⁶³-1	处理大整数

²

示例1：用Uint8Array处理图像像素

// 创建3字节缓冲区（RGB颜色值）
const buffer = new ArrayBuffer(3); 
const pixels = new Uint8Array(buffer);

// 设置红色(255,0,0)
pixels[0] = 255; // 第一个字节→R通道
pixels[1] = 0;   // 第二个字节→G通道
pixels[2] = 0;   // 第三个字节→B通道

---

四、DataView：处理复杂字节顺序

DataView可灵活指定字节偏移（byteOffset）和字节序（大端/小端），适合跨平台数据传输²¹。

示例2：读写混合数据类型

const buffer = new ArrayBuffer(8); // 8字节内存
const view = new DataView(buffer);

// 在第0字节写入32位整数（大端序）
view.setInt32(0, 1024, true); // true表示小端序

// 读取后8位字符串（UTF-8）
const strDecoder = new TextDecoder(); 
console.log(strDecoder.decode(new Uint8Array(buffer, 4))); // 根据内容输出

---

五、字节序（Endianness）：大端与小端

• 大端序（Big-Endian） → 高位字节在前（如0x1234存储为12 34）
• 小端序（Little-Endian） → 低位字节在前（如0x1234存储为34 12）

示例3：验证字节序

const buffer = new ArrayBuffer(2);
const view = new DataView(buffer);

view.setInt16(0, 0x1234, true); // 小端模式写入
console.log(view.getUint8(0).toString(16)); // 输出34 → 低位在前

---

六、实际应用：文件读取与处理

// 读取文件并转为类型化数组
const fileInput = document.querySelector('input[type="file"]');
fileInput.onchange = async (e) => {
  const file = e.target.files[0];
  const buffer = await file.arrayBuffer();
  const uint8Array = new Uint8Array(buffer);
  
  // 处理文件内容...
};

---

目录：总目录
上篇文章：红宝书第二十一讲：详解JavaScript的模块化（CommonJS与ES Modules）

下篇文章：红宝书第二十三讲：详解DOM事件模型：冒泡与事件委托

脚注

---

1. 《JavaScript高级程序设计（第5版）》讨论类型化数组的历史与在WebGL中的应用 ↩
2. 《JavaScript高级程序设计（第5版）》的表格详细描述了各类型化数组的字节及范围 ↩