JavaScript中的ArrayBuffer与类型化数组

描述
ArrayBuffer是JavaScript中用于处理二进制数据的基础对象，它代表一段固定长度的原始二进制数据缓冲区。类型化数组（Typed Arrays）则是基于ArrayBuffer的视图，提供了读写缓冲区内容的各种数据类型（如Int32Array、Float64Array等）。这套API主要用于处理音频、视频、网络协议等二进制数据场景。

核心概念解析

1. ArrayBuffer - 原始二进制数据容器

   • ArrayBuffer本身不能直接读写，只是分配一段原始内存空间
   • 创建时需要指定字节长度：new ArrayBuffer(length)
   • 示例：创建8字节的缓冲区

   let buffer = new ArrayBuffer(8); // 分配8字节内存
   console.log(buffer.byteLength);  // 输出：8
   

2. DataView - 灵活的视图对象

   • 提供可以自定义字节序的读写方法
   • 创建视图：new DataView(buffer, byteOffset, byteLength)
   • 示例：使用DataView读写数据

   let view = new DataView(buffer);
   view.setInt32(0, 255);        // 在偏移0处写入32位整数
   console.log(view.getInt32(0)); // 输出：255
   

类型化数组详解

3. TypedArray概述

   • 一系列特定类型的视图构造函数：
     • Int8Array/Uint8Array：8位有符号/无符号整数
     • Int16Array/Uint16Array：16位整数
     • Float32Array/Float64Array：32/64位浮点数
   • 每个元素占用固定字节数，连续存储在内存中

4. 创建类型化数组的三种方式

   // 方式1：直接创建（自动分配ArrayBuffer）
   let int32Array = new Int32Array(4); // 创建4个元素的32位整数数组
   
   // 方式2：基于现有ArrayBuffer
   let buffer = new ArrayBuffer(16);
   let floatArray = new Float32Array(buffer, 0, 4); // 使用前16字节
   
   // 方式3：从普通数组转换
   let normalArray = [1, 2, 3, 4];
   let typedArray = new Int32Array(normalArray);
   

实际应用示例

5. 数据类型转换示例

   // 创建包含不同数据类型的ArrayBuffer
   let buffer = new ArrayBuffer(16);
   let int8View = new Int8Array(buffer);
   let int32View = new Int32Array(buffer);
   
   // 写入32位整数（占用4个字节）
   int32View[0] = 0x12345678; // 十六进制表示
   
   // 以8位整数查看相同内存（小端序）
   console.log(int8View[0]); // 0x78
   console.log(int8View[1]); // 0x56
   console.log(int8View[2]); // 0x34
   console.log(int8View[3]); // 0x12
   

6. 字节序处理

   • 大端序（Big Endian）：高位字节在前
   • 小端序（Little Endian）：低位字节在前

   let dataView = new DataView(buffer);
   dataView.setInt32(0, 0x12345678, true); // 小端序写入
   console.log(dataView.getInt32(0, false)); // 大端序读取
   

高级应用场景

7. 与Blob对象互操作

   // ArrayBuffer转Blob
   let blob = new Blob([buffer], {type: 'application/octet-stream'});
   
   // Blob转ArrayBuffer
   blob.arrayBuffer().then(buffer => {
     console.log(new Uint8Array(buffer));
   });
   

8. WebSocket二进制通信

   // 发送二进制数据
   let data = new Float32Array([1.1, 2.2, 3.3]);
   websocket.send(data.buffer);
   
   // 接收二进制数据
   websocket.onmessage = function(event) {
     let arrayBuffer = event.data;
     let floatArray = new Float32Array(arrayBuffer);
   };
   

注意事项

• 同一个ArrayBuffer可以被多个视图共享
• 操作时要注意字节对齐问题
• 类型化数组具有普通数组的大部分方法（map、filter等）
• 在Web Worker中传递大量数据时特别高效

通过掌握ArrayBuffer和类型化数组，你可以高效处理各种二进制数据场景，为复杂的数据处理任务奠定基础。