`ArrayBuffer` in JavaScript

Questo articolo spiega il ArrayBuffer in JavaScript.

Spiegheremo tutto su ArrayBuffer, dalle basi al suo utilizzo, ai tipi correlati e alle applicazioni pratiche.

YouTube Video

ArrayBuffer in JavaScript

Il ArrayBuffer di JavaScript è un oggetto per gestire dati binari a basso livello ed è particolarmente utile per manipolare dati binari in WebAPI, operazioni sui file e comunicazioni di rete.

Che cos'è il ArrayBuffer

ArrayBuffer è una struttura dati per gestire dati binari a lunghezza fissa. Consente di gestire dati binari grezzi che non possono essere gestiti da array o oggetti JavaScript normali.

ArrayBuffer non può manipolare direttamente i dati. Invece, i dati vengono letti e scritti utilizzando TypedArray o DataView basati su un ArrayBuffer.

ArrayBuffer è particolarmente utile nelle seguenti situazioni.

• Quando si processano dati binari ricevuti dalla rete
• Quando è necessaria una condivisione efficiente dei dati in Web Worker.
• Quando si eseguono elaborazioni di immagini o rendering 3D con Canvas o WebGL.
• Quando si manipolano file (soprattutto file binari).

Creare un ArrayBuffer

Per prima cosa, vediamo come creare un'istanza di ArrayBuffer. ArrayBuffer alloca memoria in unità di byte, quindi è necessario specificarne la dimensione al momento della creazione.

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

• In questo esempio, viene allocato un buffer di 16 byte. Questo buffer non contiene ancora alcun dato.

Manipolare i dati con TypedArray

Non è possibile accedere direttamente a un ArrayBuffer, quindi si utilizza un TypedArray per leggere e scrivere i dati. TypedArray fornisce diversi tipi di viste come Int8Array e Float32Array, consentendo un accesso efficiente ai dati binari.

Esempio con 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 può memorizzare dati in ogni byte, consentendo al buffer di contenere 8 elementi. In questo modo, utilizzando diversi tipi di visualizzazioni, puoi manipolare i dati in modo efficiente.

Altri esempi di TypedArray

JavaScript ha vari tipi di TypedArray. Ad esempio, se desideri gestire interi senza segno a 32 bit, utilizzi Uint32Array.

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

• Un Uint32Array può memorizzare dati in unità di 4 byte, quindi il buffer può contenere quattro elementi. È importante scegliere il TypedArray appropriato in base al tipo di dati che stai gestendo.

Manipolazione flessibile dei dati con DataView

TypedArray può gestire solo dati di un tipo fisso, ma usando DataView puoi scrivere dati di qualsiasi tipo in qualsiasi posizione. Questo è particolarmente utile quando si lavora con buffer che contengono tipi di dati misti.

 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

Utilizzando DataView, puoi specificare un offset in byte e leggere o scrivere dati di vari tipi. Questo è molto utile quando si gestiscono strutture binarie complesse come protocolli di rete o formati di file.

Considerazioni sull'endianness

Quando utilizzi DataView, devi anche prestare attenzione all'endianness (ordine dei byte). A seconda dell'architettura del computer, l'ordine in cui i dati sono memorizzati nella memoria può variare. I metodi di DataView hanno opzioni per specificare l'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 non specifichi il corretto endianness, i dati potrebbero non essere interpretati correttamente in ambienti diversi, quindi è particolarmente importante fare attenzione nelle comunicazioni di rete o nelle operazioni sui file.

Applicazioni di ArrayBuffer

ArrayBuffer è uno strumento potente frequentemente utilizzato nello sviluppo web e nelle API dei browser. Vediamo alcuni esempi di applicazioni.

Ricezione e elaborazione dei dati binari

Ad esempio, puoi recuperare dati binari da un server utilizzando XMLHttpRequest o l'API fetch e gestirli come un 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    });

• In questo esempio, i dati dell'immagine vengono recuperati dal server e gestiti come un Uint8Array. In questo modo, puoi elaborare i dati ricevuti dal server utilizzando ArrayBuffer.

Utilizzo in WebGL

In WebGL, ArrayBuffer viene utilizzato per gestire efficientemente dati binari come dati sui vertici e dati sui colori.

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

• In questo esempio, si utilizza Float32Array per definire le coordinate dei vertici di un rettangolo e inviarle a un buffer WebGL.

Gestione della Memoria e ArrayBuffer

ArrayBuffer gestisce la memoria a livello di byte, rendendolo molto efficiente, ma è necessario prestare attenzione alla gestione della memoria. Quando si lavora con grandi dati binari, è importante rilasciare correttamente gli ArrayBuffer non utilizzati. Sebbene JavaScript esegua automaticamente la garbage collection, se un ArrayBuffer continua ad essere referenziato, può causare perdite di memoria.

Riepilogo

ArrayBuffer fornisce le basi per l'elaborazione dei dati binari in JavaScript. Combinando TypedArray e DataView, è possibile gestire i dati binari in modo efficiente e flessibile. Sono strumenti indispensabili nello sviluppo web, specialmente in molte situazioni che implicano la gestione di dati binari come la comunicazione di rete e WebGL. Capendo correttamente come funzionano e usandoli adeguatamente, è possibile migliorare le prestazioni e l'efficienza.

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

YouTube Video