JS `TypedArray` 视图的内存对齐与 `DataView` 的字节序操作

各位观众老爷，大家好！我是你们的老朋友，今天咱们聊聊 JavaScript 里的 TypedArray 和 DataView 这俩兄弟。这俩家伙在处理二进制数据的时候可是主力军，但要想用好它们，还得先搞清楚内存对齐和字节序这些概念。准备好了吗？咱们这就开始！

一、TypedArray：类型化的视图，让二进制数据不再神秘

首先，咱们得知道 TypedArray 是个啥。简单来说，它就是一种类型化的数组，可以让你用特定的数据类型（比如整数、浮点数）来访问 ArrayBuffer 里的数据。ArrayBuffer 可以理解为一块原始的内存区域，而 TypedArray 就像是给这块内存贴上了标签，告诉 JavaScript 引擎这块内存里存的是啥类型的数据。

TypedArray 的出现，解决了 JavaScript 在处理二进制数据时的一个痛点：以前只能用普通的数组来存储二进制数据，但这样效率太低了。TypedArray 直接在 ArrayBuffer 上建立视图，省去了类型转换的开销，性能大大提升。

常见的 TypedArray 类型包括：

Int8Array: 8 位有符号整数
Uint8Array: 8 位无符号整数
Int16Array: 16 位有符号整数
Uint16Array: 16 位无符号整数
Int32Array: 32 位有符号整数
Uint32Array: 32 位无符号整数
Float32Array: 32 位浮点数
Float64Array: 64 位浮点数
BigInt64Array: 64 位有符号大整数
BigUint64Array: 64 位无符号大整数

代码示例：创建和使用 TypedArray

// 创建一个 16 字节的 ArrayBuffer
const buffer = new ArrayBuffer(16);

// 创建一个 Int32Array 视图，指向 buffer
const int32View = new Int32Array(buffer);

// 设置第一个元素的值
int32View[0] = 12345;

// 打印第一个元素的值
console.log(int32View[0]); // 输出: 12345

// 创建一个 Float64Array 视图，指向 buffer
const float64View = new Float64Array(buffer);

// 设置第一个元素的值
float64View[0] = 3.14159;

// 打印第一个元素的值
console.log(float64View[0]); // 输出: 3.14159

// 注意：由于 ArrayBuffer 只有 16 字节，所以 float64View 只能访问前 8 字节
// 如果试图访问 float64View[1]，会报错 RangeError: Offset is outside the bounds of the DataView

二、内存对齐：让数据住进“舒服”的房子

内存对齐是指数据在内存中的存储位置必须是某个数的倍数。这个“某个数”被称为对齐系数。不同的 CPU 架构和编译器可能有不同的对齐要求。

为什么要内存对齐呢？主要有两个原因：

性能优化： CPU 在访问内存时，通常是按照字长（比如 4 字节、8 字节）来读取的。如果数据没有对齐，CPU 可能需要读取多次才能拿到完整的数据，影响性能。
硬件限制： 某些 CPU 架构要求数据必须对齐，否则会引发硬件错误。

举个例子：假设 CPU 每次读取 4 个字节。如果一个 int32 类型的变量存储在地址 1 的位置，CPU 就需要读取两次才能拿到完整的数据（一次读取地址 0-3，一次读取地址 4-7）。但如果这个变量存储在地址 4 的位置，CPU 只需要读取一次就能拿到完整的数据。

在 JavaScript 中，TypedArray 会自动进行内存对齐，保证数据的访问效率。不同的 TypedArray 类型有不同的对齐要求。一般来说，TypedArray 的对齐系数等于其元素的大小。

TypedArray 类型	元素大小 (字节)	对齐系数 (字节)
`Int8Array`, `Uint8Array`, `Uint8ClampedArray`	1	1
`Int16Array`, `Uint16Array`	2	2
`Int32Array`, `Uint32Array`, `Float32Array`	4	4
`Float64Array`	8	8
`BigInt64Array`, `BigUint64Array`	8	8

代码示例：验证 TypedArray 的内存对齐

