JavaScript ArrayBuffer 详解与使用完全指南

// 创建 16 字节的缓冲区
const buffer = new ArrayBuffer(16);
console.log(buffer.byteLength); // 16

// 创建 16 位无符号整数视图
const uint16View = new Uint16Array(buffer);
// 写入数据
uint16View[0] = 0x1234;
uint16View[1] = 0x5678;
// 读取数据
console.log(uint16View[0].toString(16)); // "1234"
console.log(uint16View[1].toString(16)); // "5678"

const view = new DataView(buffer);
// 写入数据（指定字节序）
view.setUint16(0, 0x1234, false); // 大端序
view.setUint16(2, 0x5678, true);  // 小端序
// 读取数据
console.log(view.getUint16(0, false).toString(16)); // "1234"
console.log(view.getUint16(2, true).toString(16));  // "5678"

// 创建 3 像素的 RGB 缓冲区（每个像素 3 字节）
const rgbBuffer = new ArrayBuffer(9);
const rgbView = new Uint8Array(rgbBuffer);
// 填充像素数据（R,G,B 格式）
rgbView.set([255, 0, 0, 0, 255, 0, 0, 0, 255]); // 红、绿、蓝
// 读取第二个像素的绿色分量
console.log(rgbView[4]); // 255

// 模拟 20 字节的 TCP 头部
const tcpHeaderBuffer = new ArrayBuffer(20);
const tcpView = new DataView(tcpHeaderBuffer);
// 设置源端口（大端序）
tcpView.setUint16(0, 54321, false);
// 设置目的端口（小端序）
tcpView.setUint16(2, 80, true);
// 读取源端口
console.log(tcpView.getUint16(0, false)); // 54321

// 从文件创建 ArrayBuffer
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    const buffer = event.target.result;
    const uint8View = new Uint8Array(buffer);
    // 读取文件前 4 字节
    const fileSignature = Array.from(uint8View.slice(0, 4))
      .map(b => b.toString(16).padStart(2, '0'))
      .join(' ');
    console.log('File signature:', fileSignature);
  };
  reader.readAsArrayBuffer(file);
});

// 测试 100 万次数据操作
const arraySize = 1e6;
// 普通数组测试
console.time('Array');
const arr = new Array(arraySize);
for (let i = 0; i < arraySize; i++) {
  arr[i] = i % 256;
}
console.timeEnd('Array'); // 约 5-10ms
// ArrayBuffer 测试
console.time('ArrayBuffer');
const buffer = new ArrayBuffer(arraySize);
const typedArr = new Uint8Array(buffer);
for (let i = 0; i < arraySize; i++) {
  typedArr[i] = i % 256;
}
console.timeEnd('ArrayBuffer'); // 约 1-3ms

// 创建共享缓冲区
const sharedBuffer = new ArrayBuffer(16);
const view1 = new Uint32Array(sharedBuffer);
const view2 = new Uint8Array(sharedBuffer, 4, 8); // 从第4字节开始，长度8字节
view1[0] = 0x12345678;
console.log(view2[0].toString(16)); // "78" (小端序下的第一个字节)

// 处理不同字节序的数据
function readInt32(buffer, offset, isLittleEndian) {
  const view = new DataView(buffer);
  return view.getInt32(offset, isLittleEndian);
}
const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setInt32(0, 0x12345678, false); // 大端序写入
console.log(readInt32(buffer, 0, false).toString(16)); // "12345678"
console.log(readInt32(buffer, 0, true).toString(16));  // "78563412"