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

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

【免费下载链接】ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info

前言

在现代 Web 开发中，处理二进制数据变得越来越重要，无论是文件操作、图像处理还是网络通信，都需要对二进制数据进行高效操作。JavaScript 提供了一套完整的二进制数据处理机制，虽然初看起来有些复杂，但一旦理解其核心概念，使用起来就会得心应手。

二进制数据基础：ArrayBuffer

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

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

重要特性：

• 固定长度，创建后无法改变大小
• 纯粹的内存区域，不提供直接访问数据的方法
• 需要"视图"对象来操作其中的数据

类型化数组视图

为了操作 ArrayBuffer 中的数据，我们需要使用视图对象。这些视图提供了不同的数据解释方式：

视图类型	描述	值范围
Uint8Array	8位无符号整数	0 到 255
Uint16Array	16位无符号整数	0 到 65535
Uint32Array	32位无符号整数	0 到 4294967295
Int8Array	8位有符号整数	-128 到 127
Int16Array	16位有符号整数	-32768 到 32767
Int32Array	32位有符号整数	-2147483648 到 2147483647
Float32Array	32位浮点数	约 ±3.4e38
Float64Array	64位浮点数	约 ±1.8e308

视图使用示例

let buffer = new ArrayBuffer(16); // 16字节缓冲区

// 创建32位整数视图
let view = new Uint32Array(buffer);
console.log(view.length); // 4 (16/4=4个32位整数)

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); // 1000会被截断
   

4. 指定长度：

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

5. 无参数创建空数组：

   let arr = new Float32Array();
   

边界行为与数据截断

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

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

Uint8ClampedArray 是特殊类型，它会将大于255的值截断为255，小于0的值截断为0，这在图像处理中特别有用。

DataView：灵活的数据视图

DataView 提供了更灵活的二进制数据访问方式，允许在同一个缓冲区中以不同格式访问数据：

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 常用方法：

• getInt8(offset)
• getUint16(offset, [littleEndian])
• getFloat32(offset, [littleEndian])
• 对应的 set 方法系列

实际应用建议

1. 文件处理：使用 Uint8Array 处理文件二进制数据
2. 图像处理：Uint8ClampedArray 适合像素数据操作
3. 网络协议：DataView 适合处理混合格式的二进制协议
4. 性能优化：类型化数组比普通数组在数值计算中性能更高

总结

JavaScript 的二进制数据处理体系以 ArrayBuffer 为核心，通过类型化数组和 DataView 提供了灵活高效的操作方式。理解这些概念后，开发者可以在 Web 应用中高效地处理各种二进制数据场景。

记住关键点：

• ArrayBuffer 是原始二进制数据容器
• 类型化数组提供了特定类型的视图
• DataView 提供了混合格式访问能力
• 不同类型数组适合不同的应用场景

【免费下载链接】ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info