Articles
JavaScript简介
JavaScript中的`ArrayBuffer`

JavaScript中的`ArrayBuffer`

本文解释了JavaScript中的ArrayBuffer。

我们将详细讲解 ArrayBuffer，从基础概念到用法、相关类型以及实际应用。

YouTube Video

JavaScript中的ArrayBuffer

JavaScript的ArrayBuffer是一种用于处理低级二进制数据的对象，在操作WebAPI、文件操作和网络通信中的二进制数据时特别有用。

ArrayBuffer是什么

ArrayBuffer是一种用于处理固定长度二进制数据的数据结构。它允许处理普通 JavaScript 数组或对象无法处理的原始二进制数据。

ArrayBuffer本身无法直接操作数据。相反，数据的读写是通过基于ArrayBuffer的TypedArray或DataView进行的。

ArrayBuffer 在以下情况中特别有用：。

  • 处理从网络接收到的二进制数据时
  • 当需要在 Web Worker 中高效共享数据时。
  • 在使用 Canvas 或 WebGL 进行图像处理或 3D 渲染时。
  • 在处理文件（尤其是二进制文件）时。

创建一个ArrayBuffer

首先，我们来学习如何创建一个ArrayBuffer实例。ArrayBuffer以字节为单位分配内存，因此需要在创建时指定其大小。

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16
  • 在此示例中，将分配一个16字节的缓冲区。此缓冲区尚未包含任何数据。

使用TypedArray操作数据

您无法直接访问ArrayBuffer，因此需要使用TypedArray来读取和写入数据。TypedArray提供了不同类型的视图，如Int8Array和Float32Array，从而能够高效访问二进制数据。

使用Int8Array的示例 

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42
  • Int8Array可以在每个字节中存储数据，使缓冲区可以容纳8个元素。通过使用不同类型的视图，可以高效地操作数据。

其他 TypedArray 示例

JavaScript 提供了多种类型的 TypedArray。例如，如果您想处理32位无符号整数，可以使用 Uint32Array。

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456
  • Uint32Array 可以以 4 字节为单位存储数据，因此缓冲区可以容纳四个元素。根据要处理的数据类型选择合适的 TypedArray 十分重要。

使用 DataView 灵活操作数据

TypedArray 只能处理固定类型的数据，而通过使用 DataView，可以在任意位置写入任意类型的数据。这在处理包含混合数据类型的缓冲区时尤其有用。

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

使用 DataView，您可以指定字节偏移量并读取或写入各种类型的数据。这在处理诸如网络协议或文件格式等复杂的二进制结构时非常有用。

字节序的考虑

使用 DataView 时，还需要注意字节序 (endianness)。根据计算机的架构，数据存储在内存中的顺序可能不同。DataView 的方法提供了指定字节序的选项。

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

如果未指定正确的字节序，数据可能无法在不同的环境下被正确解释，因此在网络通信或文件操作中需要特别注意。

ArrayBuffer 的应用

ArrayBuffer 是一种功能强大的工具，经常用于Web开发和浏览器API。让我们来看一些应用示例。

接收和处理二进制数据

例如，您可以通过 XMLHttpRequest 或 fetch API 从服务器检索二进制数据，并将其作为 ArrayBuffer 处理。

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });
  • 在此示例中，图像数据从服务器获取，并作为 Uint8Array 处理。通过这种方式，您可以使用 ArrayBuffer 处理从服务器接收到的数据。

在 WebGL 中的使用

在 WebGL 中，ArrayBuffer 用于高效处理顶点数据和颜色数据等二进制数据。

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  • 在此示例中，使用 Float32Array 定义矩形的顶点坐标，并将其发送到 WebGL 缓冲区。

内存管理和ArrayBuffer

ArrayBuffer以字节为单位管理内存，非常高效，但同时也需要小心管理内存。处理大型二进制数据时，正确释放未使用的ArrayBuffer非常重要。虽然JavaScript会自动进行垃圾回收，但如果一个ArrayBuffer仍被引用，就可能导致内存泄漏。

总结

ArrayBuffer为JavaScript中的二进制数据处理提供了基础。通过结合TypedArray和DataView，可以高效灵活地处理二进制数据。它们是Web开发中的必备工具，尤其是在涉及二进制数据处理的许多情况下，例如网络通信和WebGL。正确理解并恰当地使用它们，可以提升性能和效率。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

JavaScript 与 StorageManagerJavaScript 中的 TypedArray