二进制操作：ArrayBuffer与TypedArray

ArrayBuffer提供固定长度的二进制数据存储，TypedArray作为视图以特定格式（如Int32Array、Uint8Array）读写该数据，二者结合实现高效二进制操作，适用于文件读写、网络通信和音视频处理等场景。

在JavaScript中处理二进制数据时，ArrayBuffer 和 TypedArray 是核心工具。它们为操作原始二进制数据提供了高效的方式，常用于文件读写、网络通信（如WebSocket）、音视频处理等场景。

ArrayBuffer：二进制数据的容器

ArrayBuffer 表示一段固定长度的二进制数据缓冲区。它本身不能直接读写，只能通过视图来操作，比如 TypedArray 或 DataView。

创建一个 ArrayBuffer 很简单：

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

你可以检查它的大小：

console.log(buffer.byteLength); // 8

一旦创建，ArrayBuffer 的大小不可变。如果需要扩展，必须创建新的 ArrayBuffer 并复制数据。

TypedArray：ArrayBuffer 的视图

TypedArray 不是一个单一类型，而是一组视图类型的统称，它们可以将 ArrayBuffer 中的二进制数据以特定格式解析出来。常见的类型包括：

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

使用 TypedArray 操作 ArrayBuffer 示例：

PHPOA开源协同OA办公系统源码

PHPOA办公系统是适用于中小型企业的通用型协同OA管理软件，融合了PHPOA长期从事管理软件开发的丰富经验与先进技术，该系统采用领先的B/S(浏览器/服务器)操作方式，使得网络办公不受地域限制PHPOA使用敏捷MVC开发框架，支持多种模块分布式开发，统一布局，界面简洁不失严肃。

2632

查看详情

const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer); // 将buffer按32位整数解析
view[0] = 42;
view[1] = 84;
console.log(view); // [42, 84]

这里，8字节的 buffer 被两个 32 位整数填满。每个元素占 4 字节。

多种视图共享同一块内存

同一个 ArrayBuffer 可以被多个不同类型的 TypedArray 视图引用。这在需要按不同方式解释同一段数据时非常有用。

例如：

const buffer = new ArrayBuffer(8);
const intView = new Int32Array(buffer);
const byteView = new Uint8Array(buffer);

intView[0] = 0x12345678;
intView[1] = 0xABCDEF00;

console.log(byteView); // [120, 86, 52, 18, 0, 239, 205, 171]

上面代码中，intView 写入了两个32位整数，而 byteView 将同样的数据以字节形式展示。注意字节序问题：小端还是大端会影响结果顺序。

实际应用场景

常见用途包括：

• 从 File API 读取文件后，获取 ArrayBuffer 进行解析
• WebSocket 接收二进制消息时使用 ArrayBuffer
• Canvas 图像数据处理（getImageData）返回的是 Uint8ClampedArray
• WebAssembly 内存交互

例如读取文件片段：

const file = document.querySelector('input[type="file"]').files[0];
const reader = new FileReader();
reader.onload = function(e) {
  const buffer = e.target.result; // ArrayBuffer
  const bytes = new Uint8Array(buffer);
  console.log(bytes.slice(0, 10)); // 查看前10个字节
};
reader.readAsArrayBuffer(file);

基本上就这些。ArrayBuffer 提供存储，TypedArray 提供访问方式，两者结合让 JavaScript 也能高效处理底层二进制数据。不复杂但容易忽略细节，比如类型长度和字节序。掌握它们对高性能或系统级前端开发很有帮助。

以上就是二进制操作：ArrayBuffer与TypedArray的详细内容，更多请关注php中文网其它相关文章！