当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript操作二进制数据：ArrayBuffer与Blob全解析

JavaScript操作二进制数据：ArrayBuffer与Blob全解析

2025-09-29 23:48:38 0浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript如何操作二进制数据？ ArrayBuffer与Blob详解》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

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 允许你以指定字节序（大端或小端）读写数据，适合处理协议数据或需要兼容性的场景。

创建 DataView：

let dataView = new DataView(buffer);

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

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);