`ArrayBuffer` em JavaScript

Este artigo explica o ArrayBuffer em JavaScript.

Vamos explicar tudo sobre ArrayBuffer, desde o básico até seu uso, tipos relacionados e aplicações práticas.

YouTube Video

ArrayBuffer em JavaScript

O ArrayBuffer do JavaScript é um objeto para lidar com dados binários de baixo nível e é particularmente útil para manipular dados binários em WebAPIs, operações de arquivos e comunicações de rede.

O que é ArrayBuffer

ArrayBuffer é uma estrutura de dados para lidar com dados binários de comprimento fixo. Ele permite manipular dados binários brutos que não podem ser tratados por arrays ou objetos regulares do JavaScript.

O próprio ArrayBuffer não pode manipular dados diretamente. Em vez disso, os dados são lidos e escritos usando TypedArray ou DataView baseados em um ArrayBuffer.

ArrayBuffer é especialmente útil nas seguintes situações.

• Ao processar dados binários recebidos da rede
• Quando é necessário compartilhar dados de forma eficiente em Web Worker.
• Ao realizar processamento de imagens ou renderização 3D com Canvas ou WebGL.
• Ao manipular arquivos (especialmente arquivos binários).

Criando um ArrayBuffer

Primeiro, vamos começar com como criar uma instância de ArrayBuffer. ArrayBuffer aloca memória em unidades de byte, então você especifica seu tamanho na criação.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16

• Neste exemplo, um buffer de 16 bytes é alocado. Este buffer ainda não contém nenhum dado.

Manipulando dados com TypedArray

Você não pode acessar diretamente um ArrayBuffer, então você usa um TypedArray para ler e escrever dados. TypedArray fornece diferentes tipos de visões, como Int8Array e Float32Array, permitindo um acesso eficiente aos dados binários.

Exemplo usando 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 pode armazenar dados em cada byte, permitindo que o buffer contenha 8 elementos. Desta forma, ao utilizar diferentes tipos de visualizações, você pode manipular os dados de maneira eficiente.

Outros exemplos de TypedArray

JavaScript possui vários tipos de TypedArray. Por exemplo, se você quiser manipular inteiros sem sinal de 32 bits, use Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456

• Uint32Array pode armazenar dados em unidades de 4 bytes, então o buffer pode conter quatro elementos. É importante escolher o TypedArray adequado com base no tipo de dados que você está manipulando.

Manipulação de dados flexível usando DataView

TypedArray pode manipular apenas dados de um tipo fixo, mas usando DataView, você pode gravar dados de qualquer tipo em qualquer posição. Isso é particularmente útil ao lidar com buffers que contêm tipos de dados mistos.

 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

Usando DataView, você pode especificar um deslocamento de byte e ler ou gravar dados de vários tipos. Isso é muito útil ao lidar com estruturas binárias complexas, como protocolos de rede ou formatos de arquivo.

Consideração sobre ordenação de bytes (Endianness)

Ao usar DataView, você também precisa prestar atenção à ordenação de bytes (endianness). Dependendo da arquitetura do computador, a ordem em que os dados são armazenados na memória pode variar. Os métodos de DataView possuem opções para especificar a ordenação de bytes (endianness).

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

Se você não especificar a ordenação de bytes correta, os dados podem não ser interpretados corretamente em diferentes ambientes, portanto é especialmente importante ter cuidado em comunicações de rede ou operações de arquivo.

Aplicações de ArrayBuffer

ArrayBuffer é uma ferramenta poderosa frequentemente usada no desenvolvimento web e em APIs de navegadores. Vamos analisar alguns exemplos de aplicações.

Recebendo e processando dados binários

Por exemplo, você pode recuperar dados binários de um servidor usando XMLHttpRequest ou a API fetch e manipulá-los como um 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    });

• Neste exemplo, dados de imagem são obtidos do servidor e manipulados como um Uint8Array. Dessa forma, você pode processar os dados recebidos do servidor usando ArrayBuffer.

Uso no WebGL

No WebGL, ArrayBuffer é usado para manipular de forma eficiente dados binários, como dados de vértices e dados de cores.

 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);

• Neste exemplo, Float32Array é usado para definir as coordenadas dos vértices de um retângulo e enviá-las para um buffer WebGL.

Gerenciamento de Memória e ArrayBuffer

ArrayBuffer gerencia a memória no nível de bytes, tornando-a muito eficiente, mas é necessário ter cuidado com o gerenciamento de memória. Ao lidar com grandes dados binários, é importante liberar corretamente os ArrayBuffers não utilizados. Embora o JavaScript realize a coleta de lixo automaticamente, se um ArrayBuffer continuar sendo referenciado, isso pode causar vazamentos de memória.

Resumo

ArrayBuffer fornece a base para o processamento de dados binários no JavaScript. Ao combinar TypedArray e DataView, é possível manipular dados binários de forma eficiente e flexível. Eles são ferramentas indispensáveis no desenvolvimento web, especialmente em muitas situações que envolvem o manuseio de dados binários, como comunicação de rede e WebGL. Ao entendê-los corretamente e usá-los adequadamente, é possível melhorar o desempenho e a eficiência.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video