`DataView` em JavaScript

Este artigo explica o DataView em JavaScript.

Explicaremos em detalhes o uso básico de DataView e exemplos específicos de sua utilização.

YouTube Video

DataView em JavaScript

O DataView do JavaScript é uma API conveniente para manipular dados armazenados em um buffer (ArrayBuffer) em vários formatos. Isso permite a leitura e escrita flexíveis e eficientes de dados binários, desempenhando um papel importante na comunicação de rede, no processamento de arquivos e na interface com WebAssembly.

O que é o DataView?

DataView fornece uma camada de visualização sobre um objeto ArrayBuffer, permitindo que você leia e escreva diferentes tipos de dados (como inteiros, números de ponto flutuante e caracteres) a partir de qualquer deslocamento de byte. DataView é similar ao TypedArray, mas se caracteriza por sua capacidade de especificar endianness e realizar operações detalhadas no nível de byte.

Sintaxe Básica do DataView

1let buffer = new ArrayBuffer(16);  // Create a 16-byte ArrayBuffer
2let view = new DataView(buffer);    // Manipulate the buffer with a DataView

DataView possui um construtor que aceita um ArrayBuffer como argumento. Neste exemplo, um buffer de 16 bytes é criado, e o DataView é usado para acessar esse buffer. Com o DataView, você pode especificar diferentes tamanhos de byte e endianness (big-endian ou little-endian) ao ler ou escrever dados armazenados em um buffer.

Métodos Básicos do DataView

DataView fornece métodos para leitura e escrita de valores de vários tipos de dados. Eles são principalmente divididos em métodos get para leitura de dados e métodos set para escrita.

Os principais métodos são mostrados abaixo.

Métodos para Leitura de Valores

• getInt8(byteOffset): Lê um inteiro com sinal de 1 byte no deslocamento especificado.
• getUint8(byteOffset): Lê um inteiro sem sinal de 1 byte no deslocamento especificado.
• getInt16(byteOffset, littleEndian): Lê um inteiro com sinal de 2 bytes.
• getUint16(byteOffset, littleEndian): Lê um inteiro sem sinal de 2 bytes.
• getInt32(byteOffset, littleEndian): Lê um inteiro com sinal de 4 bytes.
• getUint32(byteOffset, littleEndian): Lê um inteiro sem sinal de 4 bytes.
• getFloat32(byteOffset, littleEndian): Lê um número de ponto flutuante de 4 bytes no formato IEEE 754.
• getFloat64(byteOffset, littleEndian): Lê um número de ponto flutuante de 8 bytes no formato IEEE 754.

Métodos para Escrever Valores

• setInt8(byteOffset, value): Escreve um inteiro assinado de 1 byte.
• setUint8(byteOffset, value): Escreve um inteiro não assinado de 1 byte.
• setInt16(byteOffset, value, littleEndian): Escreve um inteiro assinado de 2 bytes.
• setUint16(byteOffset, value, littleEndian): Escreve um inteiro não assinado de 2 bytes.
• setInt32(byteOffset, value, littleEndian): Escreve um inteiro assinado de 4 bytes.
• setUint32(byteOffset, value, littleEndian): Escreve um inteiro não assinado de 4 bytes.
• setFloat32(byteOffset, value, littleEndian): Escreve um número de ponto flutuante de 4 bytes no formato IEEE 754.
• setFloat64(byteOffset, value, littleEndian): Escreve um número de ponto flutuante de 8 bytes no formato IEEE 754.

Usando esses métodos, você pode ler e escrever dados armazenados em um ArrayBuffer de maneira flexível.

Exemplo de uso do DataView

Vamos ver um exemplo de manipulação de dados binários usando o DataView.

Exemplo 1: Escrevendo e lendo um inteiro de 16 bits

1let buffer = new ArrayBuffer(4);  // Create a 4-byte buffer
2let view = new DataView(buffer);
3
4// Write a 2-byte integer value in little-endian format
5view.setInt16(0, 32767, true);  // byteOffset: 0, value: 32767, littleEndian: true
6
7// Read the data in little-endian format
8let value = view.getInt16(0, true);
9console.log(value);  // Output: 32767

• Neste exemplo, o método setInt16 é usado para escrever um inteiro assinado de 16 bits no formato little-endian, e o método getInt16 lê esse valor no formato little-endian.

