ArrayBuffer

Kpsmart2025年3月7日大约 7 分钟

ArrayBuffer

ArrayBuffer是表示固定长度二进制数据缓冲区的对象。本文将介绍ArrayBuffer的创建、大小调整以及与其他类型化数组的关系。

ArrayBuffer 基本概念

ArrayBuffer 是 JavaScript 中用于表示通用的、固定长度的原始二进制数据缓冲区的对象。它本身不能直接操作，而是作为一个"原始内存"的引用，需要通过视图（如 TypedArray 或 DataView）来读取和写入其内容。

主要特点

固定长度：创建后大小不可变
二进制数据：存储原始的二进制数据
不可直接访问：需要通过视图对象访问
内存共享：多个视图可以引用同一个 ArrayBuffer

创建 ArrayBuffer

基本语法

// 创建一个 16 字节的 ArrayBuffer
const buffer = new ArrayBuffer(16);

参数表示要创建的 ArrayBuffer 的大小，单位为字节。

检查 ArrayBuffer 大小

可以通过 byteLength 属性获取 ArrayBuffer 的大小：

const buffer = new ArrayBuffer(16);
console.log(buffer.byteLength); // 输出: 16

检测是否为 ArrayBuffer

const buffer = new ArrayBuffer(8);
console.log(buffer instanceof ArrayBuffer); // 输出: true
console.log(ArrayBuffer.isView(buffer)); // 输出: false (buffer 本身不是视图)

使用视图操作 ArrayBuffer

由于 ArrayBuffer 只是一段内存，不能直接读写，我们需要使用视图来操作它。

使用 TypedArray 视图

TypedArray 是一组构造函数，用于创建特定数值类型的数组视图：

const buffer = new ArrayBuffer(16);

// 创建一个操作 buffer 的 Int32Array 视图
const int32View = new Int32Array(buffer);

// 写入数据
int32View[0] = 42;
int32View[1] = 43;

console.log(int32View.length); // 输出: 4 (16字节 / 4字节每整数)
console.log(int32View); // 输出: Int32Array [42, 43, 0, 0]

使用 DataView 视图

DataView 提供了更灵活的接口来操作 ArrayBuffer：

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

// 在不同位置写入不同类型的数据
dataView.setInt32(0, 42);
dataView.setFloat32(4, 3.14);
dataView.setUint8(8, 255);

// 读取数据
console.log(dataView.getInt32(0)); // 输出: 42
console.log(dataView.getFloat32(4)); // 输出: 3.14
console.log(dataView.getUint8(8)); // 输出: 255

ArrayBuffer 的切片和复制

切片操作

可以使用 slice() 方法创建 ArrayBuffer 的一个副本：

const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);
int32View[0] = 42;
int32View[1] = 43;

// 创建一个包含前 8 字节的新 ArrayBuffer
const slicedBuffer = buffer.slice(0, 8);
const slicedView = new Int32Array(slicedBuffer);

console.log(slicedView.length); // 输出: 2
console.log(slicedView); // 输出: Int32Array [42, 43]

// 修改原始 buffer 不会影响 slicedBuffer
int32View[0] = 100;
console.log(int32View[0]); // 输出: 100
console.log(slicedView[0]); // 输出: 42 (不受影响)

复制数据

可以在不同的 ArrayBuffer 之间复制数据：

const sourceBuffer = new ArrayBuffer(16);
const sourceView = new Int32Array(sourceBuffer);
sourceView[0] = 42;
sourceView[1] = 43;

const targetBuffer = new ArrayBuffer(16);
const targetView = new Int32Array(targetBuffer);

// 复制数据
targetView.set(sourceView.subarray(0, 2), 0);

console.log(targetView); // 输出: Int32Array [42, 43, 0, 0]

ArrayBuffer 与字符串转换

ArrayBuffer 转字符串

function arrayBufferToString(buffer) {
  return String.fromCharCode.apply(null, new Uint8Array(buffer));
}

