详解 JavaScript 中的 Uint8Array

详解 JavaScript 中的 Uint8Array

什么是 Uint8Array

在 JavaScript 中，Uint8Array 是一种 TypedArray，用于表示一个包含 8 位无符号整数的数组。Uint8Array 对象表示一个用来处理八位无符号整数的类数组结构，此数组中每个元素的类型为无符号八位整数值。

Uint8Array 是 JavaScript 提供的一种高效的机制，可以快速地处理二进制数据，特别是在处理图像、音频、视频等大数据量的场景下具有很好的效果。

Uint8Array 的创建

创建空数组

可以通过以下方式创建一个空的 Uint8Array 数组：

let uint8Array = new Uint8Array();
console.log(uint8Array); // Uint8Array []

通过数组创建

也可以通过指定一个数组来创建 Uint8Array 数组：

let array = [5, 10, 15];
let uint8Array = new Uint8Array(array);
console.log(uint8Array); // Uint8Array [ 5, 10, 15 ]

通过长度创建

除此之外，还可以通过指定数组的长度来创建 Uint8Array 数组，这时候数组的初始值会被填充为 0：

let length = 5;
let uint8Array = new Uint8Array(length);
console.log(uint8Array); // Uint8Array [ 0, 0, 0, 0, 0 ]

通过 ArrayBuffer 创建

另外，我们也可以通过指定一个 ArrayBuffer 来创建 Uint8Array 数组：

let buffer = new ArrayBuffer(4);
let uint8Array = new Uint8Array(buffer);
console.log(uint8Array); // Uint8Array [ 0, 0, 0, 0 ]

Uint8Array 常用操作

读取元素

可以通过下标来访问 Uint8Array 数组中的元素：

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

修改元素

也可以直接修改 Uint8Array 数组中的元素：

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

获取数组长度

可以通过 length 属性获取 Uint8Array 数组的长度：

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

迭代数组

Uint8Array 数组可以像普通数组一样进行迭代操作：

let uint8Array = new Uint8Array([1, 2, 3, 4]);

for(let i = 0; i < uint8Array.length; i++) {
  console.log(uint8Array[i]);
}

运行结果：

1
2
3
4

操作 ArrayBuffer

Uint8Array 对象可以与 ArrayBuffer 进行交互，通过 buffer 属性可以获取对应的 ArrayBuffer 对象：

let buffer = new ArrayBuffer(4);
let uint8Array = new Uint8Array(buffer);

console.log(uint8Array.buffer === buffer); // true

DataView 与 Uint8Array

DataView 对象用于处理 ArrayBuffer 中的数据，可以单独读取和写入 ArrayBuffer 中的特定字节。DataView 对象提供了类似 Uint8Array 的操作，但是可以更灵活地处理二进制数据。

下面是一个通过 DataView 对象来创建和操作 Uint8Array 的示例：

let buffer = new ArrayBuffer(4);
let dataView = new DataView(buffer);

dataView.setUint8(0, 1);
dataView.setUint8(1, 2);
dataView.setUint8(2, 3);
dataView.setUint8(3, 4);

let uint8Array = new Uint8Array(buffer);

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

总结

Uint8Array 是 JavaScript 中处理二进制数据的重要工具之一，通过 Uint8Array 我们可以高效地操作大量的二进制数据。在处理图像、音频、视频等多媒体数据时，Uint8Array 提供了便捷的方法来处理这些数据。同时，Uint8Array 还可以与 ArrayBuffer 和 DataView 等对象进行结合，实现更加灵活和高效的二进制数据操作。