ES10 中的 ArrayBuffer 对象和 TypedArray 详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们通常需要处理二进制数据。ES10 中引入了 ArrayBuffer 对象和 TypedArray，使得 JavaScript 可以更加方便地处理二进制数据。本文将详细介绍 ArrayBuffer 对象和 TypedArray 的使用方法，并提供示例代码。

什么是 ArrayBuffer 对象

ArrayBuffer 对象是一种通用的二进制数据缓冲区，它可以存储任意类型的二进制数据。它类似于数组，但是它的元素是字节而不是数值。ArrayBuffer 对象的长度是固定的，一旦创建就无法改变。

创建 ArrayBuffer 对象的方式如下：

const buffer = new ArrayBuffer(length);

其中，length 是缓冲区的长度，单位是字节。例如，如果要创建一个长度为 16 字节的缓冲区，可以这样写：

const buffer = new ArrayBuffer(16);

什么是 TypedArray

TypedArray 是一种特殊的数组类型，它可以从 ArrayBuffer 对象中读取数据，并且可以直接操作这些数据。TypedArray 的元素类型是固定的，例如 Int8Array 表示每个元素是一个 8 位有符号整数，Uint32Array 表示每个元素是一个 32 位无符号整数。

创建 TypedArray 的方式如下：

const typedArray = new TypedArray(buffer, byteOffset, length);

其中，buffer 是一个 ArrayBuffer 对象，表示要读取的缓冲区；byteOffset 是一个整数，表示要读取的起始位置（单位是字节），默认为 0；length 是一个整数，表示要读取的元素个数，默认为缓冲区长度减去起始位置除以元素大小。

例如，如果要从一个长度为 16 字节的缓冲区中读取 4 个 32 位无符号整数，可以这样写：

const buffer = new ArrayBuffer(16);
const uint32Array = new Uint32Array(buffer, 0, 4);

TypedArray 的常见类型

ES10 中提供了 9 种 TypedArray 类型，分别是：

Int8Array：每个元素是一个 8 位有符号整数
Uint8Array：每个元素是一个 8 位无符号整数
Uint8ClampedArray：每个元素是一个 8 位无符号整数，超出范围的值会被截断为 0 或 255
Int16Array：每个元素是一个 16 位有符号整数
Uint16Array：每个元素是一个 16 位无符号整数
Int32Array：每个元素是一个 32 位有符号整数
Uint32Array：每个元素是一个 32 位无符号整数
Float32Array：每个元素是一个 32 位浮点数
Float64Array：每个元素是一个 64 位浮点数

TypedArray 的常用操作

TypedArray 可以直接操作 ArrayBuffer 中的数据，常见的操作包括读取、修改、复制和比较。

读取数据

TypedArray 可以通过下标访问元素，例如：

const uint8Array = new Uint8Array([1, 2, 3, 4]);
console.log(uint8Array[0]); // 1
console.log(uint8Array[1]); // 2
console.log(uint8Array[2]); // 3
console.log(uint8Array[3]); // 4

修改数据

TypedArray 可以通过下标修改元素，例如：

const uint8Array = new Uint8Array([1, 2, 3, 4]);
uint8Array[0] = 5;
console.log(uint8Array); // Uint8Array [ 5, 2, 3, 4 ]

复制数据

TypedArray 可以通过 slice 方法复制数据，例如：

const uint8Array1 = new Uint8Array([1, 2, 3, 4]);
const uint8Array2 = uint8Array1.slice();
console.log(uint8Array2); // Uint8Array [ 1, 2, 3, 4 ]

比较数据

TypedArray 可以通过比较运算符比较数据，例如：

const uint8Array1 = new Uint8Array([1, 2, 3, 4]);
const uint8Array2 = new Uint8Array([1, 2, 3, 4]);
console.log(uint8Array1 === uint8Array2); // false
console.log(uint8Array1.toString() === uint8Array2.toString()); // true

示例代码

下面是一个示例代码，演示了如何使用 ArrayBuffer 和 TypedArray 处理二进制数据：

// 创建一个长度为 16 字节的缓冲区
const buffer = new ArrayBuffer(16);

// 创建一个 32 位无符号整数数组
const uint32Array = new Uint32Array(buffer, 0, 4);

// 设置数组元素的值
uint32Array[0] = 1;
uint32Array[1] = 2;
uint32Array[2] = 3;
uint32Array[3] = 4;

// 读取数组元素的值
console.log(uint32Array[0]); // 1
console.log(uint32Array[1]); // 2
console.log(uint32Array[2]); // 3
console.log(uint32Array[3]); // 4

// 复制数组
const uint32Array2 = uint32Array.slice();
console.log(uint32Array2); // Uint32Array [ 1, 2, 3, 4 ]

// 比较数组
console.log(uint32Array === uint32Array2); // false
console.log(uint32Array.toString() === uint32Array2.toString()); // true

总结

本文介绍了 ES10 中的 ArrayBuffer 对象和 TypedArray，它们可以更加方便地处理二进制数据。通过本文的学习，你可以了解 ArrayBuffer 对象和 TypedArray 的使用方法，并掌握常见的操作。在实际开发中，你可以根据自己的需求选择不同的 TypedArray 类型，并灵活运用它们的操作。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658bf4f1eb4cecbf2d144bda