用JavaScript读写二进制数据

2023-11-10 17:58:00

在我们的数字世界中，数据无处不在。从文本和图像到音频和视频，我们每天都会遇到各种形式的数据。为了处理这些数据，计算机使用二进制数来表示和存储信息。二进制数是一种只有两个数字（0 和 1）的计数系统，非常适合计算机处理。

传统上，JavaScript 无法直接处理二进制数据。相反，它使用文本字符串或数字数组等数据类型。这使得处理二进制数据变得困难且低效，因为JavaScript 必须将数据从一种格式转换为另一种格式。

为了解决这个问题，HTML5 引入了类型化数组 API。类型化数组是一种允许 JavaScript 直接操作二进制数据的 API。它提供了一系列预定义的数据类型，每个数据类型都对应于一种特定的二进制格式。例如，Uint8Array 数据类型对应于无符号 8 位整数，而 Float64Array 数据类型对应于 64 位浮点数。

类型化数组有许多优点。首先，它们可以节省内存。由于类型化数组直接操作二进制数据，因此它们可以比传统的 JavaScript 数据类型占用更少的空间。其次，它们可以提高性能。由于类型化数组可以避免数据格式转换的开销，因此它们可以比传统的 JavaScript 数据类型执行得更快。第三，它们可以简化代码。由于类型化数组提供了直接操作二进制数据的方法，因此它们可以简化需要处理二进制数据的代码。

在本文中，我们将介绍如何在不同的场景中使用类型化数组。我们将首先介绍如何从流中读取数据，然后介绍如何从文件中读取数据，最后介绍如何在内存中创建和操作二进制数据。

从流中读取数据

从流中读取数据是一种常见的任务。例如，您可能需要从网络请求中读取数据，或者从文件中读取数据。要从流中读取数据，您可以使用 FileReader API。

FileReader API 提供了一系列方法来读取数据。最常用的方法是 readAsArrayBuffer() 方法。该方法将流中的数据读取到一个 ArrayBuffer 对象中。ArrayBuffer 对象是一个二进制数据的容器。一旦您有了 ArrayBuffer 对象，您就可以使用类型化数组来访问其中的数据。

以下示例演示如何使用 FileReader API 从流中读取数据：

const reader = new FileReader();

reader.onload = function() {
  const arrayBuffer = reader.result;
  const uint8Array = new Uint8Array(arrayBuffer);

  // 使用 uint8Array 来访问数据
};

reader.readAsArrayBuffer(stream);

从文件中读取数据

从文件中读取数据也是一项常见的任务。例如，您可能需要从磁盘上读取一个文件，或者从网络上下载一个文件。要从文件中读取数据，您可以使用 File API。

File API 提供了一系列方法来读取数据。最常用的方法是 readAsArrayBuffer() 方法。该方法将文件中的数据读取到一个 ArrayBuffer 对象中。一旦您有了 ArrayBuffer 对象，您就可以使用类型化数组来访问其中的数据。

以下示例演示如何使用 File API 从文件中读取数据：

const file = new File(['Hello, world!'], 'hello.txt');

const reader = new FileReader();

reader.onload = function() {
  const arrayBuffer = reader.result;
  const uint8Array = new Uint8Array(arrayBuffer);

  // 使用 uint8Array 来访问数据
};

reader.readAsArrayBuffer(file);

在内存中创建和操作二进制数据

在内存中创建和操作二进制数据也是一项常见任务。例如，您可能需要创建一个二进制数据结构，或者您可能需要处理二进制数据流。要创建和操作二进制数据，您可以使用类型化数组。

以下示例演示如何使用类型化数组在内存中创建和操作二进制数据：

const uint8Array = new Uint8Array(10);

// 设置数组中的值
uint8Array[0] = 1;
uint8Array[1] = 2;
uint8Array[2] = 3;

// 获取数组中的值
const value = uint8Array[0];

// 使用数组中的值进行操作
const sum = uint8Array[0] + uint8Array[1];