怎样使用JavaScript操作二进制数据（如ArrayBuffer, Blob）？-js教程-PHP中文网

怎样使用JavaScript操作二进制数据（如ArrayBuffer, Blob）？

幻影之瞳

发布： 2025-10-05 18:16:01

原创

720人浏览过

JavaScript通过ArrayBuffer、TypedArray、DataView和Blob处理二进制数据。1. ArrayBuffer表示固定长度的二进制缓冲区，需配合Uint8Array等视图读写；不同视图共享缓冲区，字节序影响值解析。2. DataView支持指定字节序（大端或小端）进行精确读写，适用于跨平台数据交换。3. Blob用于文件级操作，可由ArrayBuffer创建并生成下载链接。4. 利用FileReader将Blob转为ArrayBuffer，反之可用new Blob()构造器转换。这些对象广泛应用于文件操作、网络通信、音视频处理等场景，实现高效二进制数据操控。

怎样使用javascript操作二进制数据（如arraybuffer, blob）？

JavaScript 提供了多种方式来处理二进制数据，主要通过 ArrayBuffer、TypedArray、DataView 和 Blob 等对象实现。这些工具适用于文件操作、网络通信（如 WebSocket）、音视频处理、Canvas 图像数据等场景。

1. 使用 ArrayBuffer 和 TypedArray 处理内存中的二进制数据

ArrayBuffer 表示一段固定长度的二进制数据缓冲区。它本身不能直接读写，需通过 TypedArray（如 Uint8Array、Int32Array）或 DataView 来操作。

创建 ArrayBuffer：

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

使用 TypedArray 操作数据：

let uint8 = new Uint8Array(buffer);
uint8[0] = 42; // 写入一个字节
console.log(uint8[0]); // 输出: 42

不同视图共享同一缓冲区：

let int32 = new Int32Array(buffer);
int32[0] = 1; // 写入一个 32 位整数（占 4 字节）
console.log(uint8[0]); // 可能为 1，取决于字节序

2. 使用 DataView 精确控制读写（支持跨平台字节序）

DataView 允许你以指定字节序（大端或小端）读写数据，适合处理协议数据或需要兼容性的场景。

立即学习“Java免费学习笔记（深入）”；

创建 DataView：

let dataView = new DataView(buffer);

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

查看详情

写入和读取指定格式的数据：

dataView.setUint16(0, 255, true); // 在偏移 0 处写入 uint16，小端序
let value = dataView.getUint16(0, true); // 读取，结果为 255

3. 将二进制数据转为 Blob（用于文件下载或上传）

Blob 表示不可变的原始二进制数据，常用于文件操作。

从 ArrayBuffer 创建 Blob：

let blob = new Blob([buffer], { type: 'application/octet-stream' });

创建可下载的文件链接：

let url = URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'data.bin';
a.click();
URL.revokeObjectURL(url); // 释放内存

4. 在 Blob 和 ArrayBuffer 之间转换

常用于读取用户上传的文件或准备发送到服务器的数据。

Blob 转 ArrayBuffer：

let fileReader = new FileReader();
fileReader.onload = function(e) {
let arrayBuffer = e.target.result;
// 可进一步用 DataView 或 TypedArray 处理
};
fileReader.readAsArrayBuffer(blob);

ArrayBuffer 转 Blob：

let newBlob = new Blob([arrayBuffer], { type: 'application/json' });

基本上就这些。掌握 ArrayBuffer 配合 TypedArray 或 DataView 的使用，再结合 Blob 进行文件级操作，就能灵活处理大多数前端二进制任务。常见于图片压缩、音频分析、WebSocket 二进制消息、PDF 生成等场景。

以上就是怎样使用JavaScript操作二进制数据（如ArrayBuffer, Blob）？的详细内容，更多请关注php中文网其它相关文章！