const buffer = new ArrayBuffer(16);

// 创建一个 Uint8Array 视图
const uint8View = new Uint8Array(buffer);

// 创建一个 Uint32Array 视图，从偏移量 1 开始
// 会报错 RangeError: Unaligned ArrayBuffer view
// 因为 Uint32Array 需要 4 字节对齐，而偏移量 1 不是 4 的倍数
// const uint32View = new Uint32Array(buffer, 1);

// 创建一个 Uint32Array 视图，从偏移量 4 开始
const uint32View = new Uint32Array(buffer, 4);

console.log(uint32View.byteOffset); // 输出: 4

// 创建一个 Float64Array 视图，从偏移量 8 开始
const float64View = new Float64Array(buffer, 8);

console.log(float64View.byteOffset); // 输出: 8

三、DataView：灵活的字节序操作大师

DataView 也是 ArrayBuffer 的一种视图，但它比 TypedArray 更加灵活。DataView 允许你以任意的偏移量和长度来读取和写入数据，并且可以指定字节序（大小端）。

字节序（Endianness）

字节序是指多字节数据在内存中的存储顺序。有两种常见的字节序：

大端序（Big-endian）： 高位字节存储在低地址，低位字节存储在高地址。
小端序（Little-endian）： 低位字节存储在低地址，高位字节存储在高地址。

举个例子：假设要存储一个 32 位整数 0x12345678。

在大端序的机器上，内存中的存储顺序是：12 34 56 78
在小端序的机器上，内存中的存储顺序是：78 56 34 12

不同的 CPU 架构可能有不同的默认字节序。例如，x86 架构通常使用小端序，而某些网络协议（如 TCP/IP）通常使用大端序。

DataView 的方法

DataView 提供了一系列方法来读取和写入不同类型的数据，并且可以指定字节序：

getInt8(byteOffset): 读取 8 位有符号整数
getUint8(byteOffset): 读取 8 位无符号整数
getInt16(byteOffset, littleEndian): 读取 16 位有符号整数
getUint16(byteOffset, littleEndian): 读取 16 位无符号整数
getInt32(byteOffset, littleEndian): 读取 32 位有符号整数
getUint32(byteOffset, littleEndian): 读取 32 位无符号整数
getFloat32(byteOffset, littleEndian): 读取 32 位浮点数
getFloat64(byteOffset, littleEndian): 读取 64 位浮点数
getBigInt64(byteOffset, littleEndian): 读取 64 位有符号大整数
getBigUint64(byteOffset, littleEndian): 读取 64 位无符号大整数
setInt8(byteOffset, value): 写入 8 位有符号整数
setUint8(byteOffset, value): 写入 8 位无符号整数
setInt16(byteOffset, value, littleEndian): 写入 16 位有符号整数
setUint16(byteOffset, value, littleEndian): 写入 16 位无符号整数
setInt32(byteOffset, value, littleEndian): 写入 32 位有符号整数
setUint32(byteOffset, value, littleEndian): 写入 32 位无符号整数
setFloat32(byteOffset, value, littleEndian): 写入 32 位浮点数
setFloat64(byteOffset, value, littleEndian): 写入 64 位浮点数
setBigInt64(byteOffset, value, littleEndian): 写入 64 位有符号大整数
setBigUint64(byteOffset, value, littleEndian): 写入 64 位无符号大整数

其中，byteOffset 参数指定读取或写入的偏移量（以字节为单位），littleEndian 参数指定字节序（true 表示小端序，false 表示大端序）。

代码示例：使用 DataView 进行字节序操作

const buffer = new ArrayBuffer(4);
const dataView = new DataView(buffer);

// 写入一个 32 位整数 (大端序)
dataView.setInt32(0, 0x12345678, false);

// 读取这个整数 (小端序)
const value = dataView.getInt32(0, true);

console.log(value.toString(16)); // 输出: 78563412

在这个例子中，我们首先使用大端序将整数 0x12345678 写入 ArrayBuffer。然后，我们使用小端序读取这个整数。由于字节序不同，读取到的值变成了 0x78563412。

