红宝书第二十二讲:详解JavaScript类型化数组与二进制数据处理

资料取自《JavaScript高级程序设计(第5版)》
查看总目录:红宝书学习大纲


一、为什么需要类型化数组?

普通JavaScript数组(Array)灵活但低效,不适合处理大量二进制数据(如文件、图像)。类型化数组(Typed Arrays)直接操作内存,解决以下痛点:

  • 精准控制内存:每个元素类型和大小固定,避免无谓消耗12
  • 高效操作二进制:适合WebGL、音视频处理等场景1

二、核心概念:ArrayBuffer与视图

  1. ArrayBuffer:内存中的二進制数据容器(不可直接操作)

    // 创建16字节的缓冲区
    const buffer = new ArrayBuffer(16); 
  2. 视图(View):通过指定格式访问缓冲区数据

    • 类型化数组(如Int32Array)→ 处理固定类型数据2
    • DataView → 灵活操作不同字节序和偏移2
flowchart TD
    ArrayBuffer(示例:16字节内存) --> Int32Array[视图1: 4个Int32数]
    ArrayBuffer --> Uint8Array[视图2: 16个Uint8数]
    ArrayBuffer --> DataView[视图3: 按需读写任意位置]

三、类型化数组的常见类型

类型字节范围典型用途
Int8Array1-128 ~ 127处理有符号整数
Uint8Array10 ~ 255图像像素数据(RGBA)
Float32Array4≈±3.4×10³⁸3D图形(WebGL顶点数据)
BigInt64Array8-2⁶³ ~ 2⁶³-1处理大整数

2

示例1:用Uint8Array处理图像像素
// 创建3字节缓冲区(RGB颜色值)
const buffer = new ArrayBuffer(3); 
const pixels = new Uint8Array(buffer);

// 设置红色(255,0,0)
pixels[0] = 255; // 第一个字节→R通道
pixels[1] = 0;   // 第二个字节→G通道
pixels[2] = 0;   // 第三个字节→B通道

四、DataView:处理复杂字节顺序

DataView可灵活指定字节偏移(byteOffset)字节序(大端/小端),适合跨平台数据传输21

示例2:读写混合数据类型
const buffer = new ArrayBuffer(8); // 8字节内存
const view = new DataView(buffer);

// 在第0字节写入32位整数(大端序)
view.setInt32(0, 1024, true); // true表示小端序

// 读取后8位字符串(UTF-8)
const strDecoder = new TextDecoder(); 
console.log(strDecoder.decode(new Uint8Array(buffer, 4))); // 根据内容输出

五、字节序(Endianness):大端与小端

  • 大端序(Big-Endian) → 高位字节在前(如0x1234存储为12 34
  • 小端序(Little-Endian) → 低位字节在前(如0x1234存储为34 12
示例3:验证字节序
const buffer = new ArrayBuffer(2);
const view = new DataView(buffer);

view.setInt16(0, 0x1234, true); // 小端模式写入
console.log(view.getUint8(0).toString(16)); // 输出34 → 低位在前

六、实际应用:文件读取与处理

// 读取文件并转为类型化数组
const fileInput = document.querySelector('input[type="file"]');
fileInput.onchange = async (e) => {
  const file = e.target.files[0];
  const buffer = await file.arrayBuffer();
  const uint8Array = new Uint8Array(buffer);
  
  // 处理文件内容...
};

目录:总目录
上篇文章:红宝书第二十一讲:详解JavaScript的模块化(CommonJS与ES Modules)

下篇文章:红宝书第二十三讲:详解DOM事件模型:冒泡与事件委托

脚注


  1. 《JavaScript高级程序设计(第5版)》讨论类型化数组的历史与在WebGL中的应用
  2. 《JavaScript高级程序设计(第5版)》的表格详细描述了各类型化数组的字节及范围

kovli
13 声望7 粉丝