js今日理解 blob和arrayBuffer 二进制数据

用户6698206112982
222 阅读3分钟

Blob 和 ArrayBuffer 都是 JavaScript 中用于处理二进制数据的对象，但它们的用途、特性和使用场景有所不同。以下是它们的区别和相同点的详细分析：

相同点

  1. 二进制数据：Blob 和 ArrayBuffer 都用于表示二进制数据，可以处理诸如文件、图像、音频等非文本数据。
  2. Web API 相关：两者都是 Web 平台的一部分，常用于浏览器环境中，例如处理文件上传、下载或操作流数据。
  3. 不可直接操作：它们本身不提供直接操作数据内容的方法，通常需要结合其他工具（如 FileReader、TextDecoder 或 TypedArray）来读取或处理数据。

区别

特性BlobArrayBuffer
定义Blob（Binary Large Object）表示不可变的二进制数据块，通常用于表示文件或类似文件的数据。ArrayBuffer 是一个通用的、固定长度的二进制数据缓冲区，表示原始字节序列。
可变性不可变（immutable），创建后无法直接修改其内容。可变（mutable），可以通过 TypedArray 或 DataView 修改其内容。
用途常用于处理文件（如上传、下载）、流数据，或需要整体传输的数据（如通过网络发送）。常用于需要直接操作字节级数据的场景，如处理图像数据、音频处理或 WebGL 数据。
大小和内容大小可以动态确定，内容可以是多种类型（如字符串、ArrayBuffer、其他 Blob）。固定大小，创建时指定字节长度，内容是连续的字节序列。
操作方式提供 slice() 方法来提取部分数据，需通过 FileReader 或 Response 等转换为其他格式（如 ArrayBuffer 或文本）。通过 TypedArray（如 Uint8Array）或 DataView 直接操作字节数据。
内存管理更适合处理大型文件或流式数据，内存管理由浏览器优化。更适合低级字节操作，内存分配固定，需手动管理。
典型场景文件上传、下载、创建 URL（URL.createObjectURL）、处理流（如 ReadableStream）。处理二进制协议、WebGL 缓冲区、音视频数据解码、加密算法等。

详细说明

  1. Blob：

    • Blob 是更高层次的抽象，设计目的是处理类似文件的数据。它可以包含多种类型的数据（例如字符串、ArrayBuffer 或其他 Blob），并且可以与文件系统交互。

    • Blob 通常与 File 对象相关，File 是 Blob 的子类，增加了文件特有的元数据（如文件名、最后修改时间）。

    • 示例：

      javascript
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const url = URL.createObjectURL(blob); // 创建可下载的 URL

  2. ArrayBuffer：

    • ArrayBuffer 是低层次的二进制数据表示，提供了固定长度的字节数组。它本身只是一个内存块，无法直接读取或修改数据，必须通过 TypedArray（如 Uint8Array、Int16Array）或 DataView 操作。

    • 示例：

      javascript
const buffer = new ArrayBuffer(16); // 创建 16 字节的缓冲区
const view = new Uint8Array(buffer); // 使用 Uint8Array 操作
view[0] = 255; // 修改第一个字节

  3. 转换：

    • Blob 可以转换为 ArrayBuffer，例如通过 FileReader：

      javascript
const blob = new Blob(["test"]);
const reader = new FileReader();
reader.onload = () => {
  const arrayBuffer = reader.result; // ArrayBuffer
};
reader.readAsArrayBuffer(blob);

    • ArrayBuffer 也可以转换为 Blob：

      javascript
const buffer = new ArrayBuffer(8);
const blob = new Blob([buffer], { type: "application/octet-stream" });

总结

  • Blob 更适合处理文件或大数据块，强调不可变性和整体性，适合文件操作或网络传输。
  • ArrayBuffer 更适合需要直接操作字节的场景，强调灵活性和低级控制，适合数据处理和计算。
  • 它们确实都表示二进制数据，但设计目标和使用场景不同，选择时应根据具体需求（如文件处理 vs 字节操作）决定。
avatar
文章
阅读
粉丝