四、TypedArray vs. DataView：选择困难症的终结者

既然 TypedArray 和 DataView 都可以操作 ArrayBuffer，那我们应该选择哪个呢？

一般来说，如果你的数据类型是固定的，并且需要高性能的访问，那么 TypedArray 是更好的选择。TypedArray 直接在 ArrayBuffer 上建立视图，省去了类型转换的开销，性能更高。

但如果你的数据类型不固定，或者需要进行字节序操作，那么 DataView 更加灵活。DataView 允许你以任意的偏移量和长度来读取和写入数据，并且可以指定字节序。

总结一下：

特性	`TypedArray`	`DataView`
数据类型	固定	灵活
字节序	默认 (与平台相关)	可指定
性能	较高	较低
适用场景	数据类型固定，需要高性能访问	数据类型不固定，需要字节序操作

五、实战演练：解析 PNG 图片的 IHDR Chunk

为了更好地理解 TypedArray 和 DataView 的应用，咱们来做一个实战演练：解析 PNG 图片的 IHDR Chunk（Image Header Chunk）。

PNG 图片的 IHDR Chunk 包含了图片的宽度、高度、颜色类型、位深度等信息。IHDR Chunk 的结构如下：

字段	大小 (字节)	描述
Width	4	图片宽度
Height	4	图片高度
Bit depth	1	位深度
Colour type	1	颜色类型
Compression method	1	压缩方法
Filter method	1	滤波器方法
Interlace method	1	隔行扫描方法

我们可以使用 DataView 来解析 IHDR Chunk 的数据。

代码示例：解析 PNG 图片的 IHDR Chunk

// 假设 imageData 是 PNG 图片的 ArrayBuffer
// 并且 IHDR Chunk 的数据从偏移量 8 开始
function parseIHDR(imageData) {
  const dataView = new DataView(imageData, 8);

  const width = dataView.getUint32(0, false);
  const height = dataView.getUint32(4, false);
  const bitDepth = dataView.getUint8(8);
  const colourType = dataView.getUint8(9);
  const compressionMethod = dataView.getUint8(10);
  const filterMethod = dataView.getUint8(11);
  const interlaceMethod = dataView.getUint8(12);

  return {
    width,
    height,
    bitDepth,
    colourType,
    compressionMethod,
    filterMethod,
    interlaceMethod,
  };
}

// 示例用法
// 假设已经加载了 PNG 图片的 ArrayBuffer 到 imageData 变量中
// const ihdrData = parseIHDR(imageData);
// console.log(ihdrData);

在这个例子中，我们使用 DataView 从 ArrayBuffer 中读取 IHDR Chunk 的各个字段，并将它们存储在一个对象中。注意，由于 PNG 图片使用大端序存储数据，所以我们在读取宽度和高度时，需要将 littleEndian 参数设置为 false。

六、注意事项

越界访问： 访问 TypedArray 或 DataView 时，要注意不要越界。如果访问的偏移量或长度超出了 ArrayBuffer 的范围，会抛出 RangeError 异常。
类型错误： 使用 DataView 时，要注意读取和写入的数据类型要匹配。如果类型不匹配，可能会导致数据错误。
字节序错误： 使用 DataView 时，要注意字节序是否正确。如果字节序错误，可能会导致数据错误。
性能： 虽然 TypedArray 和 DataView 提供了高性能的二进制数据访问，但过度使用仍然会影响性能。要尽量避免频繁的创建和销毁 TypedArray 和 DataView，并且要尽量减少数据拷贝。

七、总结

今天咱们一起学习了 JavaScript 中的 TypedArray 和 DataView，了解了内存对齐和字节序的概念，并通过一个实战演练加深了理解。希望这些知识能帮助你在处理二进制数据时更加得心应手。

记住，TypedArray 适合处理固定类型、高性能要求的场景，而 DataView 适合处理灵活类型、需要字节序操作的场景。选择合适的工具，才能事半功倍！

好了，今天的讲座就到这里。感谢大家的收听，咱们下次再见！

发表回复 取消回复

发表回复取消回复