// 示例
const buffer = new ArrayBuffer(5);
const view = new Uint8Array(buffer);
view[0] = 72;  // H
view[1] = 101; // e
view[2] = 108; // l
view[3] = 108; // l
view[4] = 111; // o

console.log(arrayBufferToString(buffer)); // 输出: Hello

字符串转 ArrayBuffer

function stringToArrayBuffer(str) {
  const buffer = new ArrayBuffer(str.length);
  const view = new Uint8Array(buffer);
  for (let i = 0; i < str.length; i++) {
    view[i] = str.charCodeAt(i);
  }
  return buffer;
}

// 示例
const buffer = stringToArrayBuffer("Hello");
const view = new Uint8Array(buffer);
console.log(Array.from(view)); // 输出: [72, 101, 108, 108, 111]

使用 TextEncoder 和 TextDecoder

更现代的方法是使用 TextEncoder 和 TextDecoder 来处理字符串和 ArrayBuffer 之间的转换：

// 字符串转 ArrayBuffer
function stringToArrayBuffer(str) {
  const encoder = new TextEncoder();
  return encoder.encode(str).buffer;
}

// ArrayBuffer 转字符串
function arrayBufferToString(buffer) {
  const decoder = new TextDecoder();
  return decoder.decode(buffer);
}

// 示例
const buffer = stringToArrayBuffer("你好，世界");
console.log(new Uint8Array(buffer)); // 输出包含 UTF-8 编码的字节数组

console.log(arrayBufferToString(buffer)); // 输出: 你好，世界

ArrayBuffer 的应用场景

1. 文件处理

// 在浏览器中读取文件内容为 ArrayBuffer
function readFileAsArrayBuffer(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsArrayBuffer(file);
  });
}

// 使用示例（在浏览器环境中）
document.getElementById('fileInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  try {
    const buffer = await readFileAsArrayBuffer(file);
    console.log(`文件大小: ${buffer.byteLength} 字节`);
    
    // 处理文件内容...
    const view = new Uint8Array(buffer);
    console.log(`前 10 个字节: ${Array.from(view.slice(0, 10))}`);
  } catch (error) {
    console.error('读取文件失败:', error);
  }
});

2. 网络通信

// 从服务器获取二进制数据
async function fetchBinaryData(url) {
  const response = await fetch(url);
  return await response.arrayBuffer();
}

// 使用示例
fetchBinaryData('https://example.com/binary-data')
  .then(buffer => {
    console.log(`接收到 ${buffer.byteLength} 字节的数据`);
    
    // 处理二进制数据...
    const dataView = new DataView(buffer);
    // 假设前 4 字节是一个 32 位整数
    const value = dataView.getInt32(0, true); // true 表示小端字节序
    console.log(`第一个整数值: ${value}`);
  })
  .catch(error => {
    console.error('获取数据失败:', error);
  });

3. 图像处理

// 在 Canvas 中处理图像数据
function processImageData(imageElement) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  canvas.width = imageElement.width;
  canvas.height = imageElement.height;
  
  // 绘制图像到 Canvas
  ctx.drawImage(imageElement, 0, 0);
  
  // 获取图像数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const buffer = imageData.data.buffer; // 获取底层的 ArrayBuffer
  
  // 创建一个 Uint8Array 视图来处理像素数据
  const pixels = new Uint8Array(buffer);
  
  // 处理图像 (例如: 反转颜色)
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = 255 - pixels[i];       // 红色通道
    pixels[i + 1] = 255 - pixels[i + 1]; // 绿色通道
    pixels[i + 2] = 255 - pixels[i + 2]; // 蓝色通道
    // pixels[i + 3] 是 alpha 通道，保持不变
  }
  
  // 将处理后的数据放回 Canvas
  ctx.putImageData(imageData, 0, 0);
  
  return canvas;
}

