JavaScript 二进制数据处理：ArrayBuffer 与类型化数组详解

JavaScript 二进制数据处理：ArrayBuffer 与类型化数组详解

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

二进制数据在现代 Web 开发中的重要性

在现代 Web 开发中，处理二进制数据变得越来越常见，特别是在文件操作（创建、上传、下载）和图像处理等场景中。JavaScript 提供了强大的二进制数据处理能力，且性能优异。本文将深入探讨 JavaScript 中的二进制数据处理机制。

ArrayBuffer：二进制数据的核心容器

ArrayBuffer 是 JavaScript 中处理二进制数据的基础对象，它代表一段固定长度的连续内存区域。创建方式如下：

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

关键特性：

• 固定长度，无法动态调整
• 纯粹的内存区域，不提供直接访问方法
• 需要"视图"对象来操作其中的数据

类型化数组：操作二进制数据的视图

为了操作 ArrayBuffer，我们需要使用"视图"对象。这些视图对象本身不存储数据，而是提供解释 ArrayBuffer 中二进制数据的接口。

常见类型化数组

1. Uint8Array - 将每个字节视为0-255的无符号整数
2. Uint16Array - 每2个字节视为0-65535的整数
3. Uint32Array - 每4个字节视为0-4294967295的整数
4. Float64Array - 每8个字节视为浮点数

let buffer = new ArrayBuffer(16);
let view = new Uint32Array(buffer); // 将buffer视为32位整数序列

console.log(Uint32Array.BYTES_PER_ELEMENT); // 每个元素4字节
console.log(view.length); // 4个元素
console.log(view.byteLength); // 16字节

view[0] = 123456; // 写入数据

// 遍历数据
for(let num of view) {
  console.log(num); // 123456, 0, 0, 0
}

类型化数组的创建方式

类型化数组有五种创建方式：

1. 基于现有ArrayBuffer：

   new TypedArray(buffer, [byteOffset], [length]);
   

2. 基于数组或类数组对象：

   let arr = new Uint8Array([0, 1, 2, 3]);
   

3. 基于另一个类型化数组（会进行类型转换）：

   let arr16 = new Uint16Array([1, 1000]);
   let arr8 = new Uint8Array(arr16);
   

4. 指定长度创建：

   let arr = new Uint16Array(4); // 创建4个16位整数的数组
   

5. 无参数创建空数组

边界行为与特殊类型

当向类型化数组写入超出范围的值时，会发生截断：

let uint8array = new Uint8Array([0, 1, 2, 3]);
uint8array[0] = 256; // 实际存储0
uint8array[1] = 257; // 实际存储1

特殊类型 Uint8ClampedArray 行为不同：

• 大于255的值会被固定为255
• 负值会被固定为0
• 非常适合图像处理场景

DataView：灵活的数据视图

DataView 提供了更灵活的方式来访问 ArrayBuffer 中的数据，允许在访问时指定数据类型：

let buffer = new Uint8Array([255, 255, 255, 255]).buffer;
let dataView = new DataView(buffer);

console.log(dataView.getUint8(0)); // 255
console.log(dataView.getUint16(0)); // 65535
console.log(dataView.getUint32(0)); // 4294967295

DataView优势：

• 可以混合存储不同格式的数据
• 访问时指定数据类型，而非创建时
• 适合处理复杂的数据结构

类型化数组的方法

类型化数组支持大多数常规数组方法（map、slice、reduce等），但有一些限制：

• 不支持 splice（因为内存固定）
• 不支持 concat

特有方法：

• arr.set(fromArr, [offset]) - 批量复制数据
• arr.subarray([begin, end]) - 创建新视图（不复制数据）

关键术语总结

1. ArrayBuffer - 原始二进制数据容器
2. TypedArray - 类型化数组视图（Uint8Array等）
3. DataView - 灵活的数据视图
4. ArrayBufferView - 所有视图类型的统称
5. BufferSource - ArrayBuffer 或其视图的统称

理解这些二进制数据处理机制，将使你能够高效地处理文件、图像等二进制数据，为Web开发带来更多可能性。

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info