JS中类型化数组（Typed Arrays）详解和常见应用场景

在JavaScript中，类型化数组（Typed Arrays） 是用于处理二进制数据的对象。它们允许我们以一种高效的方式操作和存储大量的数值数据，特别适合处理类似于图像、音频、视频等场景的原始二进制数据。

类型化数组的基本概念

类型化数组并不是独立的数据结构，而是基于ArrayBuffer的视图。类型化数组包含以下两个核心部分：

1. ArrayBuffer:

   • 一块通用的二进制数据缓冲区。
   • 是类型化数组的基础，用来存储原始数据。

2. 视图（View）:

   • 是一个具体的类型化数组，用来解释和操作 ArrayBuffer 中的二进制数据。
   • 例如：Int8Array、Uint8Array、Float32Array 等。

类型化数组的构造

类型	每个元素的字节数	数据范围
Int8Array	1	-128 到 127
Uint8Array	1	0 到 255
Uint8ClampedArray	1	0 到 255，超出范围的值被截断
Int16Array	2	-32768 到 32767
Uint16Array	2	0 到 65535
Int32Array	4	-2³¹ 到 2³¹-1
Uint32Array	4	0 到 2³²-1
Float32Array	4	IEEE 754 单精度浮点数
Float64Array	8	IEEE 754 双精度浮点数

---

创建类型化数组

1. 使用构造函数直接创建

const int8 = new Int8Array(4); // 创建一个包含 4 个元素的 Int8Array，默认值为 0
console.log(int8); // Int8Array [0, 0, 0, 0]

2. 通过已有数组或可迭代对象创建

const uint8 = new Uint8Array([1, 2, 3, 255]);
console.log(uint8); // Uint8Array [1, 2, 3, 255]

3. 通过 ArrayBuffer 创建

const buffer = new ArrayBuffer(8); // 创建一个 8 字节的缓冲区
const view = new Int16Array(buffer);
view[0] = 42;
console.log(view); // Int16Array [42, 0, 0, 0]

4. 从另一个类型化数组创建

const float32 = new Float32Array([1.5, 2.5, 3.5]);
const int32 = new Int32Array(float32); // 截断浮点数为整数
console.log(int32); // Int32Array [1, 2, 3]

---

常见应用场景

1. 图像处理

// 创建一个 Uint8ClampedArray，常用于存储图像像素
const width = 2, height = 2;
const pixels = new Uint8ClampedArray(width * height * 4);// 设置像素数据 (R, G, B, A)
pixels[0] = 255; // Red
pixels[1] = 0;   // Green
pixels[2] = 0;   // Blue
pixels[3] = 255; // Alpha
console.log(pixels); // Uint8ClampedArray [255, 0, 0, 255, 0, 0, 0, 0, 0, 0, 0, 0]

2. 音频数据处理

// 假设我们有一个缓冲区存储的音频采样数据
const audioBuffer = new Float32Array([0.5, -0.5, 1.0, -1.0]);// 处理音频数据：简单的增益（音量放大）
for (let i = 0; i < audioBuffer.length; i++) {audioBuffer[i] *= 2;
}
console.log(audioBuffer); // Float32Array [1.0, -1.0, 2.0, -2.0]

3. WebGL 数据处理

WebGL 使用类型化数组存储顶点数据、颜色值等。

const vertices = new Float32Array([0.0, 0.5, 0.0, // 顶点1-0.5, -0.5, 0.0, // 顶点20.5, -0.5, 0.0, // 顶点3
]);
console.log(vertices); // Float32Array [0, 0.5, 0, -0.5, -0.5, 0, 0.5, -0.5, 0]

4. 文件读取和解析

const fileData = new Uint8Array([72, 101, 108, 108, 111]); // ASCII 对应 "Hello"// 解码为字符串
const decoder = new TextDecoder("utf-8");
console.log(decoder.decode(fileData)); // "Hello"

---

类型化数组的优势

1. 高性能:

   • 数据存储在连续的内存块中，访问和操作效率高。

2. 便捷性:

   • 提供多种内置方法如 set、subarray、slice 等操作数组。

3. 与原生 API 的兼容性:

   • 例如，与 WebGL、Web Audio、File API 等 API 配合使用。

---

注意事项

1. 内存分配固定:

   • 类型化数组一旦创建，其大小固定，不能动态扩展。

2. 端序问题:

   • 在跨平台数据传输时，需要注意字节序（Big-Endian 或 Little-Endian）。

3. 与普通数组的区别:

   • 类型化数组中的元素类型固定，不能混合存储多种数据类型。

---

总结

类型化数组是处理和操作二进制数据的强大工具，适用于性能敏感的应用场景，如图像处理、音频处理和 WebGL 开发。通过合理使用类型化数组，能够极大提高应用的效率和兼容性。