返回

定型数组，DataView，ArrayBuffer：创建、属性、方法

前端

定型数组、ArrayBuffer 和 DataView 是 JavaScript 中处理二进制数据的三种强大的工具。了解这些技术并能熟练使用它们将使您能够创建高效的数据结构并处理二进制数据。

ArrayBuffer

ArrayBuffer 是一种类似于普通数组的简单二进制数据容器，但它只能存储二进制数据，而普通数组则可以存储任何类型的数据。ArrayBuffer 的主要优点是它可以比普通数组更快地处理二进制数据，因为它不需要类型转换。

创建 ArrayBuffer

可以使用 new 运算符来创建 ArrayBuffer，如下所示：

const buffer = new ArrayBuffer(16);

这将创建一个包含 16 个字节的 ArrayBuffer。

ArrayBuffer 属性

ArrayBuffer 具有以下属性：

  • byteLength ：ArrayBuffer 的长度，以字节为单位。
  • BYTES_PER_ELEMENT ：ArrayBuffer 中每个元素的字节数。

ArrayBuffer 方法

ArrayBuffer 具有以下方法：

  • slice() ：从 ArrayBuffer 中提取一个子数组。

DataView

DataView 允许您将 ArrayBuffer 视为不同类型的数据视图。您可以使用 DataView 来读取和写入不同类型的数据，包括整数、浮点数和字符串。

创建 DataView

可以使用 new 运算符来创建 DataView，如下所示：

const dataView = new DataView(buffer);

这将创建一个 DataView，该 DataView 使用 ArrayBuffer buffer 作为数据源。

DataView 属性

DataView 具有以下属性：

  • buffer ：DataView 的数据源 ArrayBuffer。
  • byteLength ：DataView 的长度，以字节为单位。
  • byteOffset ：DataView 在其数据源 ArrayBuffer 中的起始位置，以字节为单位。

DataView 方法

DataView 具有以下方法：

  • getInt8() ：从 DataView 中读取一个 8 位有符号整数。
  • getUint8() ：从 DataView 中读取一个 8 位无符号整数。
  • getInt16() ：从 DataView 中读取一个 16 位有符号整数。
  • getUint16() ：从 DataView 中读取一个 16 位无符号整数。
  • getInt32() ：从 DataView 中读取一个 32 位有符号整数。
  • getUint32() ：从 DataView 中读取一个 32 位无符号整数。
  • getFloat32() ：从 DataView 中读取一个 32 位浮点数。
  • getFloat64() ：从 DataView 中读取一个 64 位浮点数。
  • setInt8() ：将一个 8 位有符号整数写入 DataView。
  • setUint8() ：将一个 8 位无符号整数写入 DataView。
  • setInt16() ：将一个 16 位有符号整数写入 DataView。
  • setUint16() ：将一个 16 位无符号整数写入 DataView。
  • setInt32() ：将一个 32 位有符号整数写入 DataView。
  • setUint32() ：将一个 32 位无符号整数写入 DataView。
  • setFloat32() ：将一个 32 位浮点数写入 DataView。
  • setFloat64() ：将一个 64 位浮点数写入 DataView。

定型数组

定型数组是 JavaScript 中处理二进制数据的一种高效方式。定型数组是一种特殊的 ArrayBuffer，其中每个元素都具有相同的数据类型。定型数组比普通数组更快，因为它不需要类型转换。

创建定型数组

可以使用 new 运算符来创建定型数组，如下所示：

const int32Array = new Int32Array(buffer);

这将创建一个 Int32Array，该 Int32Array 使用 ArrayBuffer buffer 作为数据源。

定型数组属性

定型数组具有以下属性：

  • buffer ：定型数组的数据源 ArrayBuffer。
  • byteLength ：定型数组的长度，以字节为单位。
  • byteOffset ：定型数组在其实例的 ArrayBuffer 中的起始位置，以字节为单位。
  • length ：定型数组中元素的数量。

定型数组方法

定型数组具有以下方法：

  • slice() ：从定型数组中提取一个子数组。
  • set() ：将一个数组或另一个定型数组的元素复制到定型数组中。
  • fill() ：用一个值填充定型数组的所有元素。

总结

ArrayBuffer、DataView 和定型数组是 JavaScript 中处理二进制数据的三种强大工具。了解这些技术并能熟练使用它们将使您能够创建高效的数据结构并处理二进制数据。