JavaScript 中的 TypedArray

本文解释了 JavaScript 中的 TypedArray。

我们将详细解释TypedArray的基本概念、每种类型的定义、使用方法以及具体的使用场景。

YouTube Video

JavaScript 中的 TypedArray

JavaScript 中的 TypedArray 是一种用来高效处理缓冲二进制数据的对象。TypedArray 根据特定的数据类型分配和操作内存。与普通数组不同，TypedArray 只能存储固定大小的二进制数据，而非任意数据类型。

TypedArray 的基本结构

TypedArray 的主要组成部分是 ArrayBuffer 和 TypedArray 本身。

• ArrayBuffer：一个固定大小的缓冲区，用于在内存中分配二进制数据。此缓冲区仅作为一个数据区域，无法直接读取或写入。
• TypedArray：一个包装对象，应用特定的数据类型到缓冲区，使得数据得以访问和操作。

基本使用示例

以下是一个创建 ArrayBuffer 并基于它创建 TypedArray 的示例。

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• 在此示例中，创建了一个 ArrayBuffer，然后基于该缓冲区创建了一个 Uint8Array。每个元素被视为一个 8 位无符号整数，只能存储规定范围内的值。

TypedArray 的类型

针对每种数据类型都有不同的 TypedArray。主要的类型如下。

这些 TypedArray 都具有内存高效的特点，并能够有效处理大量数据。

操作 TypedArray

您可以像普通数组一样使用索引访问 TypedArray 中的数据，同时还提供了一些特殊方法。

设置值

在 TypedArray 中，您可以使用 set 方法一次性分配多个值。

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• 此代码使用 set 方法一次性为 Int16Array 分配多个值，并在控制台中显示每个元素。

获取子数组

要获取 TypedArray 的一部分作为子数组，可以使用 subarray 方法。这与原始 TypedArray 引用相同的缓冲区。

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• 此代码使用 subarray 方法从 Int16Array 中获取指定范围的元素，并在控制台中显示该子数组。

复制缓冲区

TypedArray 的缓冲区还可以复制到另一个 TypedArray。使用 set 方法，您可以从指定位置开始复制。

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• 此代码使用 set 方法将 Uint8Array 的内容复制到另一个数组，并在控制台中显示复制的数组。

使用 DataView

虽然 TypedArray 使用固定的数据类型处理缓冲区，DataView 是一个接口，允许以任意偏移量和数据类型灵活操作二进制数据。这样可以在同一个缓冲区中混合使用不同的数据类型。

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• 此代码使用 DataView 在同一个缓冲区上写入不同类型的数据——32位整数和32位浮点数，并检查结果。

• DataView 比 TypedArray 提供了更大的数据访问灵活性，在处理二进制格式文件或网络协议时特别有用。

TypedArray 的使用场景

TypedArray 主要用于高效处理大量的二进制数据。具体使用场景包括以下内容。

图像处理

TypedArray 通常用于操作图像数据的像素信息。使用 Uint8Array，可以存储每个像素的 RGBA 值，并进行图像编辑和处理。

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• 此代码使用 Uint8Array 以RGBA格式创建宽度为100、高度为100的图像数据，并将所有像素设置为红色。

与 WebAssembly 进行交互

TypedArray 用于在 JavaScript 和 WebAssembly 之间交换二进制数据。通过 ArrayBuffer 共享 JavaScript 和 WebAssembly 的内存空间，可以实现快速数据交换。

处理音频和视频数据

TypedArray 在处理音频和视频中起着重要作用。可以将音频数据的波形存储在 Float32Array 中以进行播放和处理。

结论

TypedArray 是有效处理大量二进制数据的强大工具。在图像处理、WebAssembly 和音频/视频数据处理等对性能要求很高的应用中，它尤其有用。TypedArray 的 API 与普通数组类似，但在内存使用和数据类型方面存在限制，因此需要正确区分使用。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video