TypedArray in JavaScript

Questo articolo spiega i TypedArray in JavaScript.

Spiegheremo in dettaglio il concetto base di TypedArray, ogni tipo, come usarli e casi d'uso specifici.

YouTube Video

TypedArray in JavaScript

Un TypedArray in JavaScript è un oggetto per gestire in modo efficiente i dati binari memorizzati in buffer. Il TypedArray alloca e manipola la memoria in base a tipi specifici di dati. A differenza degli array normali, un TypedArray può contenere solo dati binari a dimensione fissa, non tipi di dati arbitrari.

La Struttura di Base di un TypedArray

I principali componenti di un TypedArray sono l'ArrayBuffer e il TypedArray stesso.

• ArrayBuffer: Un buffer a dimensione fissa che alloca dati binari in memoria. Questo buffer è semplicemente un'area dati e non può essere letto o scritto direttamente.
• TypedArray: Un oggetto wrapper che applica un tipo di dato specifico al buffer, consentendo l'accesso e la manipolazione dei dati.

Esempio base di utilizzo

Di seguito è riportato un esempio di creazione di un ArrayBuffer e successivamente di un TypedArray basato su di esso.

 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

• In questo esempio, viene creato un ArrayBuffer, e poi un Uint8Array viene basato su quel buffer. Ogni elemento è trattato come un intero senza segno a 8 bit, memorizzando valori solo entro l'intervallo specificato.

Tipi di TypedArray

Ci sono diversi tipi di TypedArray per ciascun tipo di dato. I principali sono i seguenti.

Questi TypedArray sono tutti efficienti in termini di memoria ed efficaci per gestire grandi quantità di dati.

Manipolazione dei TypedArray

È possibile accedere ai dati in un TypedArray utilizzando gli indici, proprio come in un array normale, ma sono anche forniti diversi metodi speciali.

Impostazione dei valori

In un TypedArray, è possibile assegnare più valori contemporaneamente utilizzando il metodo 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

• Questo codice utilizza il metodo set per assegnare più valori contemporaneamente a un Int16Array e visualizza ogni elemento nella console.

Ottenere un sottoarray

Per ottenere una parte di un TypedArray come sottoarray, utilizza il metodo subarray. Questo fa riferimento allo stesso buffer del TypedArray originale.

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]

• Questo codice recupera un intervallo specifico di elementi da un Int16Array usando il metodo subarray e visualizza il sottoarray nella console.

Copia dei buffer

Il buffer di un TypedArray può essere copiato anche in un altro TypedArray. Utilizzando il metodo set, è possibile copiare da una posizione specificata.

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]

• Questo codice copia il contenuto di un Uint8Array in un altro array utilizzando il metodo set e visualizza l'array copiato nella console.

Uso di DataView

Mentre un TypedArray gestisce buffer con un tipo di dato fisso, DataView è un'interfaccia che consente la manipolazione flessibile di dati binari con offset e tipi di dati arbitrari. Questo consente di mescolare diversi tipi di dati all'interno dello stesso 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

• Questo codice utilizza un DataView per scrivere diversi tipi di dati—interi a 32 bit e numeri in virgola mobile a 32 bit—sullo stesso buffer e verifica i risultati.

• DataView offre una maggiore flessibilità di accesso ai dati rispetto a TypedArray ed è particolarmente utile quando si lavora con file in formato binario o protocolli di rete.

Casi d'uso dei TypedArray

TypedArray è utilizzato principalmente per gestire in modo efficiente grandi quantità di dati binari. I seguenti sono alcuni casi d'uso specifici.

Elaborazione delle immagini

TypedArray viene utilizzato per manipolare le informazioni sui pixel dei dati di immagine. Utilizzando Uint8Array, si mantengono i valori RGBA di ogni pixel e si eseguono modifiche ed elaborazioni delle immagini.

 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}

• Questo codice crea dati immagine con una larghezza di 100 e un'altezza di 100 in formato RGBA utilizzando un Uint8Array e imposta tutti i pixel su rosso.

Interfacciarsi con WebAssembly

TypedArray viene utilizzato per scambiare dati binari tra JavaScript e WebAssembly. Condividendo lo spazio di memoria di JavaScript e WebAssembly tramite ArrayBuffer, è possibile uno scambio rapido di dati.

Elaborazione di dati audio e video

TypedArray svolge un ruolo importante nell'elaborazione di audio e video. È possibile memorizzare le forme d'onda dei dati audio in un Float32Array per eseguire la riproduzione e l'elaborazione.

Conclusione

TypedArray è uno strumento potente per gestire in modo efficiente grandi quantità di dati binari. È particolarmente utile in applicazioni critiche per le prestazioni come l'elaborazione di immagini, WebAssembly e l'elaborazione di dati audio/video. TypedArray ha un'API simile a quella degli array regolari, ma ci sono vincoli riguardo all'uso della memoria e ai tipi di dati, quindi è necessaria una differenziazione corretta nell'uso.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video