当前位置：首页 > news >正文

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

news 2025/7/2 6:05:17

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

类型化数组的基本概念

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

ArrayBuffer:
- 一块通用的二进制数据缓冲区。
- 是类型化数组的基础，用来存储原始数据。
视图（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"