Guida per Principianti su DataView in JavaScript

Ciao a tutti, futuri maghi di JavaScript! Oggi ci imbarcheremo in un viaggio emozionante nel mondo degli oggetti DataView. Non preoccuparti se non ne hai mai sentito parlare prima - alla fine di questo tutorial, sarai in grado di gestire i dati binari come un professionista!

Cos'è un DataView?

Prima di addentrarci nei dettagli, iniziiamo con le basi. Immagina di essere un detective e di aver ricevuto un plico misterioso pieno di dati binari. Come fareste a capirne il significato? È qui che entra in gioco DataView!

Un oggetto DataView ti permette di leggere e scrivere diversi tipi di numeri in un ArrayBuffer, indipendentemente dall'endianness del computer (non preoccuparti, lo spiegheremo più tardi). È come avere un traduttore universale per i dati binari!

Sintassi

Diamo un'occhiata a come creiamo un oggetto DataView:

new DataView(buffer [, byteOffset [, byteLength]])

Non farti spaventare! È più semplice di come sembra. Scopriamolo:

• buffer: Questo è il nostro ArrayBuffer, il contenitore dei nostri dati binari.
• byteOffset (opzionale): Da dove nel buffer vogliamo iniziare a leggere.
• byteLength (opzionale): Quanti byte vogliamo includere nella nostra vista.

Esempio: Creare un Oggetto DataView

Mettiamo le mani al lavoro e creiamo il nostro primo oggetto DataView:

// Prima, creiamo un ArrayBuffer di 16 byte
const buffer = new ArrayBuffer(16);

// Ora, creiamo un DataView dell'intero buffer
const view1 = new DataView(buffer);

// Creiamo un altro DataView, partendo dal byte 12, con una lunghezza di 4 byte
const view2 = new DataView(buffer, 12, 4);

console.log(view1.byteLength); // Output: 16
console.log(view2.byteLength); // Output: 4

In questo esempio, creiamo prima un ArrayBuffer di 16 byte. Pensa a esso come a una tela bianca di 16 pixel. Poi, creiamo due oggetti DataView:

1. view1 copre l'intero buffer.
2. view2 parte dal byte 12 e copre gli ultimi 4 byte.

È come avere due diverse lenti di ingrandimento per osservare i nostri dati!

Proprietà di JavaScript DataView

DataView arriva con alcune proprietà utili. Diamo un'occhiata:

Proprietà	Descrizione
buffer	Restituisce l'ArrayBuffer referenziato dal DataView
byteLength	Restituisce la lunghezza (in byte) del DataView
byteOffset	Restituisce l'offset (in byte) del DataView dall'inizio del suo ArrayBuffer

Ecco come possiamo utilizzare queste proprietà:

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer, 2, 12);

console.log(view.buffer);       // ArrayBuffer(16)
console.log(view.byteLength);   // 12
console.log(view.byteOffset);   // 2

In questo esempio, creiamo un DataView che parte dal byte 2 del nostro buffer e ha una lunghezza di 12 byte. Le proprietà ci aiutano a confermare questi dettagli.

Metodi di JavaScript DataView

Ora, passiamo alla parte emozionante - i metodi! DataView fornisce metodi per leggere e scrivere diversi tipi di numeri. Ecco una tabella dei metodi più utilizzati:

Metodo	Descrizione
getInt8(byteOffset)	Ottiene un intero a 8 bit con segno alla posizione di byte specificata
getUint8(byteOffset)	Ottiene un intero a 8 bit senza segno alla posizione di byte specificata
getInt16(byteOffset [, littleEndian])	Ottiene un intero a 16 bit con segno alla posizione di byte specificata
getUint16(byteOffset [, littleEndian])	Ottiene un intero a 16 bit senza segno alla posizione di byte specificata
getInt32(byteOffset [, littleEndian])	Ottiene un intero a 32 bit con segno alla posizione di byte specificata
getUint32(byteOffset [, littleEndian])	Ottiene un intero a 32 bit senza segno alla posizione di byte specificata
getFloat32(byteOffset [, littleEndian])	Ottiene un float a 32 bit alla posizione di byte specificata
getFloat64(byteOffset [, littleEndian])	Ottiene un float a 64 bit alla posizione di byte specificata

Ci sono anche metodi set corrispondenti per ciascuno di questi metodi get.

Vediamo alcuni di questi metodi in azione:

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);

// Scriviamo alcuni dati
view.setInt16(0, 42);
view.setFloat32(2, 3.14);

// Ora, leggiamo i dati
console.log(view.getInt16(0));   // Output: 42
console.log(view.getFloat32(2)); // Output: 3.140000104904175

In questo esempio, stiamo scrivendo un intero a 16 bit (42) all'offset di byte 0, e un float a 32 bit (3.14) all'offset di byte 2. Poi, leggiamo questi valori indietro. Nota come il valore del float non sia esattamente 3.14 - questo è dovuto al modo in cui i numeri a virgola mobile sono memorizzati in binario.

Il Mistero dell'Endianness

Ricordi quando ho menzionato l'endianness prima? È giunto il momento di svelare questo mistero! L'endianness si riferisce all'ordine in cui i byte sono disposti nei numeri di grandi dimensioni. Ce ne sono due tipi:

1. Little-endian: Il byte meno significativo viene per primo.
2. Big-endian: Il byte più significativo viene per primo.

Pensa a scrivere un numero: 123 è big-endian (digit più significativo primo), mentre 321 sarebbe little-endian.

La bellezza di DataView è che ti permette di specificare l'endianness quando leggi o scrivi valori a più byte. Vediamo un esempio:

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);

view.setUint16(0, 0x1234, true);  // true per little-endian
view.setUint16(2, 0x5678, false); // false (o omesso) per big-endian

console.log(view.getUint16(0, true));  // 0x1234
console.log(view.getUint16(0, false)); // 0x3412
console.log(view.getUint16(2, true));  // 0x7856
console.log(view.getUint16(2, false)); // 0x5678

In questo esempio, stiamo scrivendo gli stessi valori in diverse endianness e poi leggendoli in entrambe le endianness. È come essere in grado di leggere un libro sia da sinistra a destra che da destra a sinistra!

Conclusione

Congratulazioni! Hai appena fatto i tuoi primi passi nel mondo di DataView. Abbiamo coperto la creazione di oggetti DataView, l'uso delle loro proprietà e la manipolazione dei dati con i loro metodi. Abbiamo persino svelato il mistero dell'endianness!

Ricorda, lavorare con i dati binari può sembrare spaventoso all'inizio, ma con DataView, hai uno strumento potente a tua disposizione. È come avere un coltello svizzero per i dati binari - versatile, preciso e incredibilmente utile.

Mentre continui il tuo viaggio in JavaScript, troverai DataView inestimabile quando lavori con strutture di dati binari complessi, come quelle utilizzate nei formati di file o nei protocolli di rete. Continua a praticare, e presto sarai in grado di manipolare bit e byte come un vero detective di programmazione!

Credits: Image by storyset