Exemplo 2: Escrevendo e lendo um número de ponto flutuante

1let buffer = new ArrayBuffer(8);  // Create an 8-byte buffer
2let view = new DataView(buffer);
3
4// Write an 8-byte floating-point number
5view.setFloat64(0, 3.14159, false);  // byteOffset: 0, value: 3.14159, bigEndian: false
6
7// Read the data in big-endian format
8let pi = view.getFloat64(0, false);
9console.log(pi);  // Output: 3.14159

• Neste exemplo, o método setFloat64 é usado para escrever um número de ponto flutuante de 64 bits no formato big-endian, e esse valor é lido com getFloat64.

Sobre Endianness

Vamos ver um exemplo de leitura e escrita de valores nos formatos big-endian e little-endian usando o DataView.

 1// Example: Handling Endianness with DataView in TypeScript
 2// Create an ArrayBuffer of 4 bytes
 3const buffer = new ArrayBuffer(4);
 4const view = new DataView(buffer);
 5
 6// Store the same number (0x12345678) in both endian formats
 7// By default, DataView uses big-endian
 8view.setUint32(0, 0x12345678); // Big-endian
 9console.log("Big-endian (default):");
10console.log(buffer);
11
12// Overwrite the buffer with little-endian
13view.setUint32(0, 0x12345678, true); // Little-endian
14console.log("Little-endian:");
15console.log(buffer);
16
17// Read values back in both endian modes
18const bigEndianValue = view.getUint32(0); // Big-endian read
19const littleEndianValue = view.getUint32(0, true); // Little-endian read
20
21console.log("Read as Big-endian:", bigEndianValue.toString(16));
22console.log("Read as Little-endian:", littleEndianValue.toString(16));

Nos métodos do DataView, os dados são armazenados por padrão no formato big-endian (ordem dos bytes do mais significativo para o menos significativo), mas o formato little-endian pode ser especificado opcionalmente. Little-endian inverte a ordem dos bytes (do menos significativo para o mais significativo). É importante lidar corretamente com o endianness dos dados porque diferentes sistemas e protocolos de rede utilizam diferentes tipos de endianness.

Diferença em relação a TypedArray

Vamos ver as diferenças entre DataView e TypedArray.

 1// Example: TypedArray vs DataView
 2
 3// Create a 8-byte buffer
 4const buffer = new ArrayBuffer(8);
 5
 6// --- Using TypedArray (Int32Array) ---
 7const int32View = new Int32Array(buffer);
 8int32View[0] = 42;
 9int32View[1] = 100;
10
11console.log("TypedArray (Int32Array):");
12console.log(int32View); // Int32Array [42, 100]
13
14// --- Using DataView ---
15const dataView = new DataView(buffer);
16
17// Write different types of data at arbitrary byte offsets
18dataView.setInt8(0, 65);         // 1 byte
19dataView.setUint16(1, 500, true); // 2 bytes, little-endian
20dataView.setFloat32(3, 3.14, true); // 4 bytes, little-endian
21
22console.log("\nDataView:");
23console.log("Int8 at 0:", dataView.getInt8(0));      // 65
24console.log("Uint16 at 1:", dataView.getUint16(1, true)); // 500
25console.log("Float32 at 3:", dataView.getFloat32(3, true)); // 3.14
26
27/*
28Output:
29TypedArray (Int32Array):
30Int32Array [42, 100]
31
32DataView:
33Int8 at 0: 65
34Uint16 at 1: 500
35Float32 at 3: 3.140000104904175
36*/

TypedArray também oferece operações de buffer baseadas em ArrayBuffer, mas TypedArray é adequado para operar em dados contíguos com comprimento fixo e formato fixo para cada tipo de dado. Por outro lado, o DataView pode operar de forma flexível em diferentes tipos de dados e também permite o controle sobre a endianness. Portanto, DataView é adequado para analisar e construir dados binários complexos.

Resumo

DataView é uma API poderosa para manipular dados binários no JavaScript. Você pode acessar diretamente o ArrayBuffer para ler e gravar dados considerando inteiros, números de ponto flutuante e diferenças de endianness. É útil em situações como comunicação de rede e análise de formato de arquivos, sendo indispensável quando é necessário controle em nível de byte. Ao usá-lo junto com o TypedArray, é possível realizar uma manipulação de dados binários mais eficiente.

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