// 使用示例（在浏览器环境中）
const image = document.getElementById('sourceImage');
image.onload = () => {
  const processedCanvas = processImageData(image);
  document.body.appendChild(processedCanvas);
};

4. WebGL 和 3D 图形

// 在 WebGL 中使用 ArrayBuffer 存储顶点数据
function createVertexBuffer(gl) {
  // 定义三角形的顶点坐标
  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);
  
  // 将数据传输到 GPU
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  
  return vertexBuffer;
}

// 使用示例（在 WebGL 上下文中）
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (gl) {
  const vertexBuffer = createVertexBuffer(gl);
  // 继续设置 WebGL 渲染...
} else {
  console.error('WebGL 不可用');
}

性能考虑

内存效率

ArrayBuffer 提供了高效的内存使用方式，特别是在处理大量数值数据时：

// 比较普通数组和类型化数组的内存使用
function compareMemoryUsage() {
  const size = 1000000;
  
  // 使用普通数组
  const regularArray = [];
  for (let i = 0; i < size; i++) {
    regularArray.push(i);
  }
  
  // 使用类型化数组
  const buffer = new ArrayBuffer(size * 4); // 每个整数 4 字节
  const typedArray = new Int32Array(buffer);
  for (let i = 0; i < size; i++) {
    typedArray[i] = i;
  }
  
  console.log(`普通数组长度: ${regularArray.length}`);
  console.log(`类型化数组长度: ${typedArray.length}`);
  
  // 在实际应用中，类型化数组通常比普通数组占用更少的内存
  // 并且在处理大量数值数据时性能更好
}

数据传输效率

在 Web Workers 或 WebSocket 中传输大量数据时，ArrayBuffer 可以提高效率：

// 在主线程和 Worker 之间传输数据
function createAndUseWorker() {
  const worker = new Worker('worker.js');
  
  // 创建一个大型数据缓冲区
  const buffer = new ArrayBuffer(1024 * 1024); // 1MB
  const view = new Float64Array(buffer);
  
  // 填充数据
  for (let i = 0; i < view.length; i++) {
    view[i] = Math.random();
  }
  
  // 将整个 ArrayBuffer 传输到 Worker
  // 使用 transferable objects 可以避免复制数据
  worker.postMessage({ buffer }, [buffer]);
  
  // 接收 Worker 处理后的结果
  worker.onmessage = function(e) {
    const resultBuffer = e.data.resultBuffer;
    const resultView = new Float64Array(resultBuffer);
    console.log('接收到处理后的数据:', resultView);
  };
}

// worker.js 内容示例:
/*
self.onmessage = function(e) {
  const buffer = e.data.buffer;
  const view = new Float64Array(buffer);
  
  // 处理数据
  for (let i = 0; i < view.length; i++) {
    view[i] = view[i] * 2; // 简单地将每个值乘以 2
  }
  
  // 将处理后的数据发送回主线程
  self.postMessage({ resultBuffer: buffer }, [buffer]);
};
*/

总结

ArrayBuffer 是 JavaScript 中处理二进制数据的基础，它提供了一种高效的方式来存储和操作原始数据。通过与 TypedArray 和 DataView 等视图对象结合使用，ArrayBuffer 使 JavaScript 能够处理各种二进制数据格式，如文件内容、网络数据包、图像数据和 3D 图形等。

主要优点包括：

内存效率：比普通 JavaScript 数组更高效地存储大量数值数据
性能优化：在处理大量数值计算时提供更好的性能
与底层 API 集成：与 WebGL、Web Audio API、Canvas 等底层 API 无缝集成
高效数据传输：在 Web Workers、WebSocket 等场景中高效传输大量数据

随着 Web 应用变得越来越复杂，处理二进制数据的需求也越来越普遍。掌握 ArrayBuffer 及其相关 API 对于开发高性能的 Web 应用至关重要，特别是在处理多媒体、游戏开发和数据可视化等领域。