介绍

类型化数组TypedArray是 JavaScript 中用于高效处理二进制数据的工具。它们提供了多种数据类型，每种类型化数组都有其特定用途和适用场景，能够显著提高代码的效率和可读性。

• 图像数据：使用 Uint8Array 或 Uint8ClampedArray。
• 音频数据：根据采样深度选择 Int16Array 或 Float32Array。
• 大整数：使用 BigInt64Array 或 BigUint64Array。
• 浮点数：使用 Float32Array 或 Float64Array。
• 通用二进制数据：使用 Uint8Array。
• 需要灵活处理字节序：使用 DataView。

用途

类型化数组（Typed Arrays）在 Web 开发中用途广泛，尤其是在处理二进制数据、图形渲染、音频处理、网络通信等方面。以下是一些具体的使用场景和示例：

1. 图像处理

类型化数组常用于处理图像数据，尤其是与 <canvas> 元素结合使用。

示例：创建和渲染图像数据

const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(256, 256); // 创建一个 256x256 的图像数据
const data = imageData.data; // data 是一个 Uint8ClampedArray

// 填充图像数据
for (let i = 0; i < data.length; i += 4) {
  data[i] = 255;       // 红色通道
  data[i + 1] = 0;     // 绿色通道
  data[i + 2] = 0;     // 蓝色通道
  data[i + 3] = 255;   // 透明度通道
}

ctx.putImageData(imageData, 0, 0); // 将图像数据渲染到 canvas 上

2. 音频处理

类型化数组可以用于处理音频数据，尤其是与 Web Audio API 结合使用。

示例：处理音频样本

const audioContext = new AudioContext();
const sampleRate = audioContext.sampleRate;

// 创建一个单声道音频缓冲区
const audioBuffer = audioContext.createBuffer(1, sampleRate, sampleRate);
const channelData = audioBuffer.getChannelData(0); // 获取通道数据，返回 Float32Array

// 填充音频数据（生成一个简单的正弦波）
for (let i = 0; i < channelData.length; i++) {
  channelData[i] = Math.sin(2 * Math.PI * 440 * i / sampleRate); // 440 Hz 的正弦波
}

// 播放音频
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start();

3. WebGL 和图形渲染

类型化数组可以用于存储和传递 WebGL 着色器程序中的数据，例如顶点数据、纹理数据等。

示例：传递顶点数据到 WebGL

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');

// 创建顶点数据
const vertices = new Float32Array([
  -0.5, -0.5, 0.0,
   0.5, -0.5, 0.0,
   0.0,  0.5, 0.0
]);

// 创建缓冲区对象
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 设置顶点属性指针
const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);

4. 网络通信

类型化数组可以用于处理网络传输中的二进制数据，例如通过 WebSockets 或 Fetch API 发送和接收数据。

示例：通过 WebSockets 发送二进制数据

const socket = new WebSocket('ws://example.com');
const data = new Uint8Array([1, 2, 3, 4, 5]);

socket.onopen = () => {
  socket.send(data.buffer); // 发送二进制数据
};

socket.onmessage = (event) => {
  const receivedData = new Uint8Array(event.data);
  console.log(receivedData); // 处理接收到的二进制数据
};

5. 文件操作

类型化数组可以用于读取和写入文件，例如处理文件上传、下载或文件内容的处理。

示例：读取文件内容

const fileInput = document.createElement('input');
fileInput.type = 'file';

fileInput.onchange = (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const arrayBuffer = e.target.result;
    const uint8Array = new Uint8Array(arrayBuffer);
    console.log(uint8Array); // 处理文件的二进制数据
  };

  reader.readAsArrayBuffer(file);
};

document.body.appendChild(fileInput);

6. 数据加密与解密

类型化数组可以用于存储和处理加密数据，例如在实现加密算法或与 Web Crypto API 配合时。

示例：使用 Web Crypto API 加密数据

async function encryptData(data) {
  const key = await crypto.subtle.generateKey(
    { name: 'AES-GCM', length: 256 },
    true,
    ['encrypt', 'decrypt']
  );

  const iv = crypto.getRandomValues(new Uint8Array(12));
  const encrypted = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv },
    key,
    data.buffer
  );

  return new Uint8Array(encrypted);
}

const data = new Uint8Array([1, 2, 3, 4, 5]);
encryptData(data).then((encryptedData) => {
  console.log(encryptedData); // 加密后的数据
});

7. 数据压缩与解压缩

类型化数组可以用于存储压缩数据，例如使用 pako 等库进行数据压缩和解压缩。

示例：使用 pako 压缩数据

const pako = require('pako');

const data = new Uint8Array([1, 2, 3, 4, 5]);
const compressedData = pako.gzip(data);

console.log(compressedData); // 压缩后的数据

8. 自定义二进制协议

类型化数组适用于处理自定义的二进制协议，例如在物联网（IoT）设备或嵌入式系统中。

示例：解析自定义二进制协议

const receivedData = new Uint8Array([0x01, 0x02, 0x03, 0x04]);

// 假设协议格式为：[Header (1 byte), Length (1 byte), Payload]
const header = receivedData[0];
const length = receivedData[1];
const payload = receivedData.slice(2, 2 + length);

console.log(header, length, payload); // 解析协议数据

9. WebGL 和图形渲染

类型化数组可以用于存储和传递 WebGL 着色器程序中的数据，例如顶点数据、纹理数据等。

示例：传递顶点数据到 WebGL

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');

const vertices = new Float32Array([
  -0.5, -0.5, 0.0,
   0.5, -0.5, 0.0,
   0.0,  0.5, 0.0
]);

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 3);

10. 与 WebAssembly 集成

类型化数组可以用于加载和处理 WebAssembly 模块的二进制文件。

示例：加载 WebAssembly 模块

fetch('path/to/module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => new Uint8Array(bytes))
  .then(wasmBytes => WebAssembly.instantiate(wasmBytes))
  .then(({ module, instance }) => {
    console.log(instance.exports); // 使用 WebAssembly 模块
  });

11. 数据缓存与存储

类型化数组可以用于在内存中缓存二进制数据，例如缓存图片、音频或视频数据，以提高性能。

示例：缓存图片数据

const imageCache = new Map();

async function loadImage(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const uint8Array = new Uint8Array(arrayBuffer);

  imageCache.set(url, uint8Array);
  return uint8Array;
}

loadImage('path/to/image.png').then(data => {
  console.log(data);
});

总结

类型化数组是 JavaScript 中处理二进制数据的强大工具，广泛应用于图像处理、音频处理、网络通信、文件操作、数据加密、图形渲染、WebAssembly 集成以及数据缓存等场景。其高效性和灵活性使其成为现代 Web 开发中不可或缺的一部分，能够显著提升性能和代码可维护性。