总结
TypedArray（类型化数组）是 JavaScript 中用于操作二进制数据的特殊数组。- 它提供了对
ArrayBuffer 的结构化访问，用于处理原始二进制数据，如图像、音频、网络协议等。 - 常见类型包括：
Int8Array、Uint8Array、Int16Array、Uint16Array、Float32Array、Float64Array 等。 TypedArray 是 ArrayBuffer 的“视图”，不直接操作内存，而是通过 DataView 或 TypedArray 本身。
为什么需要 TypedArray？
- JavaScript 原生数组（
Array）是动态类型、自动扩容的，不适合直接操作二进制数据。 TypedArray 提供了更高效、更底层的访问方式，适用于以下场景：
- WebSocket 传输
- Canvas 图像处理
- 音频/视频处理
- 文件读取（如通过
FileReader） - WebGL 数据传递
核心概念
1. ArrayBuffer
- 表示原始的二进制缓冲区（一块内存区域）。
- 不能直接操作，需要通过
TypedArray 或 DataView 来访问。
const buffer = new ArrayBuffer(16);
2. TypedArray
- 提供对
ArrayBuffer 的类型化访问。 - 每种类型对应不同的字节数。
| 类型名 | 每个元素大小（字节） | 描述 |
|---|
Int8Array | 1 | 有符号 8 位整数 |
Uint8Array | 1 | 无符号 8 位整数 |
Int16Array | 2 | 有符号 16 位整数 |
Uint16Array | 2 | 无符号 16 位整数 |
Int32Array | 4 | 有符号 32 位整数 |
Uint32Array | 4 | 无符号 32 位整数 |
Float32Array | 4 | 32 位浮点数 |
Float64Array | 8 | 64 位浮点数 |
3. DataView
- 提供对
ArrayBuffer 的灵活访问，可以按任意偏移和类型读写数据。
const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);
view.setInt32(0, 0x12345678, true);
示例代码
创建并操作 TypedArray
const buffer = new ArrayBuffer(8);
const intView = new Int32Array(buffer);intView[0] = 100;
intView[1] = 200;console.log(intView);
多视图访问同一内存
const buffer = new ArrayBuffer(8);
const intView = new Int32Array(buffer);
const byteView = new Uint8Array(buffer);intView[0] = 0x12345678;
console.log(byteView);
注意事项
TypedArray 是类数组对象，具有 length、buffer、byteOffset 等属性。- 不支持
push、pop 等方法，但可以使用 set()、subarray() 等方法操作。 - 所有操作都是基于底层内存的，需要注意字节顺序（大端/小端）。
TypedArray 可以通过 slice()、map()、filter() 等方法创建新数组。
使用场景
| 场景 | 应用说明 |
|---|
| 图像处理 | 通过 Canvas 获取像素数据，使用 Uint8ClampedArray 操作 |
| 音频处理 | 使用 AudioBuffer 和 Float32Array 处理音频采样 |
| WebSocket 通信 | 接收和发送二进制数据（如 ArrayBuffer） |
| 文件读取 | 使用 FileReader.readAsArrayBuffer() 读取文件 |
| WebGL 渲染 | 向 GPU 传递顶点数据等 |
