TypedArray em JavaScript

Este artigo explica o TypedArray em JavaScript.

Explicaremos em detalhes o conceito básico de TypedArray, cada tipo, como usá-los e casos de uso específicos.

YouTube Video

TypedArray em JavaScript

TypedArray em JavaScript é um objeto para manipulação eficiente de dados binários em buffer. TypedArray aloca e manipula memória com base em tipos de dados específicos. Ao contrário de arrays regulares, o TypedArray pode conter apenas dados binários de tamanho fixo, não tipos de dados arbitrários.

A Estrutura Básica do TypedArray

Os principais componentes de um TypedArray são o ArrayBuffer e o próprio TypedArray.

• ArrayBuffer: Um buffer de tamanho fixo que aloca dados binários na memória. Este buffer é apenas uma área de dados e não pode ser lido ou escrito diretamente.
• TypedArray: Um objeto wrapper que aplica um tipo de dado específico ao buffer, permitindo acesso e manipulação de dados.

Exemplo Básico de Uso

A seguir, está um exemplo de criação de um ArrayBuffer e, em seguida, a criação de um TypedArray com base nele.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• Neste exemplo, um ArrayBuffer é criado e, em seguida, um Uint8Array é feito com base nesse buffer. Cada elemento é tratado como um inteiro sem sinal de 8 bits, armazenando valores apenas dentro do intervalo especificado.

Tipos de TypedArray

Existem diferentes tipos de TypedArray para cada tipo de dado. Os principais são os seguintes.

Esses TypedArrays são todos eficientes em termos de memória e eficazes para lidar com grandes volumes de dados.

Manipulação de TypedArrays

Você pode acessar dados em um TypedArray usando índices, assim como em um array comum, mas também são fornecidos vários métodos especiais.

Definindo valores

Em um TypedArray, você pode atribuir vários valores de uma vez usando o método set.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• Este código usa o método set para atribuir vários valores de uma vez a um Int16Array e exibe cada elemento no console.

Obtendo um subarray

Para obter uma parte de um TypedArray como um subarray, use o método subarray. Isso referencia o mesmo buffer do TypedArray original.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• Este código recupera um intervalo especificado de elementos de um Int16Array usando o método subarray e exibe o subarray no console.

Copiando buffers

O buffer de um TypedArray também pode ser copiado para outro TypedArray. Usando o método set, você pode copiar a partir de uma posição especificada.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• Este código copia o conteúdo de um Uint8Array para outro array usando o método set e exibe o array copiado no console.

Usando DataView

Enquanto um TypedArray lida com buffers de tipo de dado fixo, DataView é uma interface que permite a manipulação flexível de dados binários com deslocamentos arbitrários e tipos de dados variados. Isso permite que diferentes tipos sejam misturados dentro do mesmo buffer.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• Este código usa um DataView para gravar diferentes tipos de dados—inteiros de 32 bits e números de ponto flutuante de 32 bits—no mesmo buffer e verifica os resultados.

• DataView oferece maior flexibilidade no acesso aos dados do que TypedArray e é especialmente útil ao trabalhar com arquivos em formato binário ou protocolos de rede.

Casos de uso de TypedArray

TypedArray é usado principalmente para lidar eficientemente com grandes quantidades de dados binários. Casos de uso específicos incluem o seguinte.

Processamento de imagem

TypedArray é usado ao manipular informações de pixel em dados de imagem. Usando Uint8Array, você mantém os valores RGBA de cada pixel e realiza edição e processamento de imagem.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Este código cria dados de imagem com largura de 100 e altura de 100 no formato RGBA usando um Uint8Array e define todos os pixels como vermelhos.

Interagindo com WebAssembly

TypedArray é utilizado para a troca de dados binários entre JavaScript e WebAssembly. Ao compartilhar o espaço de memória do JavaScript e WebAssembly através de ArrayBuffer, é possível realizar uma troca rápida de dados.

Processamento de dados de áudio e vídeo

TypedArray desempenha um papel importante no processamento de áudio e vídeo. Você pode armazenar formas de onda de dados de áudio em Float32Array para realizar reprodução e processamento.

Conclusão

TypedArray é uma ferramenta poderosa para lidar eficientemente com grandes quantidades de dados binários. É particularmente útil em aplicações críticas para desempenho, como processamento de imagens, WebAssembly e processamento de dados de áudio/vídeo. TypedArray possui uma API semelhante à de arrays comuns, mas há restrições quanto ao uso de memória e tipos de dados, então é necessário diferenciar o uso de forma adequada.

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