JavaScript ArrayBuffer
Un ArrayBuffer est un bloc de mémoire fixe, souvent utilisé pour stocker des tableaux typés .
Sur ce bloc, vous pouvez créer différentes vues qui interprètent les bits comme des nombres, des octets ou d'autres types de données.
Création d'un ArrayBuffer
Utilisez new ArrayBuffer() pour créer un nouvel ArrayBuffer.
Exemple
Créez un ArrayBuffer de 16 octets :
// Créer un ArrayBuffer
const myBuf = new ArrayBuffer(16);
// Obtenir la longueur en octets
let len = myBuf.byteLength;
Remarque
La taille d'un ArrayBuffer est spécifiée en octets .
La propriété byteLength représente la taille.
Une fois créé, la taille ne peut pas être modifiée.
Accéder à un ArrayBuffer
L'ArrayBuffer n'a pas de méthodes pour lire et écrire des données.
Vous devez toujours utiliser une vue pour accéder aux données.
Les tableaux typés et les DataViews fournissent un moyen de lire et d'écrire des valeurs numériques dans un ArrayBuffer.
Les tableaux typés courants sont :
- Uint8Array - entiers non signés de 8 bits
- Int16Array - entiers signés de 16 bits
- Int32Array - entiers signés de 32 bits
- Float32Array - nombres à virgule flottante de 32 bits
- Float64Array - nombres à virgule flottante de 64 bits
Utilisation d'un Uint8Array
Exemple
Chaque Uint8 utilise 1 octet.
// Créer un ArrayBuffer
const myBuf = new ArrayBuffer(8);
// Créer une vue Uint8Array
const view = new Uint8Array(myBuf);
// Écrire au maximum 8 valeurs
view[0] = 10;
view[2] = 128;
view[1] = 255;
// Lire les valeurs
let v0 = view[0];
let v1 = view[1];
let v2 = view[2];
Utilisation d'un Int32Array
Exemple
Chaque Int32 utilise 4 octets.
// Créer un ArrayBuffer
const myBuf = new ArrayBuffer(12);
// Créer une vue Int32Array
const view = new Int32Array(myBuf);
// 12 octets = maximum 3 valeurs Int32
view[0] = 100000;
view[1] = 200000;
view[2] = 300000;
// Lire les valeurs
let v0 = view[0];
let v1 = view[1];
let v2 = view[2];
Utilisation d'un DataView
Un DataView est une vue plus flexible pour un ArrayBuffer.
Un DataView vous permet de lire et d'écrire des valeurs de différents types (Int8, Uint16, Float32, etc.).
Un DataView vous permet également de lire et d'écrire des valeurs à n'importe quel décalage d'octet.
Exemple : Lecture et écriture avec DataView
// Créer un ArrayBuffer
const myBuf = new ArrayBuffer(8);
// Créer un DataView
const view = new DataView(myBuf);
// Écrire un entier de 32 bits à l'offset d'octet 0
view.setInt32(0, 123456);
// Écrire un entier de 16 bits à l'offset d'octet 4
view.setInt16(4, 32000);
// Lire les valeurs
let v1 = view.getInt32(0);
let v2 = view.getInt16(4);
Remarque
Les méthodes DataView ont un paramètre optionnel littleEndian (true/false) pour contrôler l'ordre des octets.
Découpage d'un ArrayBuffer
Vous pouvez faire une copie d'une partie d'un ArrayBuffer en utilisant la méthode slice() . Elle renvoie un nouveau ArrayBuffer contenant des octets de la plage spécifiée.
Exemple : ArrayBuffer.slice()
// Créer un ArrayBuffer
const myBuf = new ArrayBuffer(8);
// Créer un Uint8Array
const view = new Uint8Array(myBuf);
// Remplir avec des valeurs de 0 à 7
for (let i = 0; i < view.length; i++) {
view[i] = i;
}
// Créer une copie des octets de 2 à 5 (sans inclure 5)
const sliced = myBuf.slice(2, 5);
const slicedView = new Uint8Array(sliced);
Remarque
La méthode slice() crée un nouveau tampon.
La méthode slice() ne partage pas la mémoire avec le tampon original.
Conversion de chaînes
Exemple
Conversion d'une chaîne en ArrayBuffer (UTF-8)
function stringToArrayBuffer(str) {
const encoder = new TextEncoder();
return encoder.encode(str).buffer;
}
const myBuf = stringToArrayBuffer("Hello");
let len1 = myBuf.byteLength;
Exemple
Conversion d'un ArrayBuffer en chaîne (UTF-8)
function arrayBufferToString(buffer) {
const decoder = new TextDecoder();
return decoder.decode(new Uint8Array(buffer));
}
const encoder = new TextEncoder();
const myBuf = encoder.encode("Hello ArrayBuffer").buffer;
let text = arrayBufferToString(myBuf); Partage d'ArrayBuffer (SharedArrayBuffer)
Un ArrayBuffer n'est pas partagé entre les threads par défaut.
Pour partager la mémoire entre les travailleurs, JavaScript fournit SharedArrayBuffer .
Il se comporte comme un ArrayBuffer , mais son contenu peut être partagé et utilisé avec Atomics .
Exemple : Création d'un SharedArrayBuffer
if (Window.crossOriginIsolated) {
buffer = new SharedArrayBuffer(16);
} else {
buffer = new ArrayBuffer(16);
}
const sharedView = new Int32Array(buffer);
buffer[0] = 42;
let numb = sharedView[0];
Remarque
Les navigateurs peuvent nécessiter des en-têtes de sécurité spéciaux pour activer SharedArrayBuffer (COOP/COEP).
Résumé
- ArrayBuffer est un objet de bas niveau représentant un bloc de mémoire de taille fixe
- Vous ne pouvez pas lire ou écrire directement dans un ArrayBuffer
- Vous utilisez des vues (tableaux typés ou DataView) pour accéder à un ArrayBuffer
- Les tableaux typés sont adaptés aux données numériques uniformes
- DataView est utile pour des données mixtes ou structurées
- Utilisez slice() pour copier des parties d'un ArrayBuffer
- Utilisez un SharedArrayBuffer et Atomics pour la concurrence en mémoire partagée
Cas d'utilisation courants
- Travailler avec des données binaires provenant de fichiers (par exemple, images, vidéos, audio).
- Gérer des protocoles réseau binaires (WebSockets, WebRTC, etc.).
- Effectuer des calculs numériques critiques pour la performance.
- Interopérabilité avec WebAssembly ou d'autres API de bas niveau.
Référence ArrayBuffer
Révisé en décembre 2025
| Propriété / Méthode | Description |
| new ArrayBuffer() | Crée un nouvel ArrayBuffer |
| arrayBuffer.byteLength | La longueur du tampon en octets |
| arrayBuffer.slice() | Renvoie un nouvel ArrayBuffer comme copie d'une portion de ce tampon |
| ArrayBuffer.isView() | Renvoie true si l'argument est une vue sur un ArrayBuffer |
Vues courantes
| Vue | Description | Octets |
| Int8Array | entier signé de 8 bits | 1 |
| Uint8Array | entier non signé de 8 bits | 1 |
| Uint8ClampedArray | entier clamped de 8 bits | 1 |
| Int16Array | entier signé de 16 bits | 2 |
| Uint16Array | entier non signé de 16 bits | 2 |
| Int32Array | entier signé de 32 bits | 4 |
| Uint32Array | entier non signé de 32 bits | 4 |
| Float32Array | virgule flottante de 32 bits | 4 |
| Float64Array | virgule flottante de 64 bits | 8 |
| DataView | Vue générique (tous types) |