ES11 新特性：Int8Array 和 Uint8Array 视图及它们的用例

前言

在 ES11 中，JavaScript 数组得到了一些增强，其中 Int8Array 和 Uint8Array 视图有很多令人兴奋的特性。这些视图给了前端开发者在处理二进制数据时更多的处理能力和更加高效的性能，提供了更多的工具来处理音频、视频、压缩等方面的数据。在本文中，我们将介绍 Int8Array 和 Uint8Array 视图的用例以及使用方法。

理解 Int8Array 和 Uint8Array 视图

Int8Array 视图是一个固定长度的数值数组，类似于数组，但是它们存储的是 8 位整数值，每个整数占据一个位置。该数组建立时需要指定长度或使用已有的 ArrayBuffer 对象作为参数进行创建。

Uint8Array 视图是一个固定长度的数值数组，类似于数组，但是它们存储的是 8 位无符号整数值，每个整数占据一个位置。该数组建立时需要指定长度或使用已有的 ArrayBuffer 对象作为参数进行创建。

Int8Array 和 Uint8Array 视图的用例

处理二进制数据

Int8Array 和 Uint8Array 视图可以被用于处理不允许处理字符串的二进制数据，例如音频、视频、压缩。下面是一个使用基本加载音频文件的例子：

// www.javascriptcn.com code example
async function getAudioData() {
  const response = await fetch("audio.mp3");
  const arrayBuffer = await response.arrayBuffer();

  const int8Array = new Int8Array(arrayBuffer);
  const uint8Array = new Uint8Array(arrayBuffer);

  console.log(int8Array); // Int8Array(500000) [...]
  console.log(uint8Array); // Uint8Array(500000) [...]
}

在这个例子中，我们使用 fetch 获取音频文件的数组缓冲区，然后创建了 Int8Array 和 Uint8Array 视图，以便进行处理音频数据的工作。

WebSocket 数据传输

WebSocket 客户端和服务器之间的数据通信可以使用 Int8Array 和 Uint8Array 视图。WebSocket 协议通过数据帧进行数据传输。可以将二进制数据作为该帧的有效负载的一部分。通过使用 ArrayBuffer 和 Int8Array 或 Uint8Array 视图，可以轻松地进行对帧的解析和处理。

// www.javascriptcn.com code example
const arrayBuffer = new ArrayBuffer(8);
const int8Array = new Int8Array(arrayBuffer);

int8Array[0] = 1;
int8Array[1] = 2;
int8Array[2] = 3;
int8Array[3] = 4;
int8Array[4] = 5;
int8Array[5] = 6;
int8Array[6] = 7;
int8Array[7] = 8;

const socket = new WebSocket("ws://localhost:8080");

socket.addEventListener("open", () => {
  socket.send(int8Array.buffer);
});

图像处理

Int8Array 和 Uint8Array 视图可以用于图像处理，可以提高性能和处理其他类型的数据。 以下是基本图像处理的示例：

// www.javascriptcn.com code example
const img = new Image();
img.src = "image.gif";

img.onload = () => {
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const uint8ClampedArray = new Uint8ClampedArray(imageData.data.buffer);

  for (let i = 0; i < uint8ClampedArray.length; i += 4) {
    const [r, g, b, a] = uint8ClampedArray.slice(i, i + 4);
    uint8ClampedArray.set([a, b, g, r], i);
  }

  const newImageData = new ImageData(uint8ClampedArray, imageData.width, imageData.height);
  ctx.putImageData(newImageData, 0, 0);
};

结论

Int8Array 和 Uint8Array 视图提供了更高效的二进制数据处理方式，可以用于处理音频、视频、压缩、图像处理以及 WebSocket 数据传输等领域。在实践中，这些视图可以提供更好的性能、更灵活的数据处理、更多的功能，对于产品的开发和优化都有重要的作用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67298bee2e7021665e24de1b