ArrayBuffer与类型化数组：JS二进制处理全解析

本文深入解析了JavaScript中处理二进制数据的三大核心机制——ArrayBuffer作为底层内存容器、类型化数组（如Uint8Array、Float32Array等）提供高效且类型安全的数据视图、DataView则赋予开发者精确控制字节序和混合读写的灵活性；无论是图像音频处理、WebSocket实时通信、文件解析还是跨平台协议开发，这套组合都构成了现代Web高性能二进制操作的基石，让前端也能像系统语言一样精准驾驭原始字节。

在JavaScript中处理二进制数据时，ArrayBuffer 和 类型化数组（Typed Arrays） 是核心工具。它们让开发者可以高效地操作原始二进制数据，适用于图像处理、音频操作、WebSocket通信、文件读取（如File API）等场景。

ArrayBuffer：二进制数据的容器

ArrayBuffer 是一个通用的固定长度的二进制数据缓冲区。它本身不能直接读写，只能通过“视图”来访问其中的数据，最常见的视图就是类型化数组。

创建一个 ArrayBuffer 很简单：

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

这个 buffer 就像一块未格式化的内存区域，你不能直接知道里面存的是整数、浮点数还是其他内容，需要借助视图解释它。

类型化数组：ArrayBuffer 的视图

类型化数组是 ArrayBuffer 的“解释器”。它们将缓冲区中的字节按照特定的数据类型进行解读。常见的类型化数组包括：

• Int8Array：8位有符号整数
• Uint8Array：8位无符号整数
• Int16Array：16位有符号整数
• Uint16Array：16位无符号整数
• Int32Array：32位有符号整数
• Uint32Array：32位无符号整数
• Float32Array：32位浮点数
• Float64Array：64位浮点数

使用类型化数组访问 ArrayBuffer：

const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer); // 将buffer解释为8个无符号字节

view[0] = 42;
view[1] = 255;

console.log(view[0]); // 42
console.log(view[1]); // 255

多个类型化数组可以共享同一个 ArrayBuffer，从不同角度读写同一块内存：

const buffer = new ArrayBuffer(8);
const intView = new Int32Array(buffer);   // 每项4字节，共2项
const byteView = new Uint8Array(buffer);  // 每项1字节，共8项

intView[0] = 0x12345678;

console.log(byteView[0].toString(16)); // 78 （小端序）
console.log(byteView[1].toString(16)); // 56
console.log(byteView[2].toString(16)); // 34
console.log(byteView[3].toString(16)); // 12

这说明了字节序的影响——在小端系统中，低位字节存储在低地址。

DataView：更灵活的二进制读写方式

如果你需要精确控制字节序或混合读取不同类型的数据，DataView 是更好的选择。它提供了显式指定字节序的方法。

const buffer = new ArrayBuffer(8);
const dataView = new DataView(buffer);

dataView.setInt32(0, 0x12345678, true);  // 第0字节开始写入32位整数，true表示小端序
dataView.setFloat32(4, 3.14, false);     // 第4字节开始写入float，false表示大端序

console.log(dataView.getInt32(0, true).toString(16));  // 12345678
console.log(dataView.getFloat32(4, false).toFixed(2)); // 3.14

DataView 特别适合处理网络协议、自定义二进制格式等需要跨平台一致性的场景。

基本上就这些。ArrayBuffer 提供底层存储，类型化数组提供高效访问，DataView 提供灵活控制。掌握它们，你就拥有了在JavaScript中操作二进制数据的能力。

好了，本文到此结束，带大家了解了《ArrayBuffer与类型化数组：JS二进制处理全解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！