首页 > 文章 > 前端

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

时间：2025-10-06 16:59:27 264浏览收藏

在JavaScript中，`ArrayBuffer`和`Blob`是处理二进制数据的核心工具，尤其在文件操作、网络传输和多媒体处理等场景下至关重要。`ArrayBuffer`作为固定长度的二进制数据容器，自身无法直接读写，需借助`TypedArray`（如`Uint8Array`）或`DataView`进行操作，实现对二进制数据的灵活访问和类型化处理。`Blob`则用于封装文件类型的二进制对象，支持包含各种类型的数据，如图片、视频和JSON。本文将深入探讨`ArrayBuffer`和`Blob`的基本用法、相互转换，以及在实际开发中的应用，助你掌握前端二进制数据处理的关键技术，提升文件上传、Canvas图像导出和WebSocket通信等场景的开发效率。理解`ArrayBuffer`的数据存储、`TypedArray`的便捷访问和`Blob`的文件封装，是高效处理前端二进制任务的基础。

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：

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]

再转回字符串：

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解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！