文章目录
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的特性。
- 每个元素占据 1 字节（8 位），可以表示从
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 还可以直接被用作文件流的一部分，适用于需要处理大文件或多媒体内容的应用场景。