如何利用JavaScript操作二进制数据，如ArrayBuffer和Blob？-js教程-PHP中文网

如何利用JavaScript操作二进制数据，如ArrayBuffer和Blob？

紅蓮之龍

发布： 2025-10-09 13:23:01

原创

736人浏览过

ArrayBuffer是二进制数据容器，需通过TypedArray或DataView视图操作；Blob用于封装文件类二进制对象，可与ArrayBuffer互转，适用于文件传输与网络通信。

如何利用javascript操作二进制数据，如arraybuffer和blob？

JavaScript 提供了多种方式来操作二进制数据，特别是在处理文件、网络传输、图像音频处理等场景中，ArrayBuffer 和 Blob 是核心工具。下面介绍它们的基本用法和常见操作。

ArrayBuffer：底层二进制数据容器

ArrayBuffer 表示一段固定长度的二进制数据缓冲区。它本身不能直接读写，需要通过视图（如 Uint8Array、DataView）来访问。

例如创建一个 8 字节的缓冲区并写入数字：

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

如果需要更灵活地读写不同格式的数据（如整数、浮点数），可以使用 DataView：

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

const dataView = new DataView(buffer);
dataView.setFloat32(0, 3.14); // 在偏移 0 处写入 float
console.log(dataView.getFloat32(0)); // 输出: 3.14

TypedArray：便捷的类型化数组

TypedArray（如 Uint8Array、Int16Array）是 ArrayBuffer 的常用视图。它们让操作二进制数据更直观。

从字符串转换为二进制数据：

const encoder = new TextEncoder();
const uint8Array = encoder.encode("Hello");
console.log(uint8Array); // Uint8Array [72, 101, 108, 108, 111]

再转回字符串：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

const decoder = new TextDecoder();
const text = decoder.decode(uint8Array);
console.log(text); // 输出: Hello

Blob：表示不可变的二进制大对象

Blob 常用于文件操作，可以包含任意类型的二进制数据，比如图片、视频或下载内容。

创建一个文本 Blob：

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
console.log(blob.size); // 输出: 13
console.log(blob.type); // 输出: text/plain

创建一个包含多种数据类型的 Blob（如 JSON）：

const jsonData = { name: "Alice", age: 25 };
const jsonBlob = new Blob([JSON.stringify(jsonData)], { type: "application/json" });

ArrayBuffer 与 Blob 的相互转换

在实际开发中，经常需要在这两种格式之间转换。

将 ArrayBuffer 转为 Blob：

const buffer = new Uint8Array([72, 101, 108, 108, 111]);
const blob = new Blob([buffer], { type: "text/plain" });

将 Blob 转为 ArrayBuffer：

blob.arrayBuffer().then(buffer => {
const arr = new Uint8Array(buffer);
console.log(arr); // 可以看到原始字节
});

基本上就这些。掌握 ArrayBuffer、TypedArray 和 Blob 的使用，就能高效处理前端中的大多数二进制任务，比如文件上传、Canvas 图像导出、WebSocket 二进制通信等。关键是理解它们之间的关系：ArrayBuffer 是数据容器，TypedArray 是访问方式，Blob 是用于文件和网络的封装。不复杂但容易忽略细节。

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