JavaScript中的ArrayBuffer与TypedArray有何关联？

ArrayBuffer是二进制数据容器，TypedArray提供访问方式。例如创建8字节缓冲区后，可用Uint8Array视图以不同格式读写同一内存，共享数据并提升性能。

ArrayBuffer与TypedArray在JavaScript中紧密配合，用于处理二进制数据。ArrayBuffer是底层的原始二进制数据容器，而TypedArray则是访问和操作这些数据的“视图”。

ArrayBuffer 是二进制数据的容器

ArrayBuffer 表示一段固定长度的连续内存区域，无法直接读写。它只是一个数据块的占位符，常用于网络传输（如WebSocket）或文件操作（如File API）。

例如：

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

TypedArray 提供访问 ArrayBuffer 的方式

TypedArray 本身不是单一类型，而是包括 Int8Array、Uint32Array、Float64Array 等多种视图构造函数。它们将 ArrayBuffer 中的字节解释为特定类型的数组，从而可以读写具体数值。

例如：

const view = new Uint8Array(buffer); // 将buffer当作8位无符号整数数组

view[0] = 42; // 可以像普通数组一样赋值

同一个 ArrayBuffer 可以被多个不同类型的 TypedArray 或 DataView 引用，实现对同一段内存的不同解读方式。

关联与协作示例

通过组合使用两者，可以在内存层面高效操作数据：

const buffer = new ArrayBuffer(16);

const int32View = new Int32Array(buffer);

int32View[0] = 42; // 写入一个32位整数（占用4字节）

const int8View = new Int8Array(buffer);

console.log(int8View[0]); // 输出 42（低字节部分）

console.log(int8View[3]); // 可能输出 0（高字节是否为0取决于字节序）

这说明：TypedArray 不存储数据，而是“解释” ArrayBuffer 中的数据。改变一个视图会影响其他视图，因为它们共享同一块内存。

基本上就这些。ArrayBuffer 负责分配内存，TypedArray 负责定义如何读写这段内存中的数据。这种设计兼顾了性能与灵活性，适合图像处理、音频操作、WebGL等场景。