ArrayBuffer，TypedArray，Int8Array 和Blob的关系

1.前言

在早期版本的 JavaScript 中，处理二进制数据（如图像、音频、视频等）的能力有限，通常需要依赖于服务器端的处理或使用插件（如 Flash）。随着 Web 技术的发展，特别是 HTML5 的引入，JavaScript 开始支持直接处理二进制数据的功能。
ArrArrayBuffer、TypedArray、Int8Array 和 Blob 是 JavaScript 中处理二进制数据的不同方式，它们之间有紧密的关系。它们也是 JavaScript 语言特性的一部分，专门为处理二进制数据而设计.下面将详细解释这些对象及其相互关系：

1. ArrayBuffer

• 定义：ArrayBuffer 是一个固定大小的缓冲区，用于表示通用的、原始的二进制数据块。它本身不提供直接访问其内容的方法。
• 用途：作为底层数据存储结构，为其他类型数组（如 TypedArray）提供内存支持。
• 特点：
  • 不可变长度。
  • 可以通过视图（如 TypedArray 或 DataView）来访问和操作其中的数据。

2. TypedArray

• 定义：TypedArray 是一组特定类型的数值数组，如 Int8Array、Uint8Array、Float64Array 等等。每个 TypedArray 类型对应一种基本数据类型，并且它们都基于 ArrayBuffer。
• 用途：提供了对二进制数据更高级别的抽象，允许开发者以特定格式读写数据。
• 特点：
  • 继承自 %TypedArray% 内部类，所有 TypedArray 类型共享相同的 API。
  • 每个元素占用固定的字节数，根据类型不同而变化。
  • 提供了类似数组的操作方法，如 get、set、subarray 等。

常见的 TypedArray 类型包括：

• Int8Array：8-bit 整数，带符号。
• Uint8Array：8-bit 整数，无符号。
• Int16Array：16-bit 整数，带符号。
• Uint16Array：16-bit 整数，无符号。
• Int32Array：32-bit 整数，带符号。
• Uint32Array：32-bit 整数，无符号。
• Float32Array：32-bit 浮点数。
• Float64Array：64-bit 浮点数。
• Uint8ClampedArray：类似于 Uint8Array，但在设置超出范围的值时会自动夹紧到合法范围内。

3. Int8Array

• 定义：Int8Array 是 TypedArray 的一种，代表一个 8 位带符号整数数组。
• 用途：用于处理小范围内的整数值，例如图像像素数据中的颜色分量。
• 特点：
  • 每个元素占据 1 字节（8 位），可以表示从 -128 到 127 的整数。
  • 是 TypedArray 的子类，因此拥有所有 TypedArray 的特性。

4. Blob

• 定义：Blob 表示不可变的、原始数据的类文件对象。它可以包含任何类型的数据，但通常与多媒体内容相关联
• 用途：用于表示文件或文件片段，在文件上传、下载、在线预览等方面非常有用。
• 特点：
  • 支持多种 MIME 类型。
  • 可以由多个 ArrayBuffer、TypedArray 或字符串组合而成。
  • 提供了 slice() 方法来创建新的 Blob 对象，该对象包含原 Blob 的一部分数据。

5.关系总结

• ArrayBuffer 是底层的基础数据容器，它为 TypedArray 和 DataView 提供了实际的内存空间。你可以将 ArrayBuffer 视作一片连续的内存区域，而 TypedArray 和 DataView 则是这片内存的不同视角。
• TypedArray 是 ArrayBuffer 上的一个视图，它允许你以特定的数据类型（如整数或浮点数）来解释和操作这块内存。不同的 TypedArray 类型（如 Int8Array）决定了如何解析这块内存中的数据。
• Int8Array是 TypedArray 的具体实现之一，专门用于处理 8 位带符号整数。它是 TypedArray 的子类，因此继承了所有相关的功能。
• Blob 可以包含 ArrayBuffer 或 TypedArray，并且可以通过 FileReader 或 Blob.arrayBuffer() 方法转换回 ArrayBuffer。此外，Blob 还可以直接被用作文件流的一部分，适用于需要处理大文件或多媒体内容的应用场景。