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

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

2025-10-14 18:48:35 0浏览收藏

在JavaScript中，处理二进制数据至关重要，尤其在文件操作、网络传输和多媒体处理等场景下。本文将深入探讨`ArrayBuffer`和`Blob`这两个核心工具。`ArrayBuffer`作为底层的二进制数据容器，需要通过`TypedArray`或`DataView`等视图进行操作，实现对二进制数据的读写。而`Blob`则用于封装文件类的二进制大对象，常用于处理图片、视频等文件，并支持与`ArrayBuffer`之间的相互转换。掌握`ArrayBuffer`和`Blob`的用法，能有效提升前端处理二进制数据的能力，例如实现文件上传、Canvas图像导出和WebSocket二进制通信等功能。本文将详细介绍它们的基本概念、用法和相互转换方法，助你轻松驾驭JavaScript中的二进制数据处理。

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学习网公众号！