JavaScript ArrayBuffer, tableaux binaires

La plupart du temps, JavaScript travaille avec du texte et du JSON, mais dès que vous manipulez des fichiers, des images, de l'audio, des WebSockets ou des réponses fetch, vous avez affaire à des octets bruts. JavaScript gère ces octets via ArrayBuffer et une famille de vues appelées tableaux typés. Ce chapitre explique ce qu'est chaque élément, comment ils s'articulent et quand les utiliser — avec des exemples exécutables que vous pouvez vérifier vous-même.

Le modèle mental se compose de deux couches :

• ArrayBuffer — un bloc de mémoire brute de longueur fixe. Ce ne sont que des octets ; vous ne pouvez pas les lire ni les écrire directement.
• Les vues (tableaux typés et DataView) — des objets qui interprètent ces octets comme des nombres. Vous lisez et écrivez toujours au travers d'une vue.

Qu'est-ce qu'un ArrayBuffer ?

Un ArrayBuffer est un conteneur générique de longueur fixe pour des données binaires brutes — un bloc de mémoire mesuré en octets. Il n'a aucune notion d'« éléments » ou de types ; il sait seulement combien d'octets il contient. Sa taille est définie à la création et ne peut pas changer.

Pour faire quelque chose avec ces octets, vous encapsulez le buffer dans une vue.

Tableaux typés : des vues sur un buffer

Un tableau typé est une vue qui interprète le buffer comme un tableau de nombres d'un type fixe. L'indexation, l'itération et les opérations arithmétiques fonctionnent comme pour un tableau ordinaire, mais les données résident dans la mémoire brute du buffer, ce qui rend les tableaux typés compacts et rapides pour les grands ensembles de données numériques.

Le type de vue détermine le nombre d'octets que prend chaque élément :

Créer des tableaux typés

Vous pouvez construire un tableau typé à partir d'une longueur, d'un tableau existant, ou sur un buffer existant.

Plusieurs vues peuvent partager un même buffer

C'est l'idée clé : plusieurs vues peuvent coexister sur le même buffer. Écrire via une vue modifie les octets, et toutes les autres vues voient immédiatement le changement. C'est ainsi que vous réinterprétez les mêmes octets de différentes façons.

Dépassement de capacité et écrêtage

Chaque élément a une largeur fixe, donc les valeurs hors plage sont tronquées par modulo (elles sont prises modulo la taille du type). Uint8ClampedArray est l'exception — il écrête à 0…255 à la place, ce qui est exactement ce dont les données de pixels canvas ont besoin.

Découpage et sous-vues

slice() copie vers un tout nouveau buffer, tandis que subarray() renvoie une autre vue sur la même mémoire — moins coûteux, mais les écritures sont partagées.

DataView : types mixtes et boutisme

Un tableau typé impose un seul type et utilise l'ordre des octets natif de la plateforme. DataView est l'alternative bas niveau : elle vous permet de lire et d'écrire différents types à n'importe quel décalage d'octet, et vous laisse choisir l'ordre des octets (boutisme) explicitement. Ce contrôle est essentiel pour analyser les formats de fichiers et les protocoles réseau, où l'ordre des octets est défini par une spécification plutôt que par votre CPU.

Le boutisme est l'ordre dans lequel un nombre multi-octets est stocké : big-endian place l'octet le plus significatif en premier, little-endian le place en dernier. Chaque méthode get/set de DataView prend un indicateur littleEndian (par défaut big-endian).

Voici le même nombre 32 bits écrit dans les deux ordres d'octets pour que vous puissiez voir la différence :

Convertir entre octets et autres types

Les données binaires vivent rarement seules — vous passez constamment de buffers à des chaînes et à des objets de plus haut niveau.

Octets ↔ texte

Pour convertir une chaîne en octets (et inversement), utilisez TextEncoder / TextDecoder, qui encodent en UTF-8. Consultez TextDecoder et TextEncoder pour l'API complète.

Accéder au buffer sous-jacent

Chaque tableau typé expose son buffer, ainsi que byteOffset et byteLength décrivant la région qu'il couvre. C'est ainsi que vous transmettez des octets à une API qui attend un ArrayBuffer.

Où les tableaux binaires sont réellement utilisés

• Fichiers. Lire un fichier en tant qu'ArrayBuffer vous permet d'inspecter les en-têtes, d'analyser des formats ou de téléverser des octets bruts. Voir Blob et l'API File.
• Réseau. fetch(...).arrayBuffer() et les trames binaires WebSocket vous fournissent un ArrayBuffer à décoder.
• Canvas. ctx.getImageData().data est un Uint8ClampedArray d'octets de pixels RGBA que vous pouvez lire et réécrire.
• WebGL / Web Audio. Les tampons de sommets et les échantillons audio sont des tableaux typés pour des raisons de performance.

Exemple : lire un fichier en tant qu'ArrayBuffer

Dans le navigateur, FileReader (ou le plus récent Blob.arrayBuffer()) lit le contenu d'un fichier dans un buffer que vous analysez ensuite avec un DataView ou un tableau typé. Pour un guide plus complet, voir l'API File.

function readBinaryFile(file) {
  const reader = new FileReader();
  reader.onload = () => {
    const view = new DataView(reader.result);
    console.log(view.getUint8(0)); // first byte, e.g. a format signature
  };
  reader.readAsArrayBuffer(file);
}

// Modern alternative:
// const buffer = await file.arrayBuffer();

Bonnes pratiques

• Choisissez le type le plus petit qui convient. Uint8Array pour les flux d'octets, Float64Array pour les calculs précis — utiliser un type plus large que nécessaire gaspille de la mémoire.
• Utilisez DataView seulement quand vous avez besoin de types mixtes ou d'un boutisme fixe. Pour un tableau numérique uniforme, un tableau typé est plus simple et plus rapide.
• Réutilisez les buffers dans les boucles critiques pour réduire les allocations et la pression sur le ramasse-miettes.
• Rappelez-vous que les vues partagent la mémoire — utilisez slice() quand vous avez besoin d'une copie indépendante, subarray() quand vous voulez intentionnellement créer un alias.

Résumé

• Un ArrayBuffer est une mémoire brute de longueur fixe ; vous ne la touchez jamais directement.
• Les tableaux typés voient cette mémoire comme des nombres d'un seul type fixe et se comportent comme des tableaux.
• DataView lit et écrit des types mixtes à des décalages arbitraires avec un boutisme explicite — idéal pour analyser des protocoles et des formats de fichiers.
• Les vues sur le même buffer partagent la mémoire, donc une écriture via l'une est visible par toutes.
• Ces types alimentent les fichiers, les réponses réseau, les pixels canvas, l'audio et WebGL.

Entraînement