JavaScript 中处理二进制数据的对象

目录

1. ArrayBuffer

创建 ArrayBuffer

共享 ArrayBuffer

2. TypedArray

常见的 TypedArray 类型：

创建 TypedArray

读写 TypedArray

遍历 TypedArray

3. DataView

创建 DataView

写入数据

读取数据

TypedArray和DataView的区别：

1. 数据类型固定性

2. 字节序处理

3. 性能特点

---

1. ArrayBuffer

ArrayBuffer 是一个用于表示通用、固定长度的二进制数据缓冲区的对象。它不能直接操作其中的数据，而是需要通过 TypedArray 或 DataView 来读写。

创建 ArrayBuffer

// 创建一个长度为 16 字节的 ArrayBuffer
const buffer = new ArrayBuffer(16);
console.log(buffer.byteLength); // 输出: 16

共享 ArrayBuffer

ArrayBuffer 可以通过 slice 方法创建一个新的 ArrayBuffer，该新对象会共享原缓冲区的一部分数据。

const originalBuffer = new ArrayBuffer(16);
const slicedBuffer = originalBuffer.slice(4, 8);
console.log(slicedBuffer.byteLength); // 输出: 4

2. TypedArray

TypedArray 是一组对象，用于以特定的数据类型访问 ArrayBuffer 中的数据。常见的 TypedArray 类型有 Int8Array、Uint8Array、Int16Array 等。

常见的 TypedArray 类型：

1. Int8Array
2. Uint8Array
3. Uint8ClampedArray
4. Int16Array
5. Uint16Array
6. Int32Array
7. Uint32Array
8. Float32Array
9. Float64Array

创建 TypedArray

// 创建一个长度为 4 的 Int8Array
const int8Array = new Int8Array(4);

// 使用已有的 ArrayBuffer 创建 Uint8Array
const buffer = new ArrayBuffer(8);
// 创建不同类型的Typed Array视图
const int8View = new Int8Array(buffer);
const uint8View = new Uint8Array(buffer);
const int16View = new Int16Array(buffer);
const uint16View = new Uint16Array(buffer);
const float32View = new Float32Array(buffer);

读写 TypedArray

const int16Array = new Int16Array(3);
// 写入数据
int16Array[0] = 10;
int16Array[1] = 20;
int16Array[2] = 30;
// 读取数据
console.log(int16Array[1]); // 输出: 20

遍历 TypedArray

const float32Array = new Float32Array([1.1, 2.2, 3.3]);
for (let value of float32Array) {
    console.log(value);
}

3. DataView

DataView 提供了更灵活的方式来读写 ArrayBuffer 中的数据，允许你指定字节序（大端或小端）和数据类型。

创建 DataView

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

写入数据

const buffer = new ArrayBuffer(8);
const dataView = new DataView(buffer);
// 在偏移量为 0 的位置写入一个 32 位有符号整数
dataView.setInt32(0, 123456789, true); // 最后一个参数 true 表示使用小端字节序

读取数据

const buffer = new ArrayBuffer(8);
const dataView = new DataView(buffer);
dataView.setInt32(0, 123456789, true);
// 从偏移量为 0 的位置读取一个 32 位有符号整数
const value = dataView.getInt32(0, true);
console.log(value); // 输出: 123456789

TypedArray和DataView的区别：

1. 数据类型固定性

• TypedArray：创建时就需要指定特定的数据类型（如 Int8Array、Float32Array 等），之后整个数组实例都只能以该固定类型来操作数据。例如，使用 Int32Array 创建的实例只能存储和操作 32 位有符号整数。

const int32Array = new Int32Array(2);
int32Array[0] = 10; // 只能存储 32 位有符号整数

• DataView：可以在同一个 ArrayBuffer 上灵活地读写不同类型的数据，不需要在创建时就固定数据类型。通过调用不同的方法（如 getInt8()、getFloat32() 等），可以在不同偏移量处读取或写入不同类型的数据。

const buffer = new ArrayBuffer(8);
const dataView = new DataView(buffer);
dataView.setInt8(0, 10);
dataView.setFloat32(4, 3.14);

2. 字节序处理

• TypedArray：使用系统默认的字节序（大端或小端），开发者通常无法直接控制字节序。
• DataView：在读写多字节数据时，可以通过方法的参数显式指定使用大端字节序（false）还是小端字节序（true），提供了更高的灵活性。

const buffer = new ArrayBuffer(4);
const dataView = new DataView(buffer);
// 使用小端字节序写入 32 位整数
dataView.setInt32(0, 123456789, true); 

3. 性能特点

• TypedArray：由于数据类型固定，在处理单一类型的数据时性能较高，适合处理大量同类型数据的场景，如处理图像像素数据。
• DataView：因为其灵活性，在读写不同类型数据时会有一定的性能开销，不过对于需要频繁切换数据类型的场景，它提供了更合适的解决方案。