Les tableaux typs en JavaScript

Tampon de mmoire et vue : l'architecture des tableaux typs

Afin de permettre une meilleure efficacit et une meilleure flexibilit, l'implmentation des tableaux typs JavaScript est spare entre : les tampons de mmoire (buffers) d'une part et les vues (views) d'autre part. Un tampon de mmoire, implment avec l'objet ArrayBuffer, est un objet qui reprsente un fragment de donnes, il n'a pas de format proprement parler et n'offre aucune fonctionnalit pour accder son contenu. Afin d'accder la mmoire contenue dans le tampon, on doit utiliser une vue. Une vue fournit un contexte (c'est--dire un type de donne, un emplacement pour le dbut de la lecture (offset) et un nombre d'lments ; c'est ce contexte qui permet de dfinir le tableau typ.

[Tableaux typs dans un ArrayBuffer]

ArrayBuffer

Le type ArrayBuffer est un type de donnes gnrique pour reprsenter un tampon de donnes de longueur fixe. Le contenu d'un ArrayBuffer ne peut pas tre manipul directement, il faut pour cela crer une vue sous forme d'un tableau typ ou une vue DataView qui reprsente le tampon dans un format donn et utiliser cet objet pour lire et crire du contenu dans le tampon de donnes.

Les vues sous forme de tableaux typs

Les tableaux typs qui sont les vues sur ces tampons de mmoire possdent des noms explicites correspondant aux types numriques habituels tels que Int8, Uint32, Float64 et ainsi de suite. Il existe un type de tableau typ spcial, Uint8ClampedArray. Ce type permet de ramener (clamp) les valeurs observes entre 0 et 255. Cela peut notamment tre utilis pour traiter les donnes d'un canvas par exemple.

DataView

Le type DataView permet de crer des objets qui seront des interfaces (bas niveau) pour lire/crire des donnes dans le tampon de mmoire. Cela peut par exemple tre utile lorsqu'on souhaite manipuler diffrents types de donnes. Les vues sous forme de tableaux typs suivent le mme boutisme (endianness) que la plate-forme. Avec un objet DataView, il est possible de dfinir l'ordre des octets considrer (qui sera par dfaut du grand boutisme (big-endian) mais qui pourra tre dfini en petit boutisme (little-endian) dans les diffrentes mthodes d'accs/criture).

Les API Web utilisant les tableaux typs

FileReader.prototype.readAsArrayBuffer()

La mthode FileReader.prototype.readAsArrayBuffer() permet de lire le contenu d'un Blob ou File donn.

XMLHttpRequest.prototype.send()

XMLHttpRequest et sa mthode send() peuvent dsormais tre utilises avec un argument qui est un tableau typ ou un ArrayBuffer.

ImageData.data

Un objet du type Uint8ClampedArray qui reprsente un tableau unidimensionnel contenant les donnes de l'image dans l'ordre RGBA, les entiers utiliss sont compris entre 0 et 255 (au sens large).

Exemples

Utiliser les vues et les tampons

Tout d'abord, il faut crer un tampon (buffer). Ici, on cre un tampon de 16 octets :

let buffer = new ArrayBuffer(16);

Grce cette instruction, on dispose dsormais d'un fragment de mmoire dont tous les octets sont pr-initialiss 0. Si c'est dj une bonne chose de faite, cela n'a pas grande utilit. On peut dj confirmer que la longueur du tampon est bien celle spcifie initialement :

if (buffer.byteLength === 16) {
  console.log("Oui, il mesure bien 16 octets.");
} else {
  console.log("Non, ce n'est pas la bonne taille !");
}

Avant qu'on puisse travailler avec ce tampon, il faut crer une vue. Ici, on cre une vue qui traite le tampon comme un tableau d'entiers signs reprsents sur 32 bits :

let int32View = new Int32Array(buffer);

Dsormais, on peut accder aux lments du tableau typ comme avec un tableau classique :

for (let i = 0; i < int32View.length; i++) {
  int32View[i] = i * 2;
}

Ce fragment de code permet de remplir les 4 lments du tableau (4 lments faisant chacun 4 octets, ce qui remplit les 16 octets du tableau) avec les valeurs 0, 2, 4, et 6.

Plusieurs vues sur les mmes donnes

On commence avoir des cas d'utilisation intressants quand on peut crer plusieurs vues sur les mmes donnes. Ainsi, en utilisant le code prcdent, on peut continuer avec :

let int16View = new Int16Array(buffer);

for (let i = 0; i < int16View.length; i++) {
  console.log("lment " + i + " : " + int16View[i]);
}

Ici, on cre une vue pour des lments sur 16 bits qui partage le mme tampon que la vue prcdente (qui tait une vue avec des lments sur 32 bits) et on affiche les valeurs contenues dans le tampon sous formes d'entiers reprsents sur 16 bits. Le rsultat obtenu est ici 0, 0, 2, 0, 4, 0, 6, 0.

On peut aller encore plus loin, par exemple :

int16View[0] = 32;
console.log("L'lment 0 du tableau 32 bits est dsormais " + int32View[0]);

Le rsultat obtenu sera "L'lment 0 du tableau 32 bits est dsormais 32". Autrement dit, les deux tableaux typs construits ne sont que des vues sur le mme tampon de donnes. Ce genre de manipulation peut tre effectu avec n'importe quel type de vue.

Manipuler des structures de donnes complexes

En combinant un mme tampon et plusieurs vues de diffrents types, chacune commenant un endroit diffrent dans le tampon, il est possible d'interagir avec des donnes qui reprsentent des objets contenant plusieurs types de donnes. Cela permet entre autres d'interagir avec des structures de donnes complexes telles que WebGL, ou des fichiers de donnes.

Si on a cette structure C :

struct uneStruct {
  unsigned long id;
  char nom_utilisateur[16];
  float montant;
};

On peut rceptionner les donnes d'un tampon qui contiendrait des objets de ce type grce  :

let buffer = new ArrayBuffer(24);

// ... on lit les donnes dans le tampon ...

let vueId = new Uint32Array(buffer, 0, 1);
let vueNomUtilisateur = new Uint8Array(buffer, 4, 16);
let vueMontant = new Float32Array(buffer, 20, 1);

On peut ensuite accder au montant li un utilisateur, par exemple, avec vueMontant[0].

Convertir un tableau typ en un tableau normal

Dans certains cas d'utilisation, aprs avoir trait un tableau typ, il peut tre utile de convertir le tableau typ en un tableau normal (Array) afin de bnficier des proprits du prototype d'Array. Pour cela, on peut utiliser la mthode Array.from. Si Array.from() n'est pas disponible, on peut effectuer cette conversion de la faon suivante :

const tableauType = new Uint8Array([1, 2, 3, 4]);
const tableauNormal = Array.from(tableauType);

On peut tout aussi bien utiliser la syntaxe de dcomposition d'un tableau :

const tableauType = new Uint8Array([1, 2, 3, 4]);
const tableauNormal = [...tableauType];

Et si Array.from() n'est pas pris en charge, on pourra recourir  :

const tableauType = new Uint8Array([1, 2, 3, 4]);
const tableauNormal = Array.prototype.slice.call(tableauType);

Voir aussi

• Manipuler des chanes encodes en base 64 avec des ArrayBuffers ou des tableaux typs
• Manipuler les pixels d'un canevas plus efficacement avec les tableaux typs (en anglais)
• Les tableaux typs : des donnes binaires arrivent dans le navigateur (en anglais)
• Boutisme sur le glossaire MDN