`ArrayBuffer` en JavaScript

Cet article explique ArrayBuffer en JavaScript.

Nous expliquerons tout sur ArrayBuffer, des bases à son utilisation, en passant par les types associés et les applications pratiques.

YouTube Video

ArrayBuffer en JavaScript

ArrayBuffer en JavaScript est un objet permettant de gérer des données binaires de bas niveau et est particulièrement utile pour manipuler des données binaires dans les WebAPIs, les opérations sur les fichiers et les communications réseau.

Qu'est-ce qu'ArrayBuffer

ArrayBuffer est une structure de données utilisée pour gérer des données binaires de longueur fixe. Il permet de manipuler des données binaires brutes qui ne peuvent pas être gérées par les tableaux ou objets JavaScript classiques.

ArrayBuffer ne peut pas directement manipuler les données. Les données sont lues et écrites en utilisant TypedArray ou DataView basés sur un ArrayBuffer.

ArrayBuffer est particulièrement utile dans les situations suivantes.

• Lors du traitement de données binaires reçues depuis le réseau
• Lorsque le partage efficace de données dans un Web Worker est nécessaire.
• Lors du traitement d'images ou du rendu 3D avec Canvas ou WebGL.
• Lors de la manipulation de fichiers (en particulier des fichiers binaires).

Créer un ArrayBuffer

Commençons par voir comment créer une instance d'ArrayBuffer. ArrayBuffer alloue de la mémoire en unités d'octet, vous devez donc spécifier sa taille lors de la création.

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

• Dans cet exemple, un tampon de 16 octets est alloué. Ce tampon ne contient encore aucune donnée.

Manipuler les données avec TypedArray

Vous ne pouvez pas accéder directement à un ArrayBuffer, vous utilisez donc un TypedArray pour lire et écrire des données. TypedArray propose différents types de vues, comme Int8Array et Float32Array, permettant un accès efficace aux données binaires.

Exemple avec 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 peut stocker des données dans chaque octet, permettant ainsi au tampon de contenir 8 éléments. De cette manière, en utilisant différents types de vues, vous pouvez manipuler les données efficacement.

Autres exemples de TypedArray

JavaScript propose plusieurs types de TypedArray. Par exemple, si vous souhaitez manipuler des entiers non signés de 32 bits, utilisez Uint32Array.

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

• Uint32Array peut stocker des données en unités de 4 octets, donc le tampon peut contenir quatre éléments. Il est important de choisir le TypedArray approprié en fonction du type de données que vous traitez.

Manipulation flexible des données avec DataView

TypedArray ne peut gérer que des données d'un type fixe, mais en utilisant DataView, vous pouvez écrire des données de n'importe quel type à n'importe quel emplacement. C'est particulièrement utile lorsqu'il s'agit de buffers contenant des types de données mixtes.

 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

En utilisant DataView, vous pouvez spécifier un décalage en octets et lire ou écrire des données de différents types. Cela est très utile lors de la manipulation de structures binaires complexes telles que les protocoles réseau ou les formats de fichiers.

Considération de l'endianness

Lors de l'utilisation de DataView, vous devez également porter attention à l'endianness (ordre des octets). Selon l'architecture de l'ordinateur, l'ordre dans lequel les données sont stockées en mémoire peut varier. Les méthodes de DataView disposent d'options pour spécifier 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

Si vous ne spécifiez pas l'endianness correcte, les données pourraient ne pas être correctement interprétées dans différents environnements. Il est donc particulièrement important de faire preuve de prudence lors des communications réseau ou des opérations sur fichiers.

Applications de ArrayBuffer

ArrayBuffer est un outil puissant souvent utilisé dans le développement web et les API des navigateurs. Voyons quelques exemples d'applications.

Réception et traitement de données binaires

Par exemple, vous pouvez récupérer des données binaires depuis un serveur en utilisant XMLHttpRequest ou l'API fetch, et les traiter comme 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    });

• Dans cet exemple, des données d'image sont récupérées depuis le serveur et traitées comme un Uint8Array. De cette manière, vous pouvez traiter les données reçues du serveur en utilisant ArrayBuffer.

Utilisation dans WebGL

Dans WebGL, ArrayBuffer est utilisé pour gérer efficacement des données binaires telles que les données de vertex et les données de couleur.

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

• Dans cet exemple, un Float32Array est utilisé pour définir les coordonnées des sommets d'un rectangle et les envoyer à un buffer WebGL.

Gestion de la mémoire et ArrayBuffer

ArrayBuffer gère la mémoire au niveau des octets, ce qui le rend très efficace, mais il est également nécessaire d'être attentif à la gestion de la mémoire. Lorsqu'on traite des données binaires volumineuses, il est important de libérer correctement les ArrayBuffer inutilisés. Bien que JavaScript effectue automatiquement la récupération de mémoire (garbage collection), si un ArrayBuffer continue d'être référencé, cela peut entraîner des fuites de mémoire.

Résumé

ArrayBuffer constitue la base pour le traitement des données binaires en JavaScript. En combinant TypedArray et DataView, il est possible de manipuler efficacement et de manière flexible les données binaires. Ce sont des outils indispensables dans le développement web, en particulier dans de nombreuses situations impliquant la manipulation de données binaires telles que la communication réseau et le WebGL. En les comprenant correctement et en les utilisant de manière appropriée, vous pouvez améliorer les performances et l'efficacité.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video