11.2 TypedArray 与二进制数据处理

11.2 TypedArray 与二进制数据处理

TypedArray 是 JavaScript 中用于处理二进制数据的一种数据结构。它提供了一种高效的方式来操作原始二进制数据，适用于图像处理、音频处理、网络通信等场景。本节将详细介绍 TypedArray 的用法及其在二进制数据处理中的应用。

11.2.1 TypedArray 的基本概念

TypedArray 是一组视图类型，用于操作 ArrayBuffer 中的二进制数据。常见的 TypedArray 类型包括：

• Int8Array：8 位有符号整数。
• Uint8Array：8 位无符号整数。
• Int16Array：16 位有符号整数。
• Uint16Array：16 位无符号整数。
• Int32Array：32 位有符号整数。
• Uint32Array：32 位无符号整数。
• Float32Array：32 位浮点数。
• Float64Array：64 位浮点数。

1. ArrayBuffer
ArrayBuffer 是用于存储二进制数据的底层对象，TypedArray 是 ArrayBuffer 的视图。

2. 创建 TypedArray

const buffer = new ArrayBuffer(16); // 创建一个 16 字节的缓冲区
const int32Array = new Int32Array(buffer); // 创建一个 32 位整数视图

int32Array[0] = 42;
console.log(int32Array[0]); // 输出 42

11.2.2 TypedArray 的用法

1. 创建和初始化

const int8Array = new Int8Array([1, 2, 3, 4]);
console.log(int8Array); // 输出 Int8Array [1, 2, 3, 4]

2. 访问和修改

const float32Array = new Float32Array(4);

float32Array[0] = 1.5;
float32Array[1] = 2.5;

console.log(float32Array[0]); // 输出 1.5
console.log(float32Array[1]); // 输出 2.5

3. 遍历

const uint16Array = new Uint16Array([1, 2, 3, 4]);

for (const value of uint16Array) {
  console.log(value); // 输出 1, 2, 3, 4
}

uint16Array.forEach((value) => {
  console.log(value); // 输出 1, 2, 3, 4
});

11.2.3 DataView

DataView 是一种更灵活的视图，允许以不同的字节顺序访问 ArrayBuffer 中的数据。

1. 创建 DataView

const buffer = new ArrayBuffer(16);
const dataView = new DataView(buffer);

dataView.setInt32(0, 42); // 在偏移量 0 处写入 32 位整数
console.log(dataView.getInt32(0)); // 输出 42

2. 字节顺序
DataView 允许指定字节顺序（大端序或小端序）：

dataView.setInt32(0, 42, true); // 小端序
console.log(dataView.getInt32(0, true)); // 输出 42

11.2.4 应用场景

1. 图像处理
TypedArray 可以用于处理图像的像素数据，例如调整亮度、对比度等。

2. 音频处理
TypedArray 可以用于处理音频数据，例如音频信号的滤波、混音等。

3. 网络通信
TypedArray 可以用于处理网络传输的二进制数据，例如 WebSocket、WebRTC 等。

11.2.5 示例代码

示例 1：创建和操作 TypedArray

const buffer = new ArrayBuffer(16);
const int32Array = new Int32Array(buffer);

int32Array[0] = 42;
int32Array[1] = 24;

console.log(int32Array[0]); // 输出 42
console.log(int32Array[1]); // 输出 24

示例 2：使用 DataView 处理二进制数据

const buffer = new ArrayBuffer(16);
const dataView = new DataView(buffer);

dataView.setInt32(0, 42);
dataView.setFloat32(4, 3.14);

console.log(dataView.getInt32(0)); // 输出 42
console.log(dataView.getFloat32(4)); // 输出 3.14

示例 3：图像处理

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);

const imageData = ctx.getImageData(0, 0, 100, 100);
const data = new Uint8Array(imageData.data.buffer);

// 调整亮度
for (let i = 0; i < data.length; i += 4) {
  data[i] += 50; // Red
  data[i + 1] += 50; // Green
  data[i + 2] += 50; // Blue
}

ctx.putImageData(new ImageData(new Uint8ClampedArray(data), 100, 100), 0, 0);
document.body.appendChild(canvas);

11.2.6 总结

• TypedArray：用于高效处理二进制数据，支持多种数据类型。
• ArrayBuffer：存储二进制数据的底层对象。
• DataView：提供更灵活的二进制数据访问方式。
• 应用场景：图像处理、音频处理、网络通信等。

通过掌握 TypedArray 和 DataView，你可以更好地处理二进制数据，满足各种复杂的需求。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. TypedArray 和 ArrayBuffer 的主要区别是什么？
2. 如何使用 DataView 处理不同字节顺序的二进制数据？
3. 在什么情况下应该使用 TypedArray 而不是普通数组？