ArrayBuffer、TypedArray 和 DataView：让前端轻松处理二进制数据

2024-01-12 08:19:16

ArrayBuffer、TypedArray与DataView

随着数据技术的发展，前端需要处理的数据类型越来越多，尤其是涉及到流媒体、音频、视频数据时，为了处理这些二进制数据，ArrayBuffer 应运而生。

ArrayBuffer：二进制数据的容器

ArrayBuffer 是一个简单的容器，用于存储二进制数据，就如同一个没有类型的数组，允许您在其中存储二进制数据。其本质上是一个连续的内存块，用于存储原始二进制数据。您可以通过 new ArrayBuffer(size) 创建一个 ArrayBuffer，其中 size 表示要创建的缓冲区的大小（以字节为单位）。

TypedArray：让二进制数据更具类型感

TypedArray 是一种特殊的数组，它是 ArrayBuffer 的视图，可以访问 ArrayBuffer 中的数据，并且具有特定的类型化元素（如整数、浮点数、字节等）。TypedArray 有多种类型，每种类型都对应一种特定的数据类型。例如，Int8Array 用于存储 8 位有符号整数，Uint16Array 用于存储 16 位无符号整数，Float32Array 用于存储 32 位浮点数。

创建 TypedArray 时，需要指定 ArrayBuffer 和起始位置以及长度。例如，以下代码创建一个从 ArrayBuffer 中偏移量为 10 字节开始，长度为 100 字节的 Int8Array：

const arrayBuffer = new ArrayBuffer(100);
const int8Array = new Int8Array(arrayBuffer, 10, 100);

使用 TypedArray 可以轻松地访问和操作二进制数据，并将其转换为更易于处理的格式。

DataView：二进制数据的读写利器

DataView 提供了一种方式来读取和写入原始内存中的数据，它也是基于 ArrayBuffer 创建的。DataView 可以读取各种数据类型的数据，包括整数、浮点数、字符串等。要创建 DataView，需要指定 ArrayBuffer 和起始位置以及长度。例如，以下代码创建一个从 ArrayBuffer 中偏移量为 10 字节开始，长度为 100 字节的 DataView：

const arrayBuffer = new ArrayBuffer(100);
const dataView = new DataView(arrayBuffer, 10, 100);

使用 DataView，您可以轻松地从二进制数据中读取和写入数据，从而进行各种数据操作。

实际应用

ArrayBuffer、TypedArray 和 DataView 在许多场景中都有着广泛的应用，例如：

流媒体： 在流媒体应用中，ArrayBuffer 用于存储视频和音频数据，TypedArray 用于快速访问和处理这些数据，从而实现流畅的播放。
图像处理： 在图像处理应用中，ArrayBuffer 用于存储图像数据，TypedArray 用于快速访问和处理这些数据，从而实现图像编辑、缩放和旋转等操作。
网络通信： 在网络通信中，ArrayBuffer 用于存储二进制数据，例如文件、图片等，TypedArray 用于快速访问和处理这些数据，从而实现数据的快速传输。