11.3 ArrayBuffer 与 DataView
11.3 ArrayBuffer 与 DataView
ArrayBuffer 和 DataView 是 JavaScript 中用于处理二进制数据的核心工具。ArrayBuffer 是存储二进制数据的底层对象，而 DataView 提供了一种灵活的方式来读取和写入 ArrayBuffer 中的数据。本节将详细介绍 ArrayBuffer 和 DataView 的用法及其应用场景。
11.3.1 ArrayBuffer
ArrayBuffer 是用于存储二进制数据的底层对象，表示一段固定长度的原始二进制数据缓冲区。
1. 创建 ArrayBuffer
const buffer = new ArrayBuffer(16); // 创建一个 16 字节的缓冲区
console.log(buffer.byteLength); // 输出 16
2. 访问 ArrayBuffer
ArrayBuffer 本身不能直接操作数据，需要通过视图（如 TypedArray 或 DataView）来访问和修改数据。
11.3.2 DataView
DataView 是一种灵活的视图，允许以不同的字节顺序（大端序或小端序）读取和写入 ArrayBuffer 中的数据。
1. 创建 DataView
const buffer = new ArrayBuffer(16);
const dataView = new DataView(buffer);
2. 写入数据
DataView 提供了多种方法用于写入不同类型的数据：
dataView.setInt8(0, 42); // 在偏移量 0 处写入 8 位有符号整数
dataView.setFloat32(4, 3.14); // 在偏移量 4 处写入 32 位浮点数
3. 读取数据
DataView 提供了多种方法用于读取不同类型的数据：
console.log(dataView.getInt8(0)); // 输出 42
console.log(dataView.getFloat32(4)); // 输出 3.14
4. 字节顺序
DataView 允许指定字节顺序（大端序或小端序）：
dataView.setInt32(0, 42, true); // 小端序
console.log(dataView.getInt32(0, true)); // 输出 42
11.3.3 应用场景
1. 网络通信
ArrayBuffer 和 DataView 可以用于处理网络传输的二进制数据，例如 WebSocket、WebRTC 等。
2. 文件处理
ArrayBuffer 和 DataView 可以用于读取和写入二进制文件，例如图像、音频、视频等。
3. 加密和解密
ArrayBuffer 和 DataView 可以用于处理加密和解密操作，例如 AES、RSA 等。
11.3.4 示例代码
示例 1：创建和操作 ArrayBuffer
const buffer = new ArrayBuffer(16);
const dataView = new DataView(buffer);
dataView.setInt8(0, 42);
dataView.setFloat32(4, 3.14);
console.log(dataView.getInt8(0)); // 输出 42
console.log(dataView.getFloat32(4)); // 输出 3.14
示例 2：处理网络数据
const buffer = new ArrayBuffer(16);
const dataView = new DataView(buffer);
// 模拟网络数据
dataView.setInt32(0, 42);
dataView.setFloat32(4, 3.14);
// 读取网络数据
const intValue = dataView.getInt32(0);
const floatValue = dataView.getFloat32(4);
console.log(intValue); // 输出 42
console.log(floatValue); // 输出 3.14
示例 3：文件处理
const fileInput = document.createElement("input");
fileInput.type = "file";
document.body.appendChild(fileInput);
fileInput.addEventListener("change", (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const buffer = event.target.result;
const dataView = new DataView(buffer);
// 读取文件头
const magicNumber = dataView.getUint32(0);
console.log(`Magic Number: ${magicNumber.toString(16)}`);
};
reader.readAsArrayBuffer(file);
});
11.3.5 总结
ArrayBuffer：用于存储二进制数据的底层对象。DataView：提供了一种灵活的方式来读取和写入ArrayBuffer中的数据。- 应用场景：网络通信、文件处理、加密和解密等。
通过掌握 ArrayBuffer 和 DataView，你可以更好地处理二进制数据，满足各种复杂的需求。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。
思考题：
ArrayBuffer和DataView的主要区别是什么？- 如何使用
DataView处理不同字节顺序的二进制数据？ - 在什么情况下应该使用
ArrayBuffer和DataView？