TypedArray en JavaScript

Cet article explique TypedArray en JavaScript.

Nous expliquerons en détail le concept de base des TypedArray, chaque type, comment les utiliser et leurs cas d'utilisation spécifiques.

YouTube Video

TypedArray en JavaScript

TypedArray en JavaScript est un objet pour gérer efficacement les données binaires mises en mémoire tampon. TypedArray alloue et manipule la mémoire en fonction de types de données spécifiques. Contrairement aux tableaux classiques, TypedArray peut uniquement contenir des données binaires de taille fixe, et non des types de données arbitraires.

La structure de base de TypedArray

Les principaux composants d'un TypedArray sont le ArrayBuffer et le TypedArray lui-même.

• ArrayBuffer : Un tampon de taille fixe qui alloue des données binaires en mémoire. Ce tampon est simplement une zone de données et ne peut pas être directement lu ou modifié.
• TypedArray : Un objet enveloppe qui applique un type de données spécifique au tampon, permettant ainsi l'accès et la manipulation des données.

Exemple d'utilisation de base

Voici un exemple de création d'un ArrayBuffer suivi de la création d'un TypedArray basé sur celui-ci.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• Dans cet exemple, un ArrayBuffer est créé, suivi de la création d'un Uint8Array basé sur ce tampon. Chaque élément est traité comme un entier non signé de 8 bits, ne stockant que des valeurs dans la plage spécifiée.

Les types de TypedArray

Il existe différents types de TypedArray pour chaque type de données. Les principaux sont les suivants.

Ces TypedArray sont tous économes en mémoire et efficaces pour traiter de grandes quantités de données.

Manipuler les TypedArrays

Vous pouvez accéder aux données dans un TypedArray en utilisant des indices, comme pour un tableau classique, mais plusieurs méthodes spéciales sont également disponibles.

Définir des valeurs

Dans un TypedArray, vous pouvez attribuer plusieurs valeurs en une seule fois en utilisant la méthode set.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• Ce code utilise la méthode set pour attribuer plusieurs valeurs à la fois à un Int16Array et affiche chaque élément dans la console.

Obtenir un sous-tableau

Pour obtenir une partie d'un TypedArray sous forme de sous-tableau, utilisez la méthode subarray. Cela fait référence au même tampon que le TypedArray d'origine.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• Ce code récupère une plage d’éléments spécifiée d’un Int16Array à l’aide de la méthode subarray et affiche le sous-tableau dans la console.

Copier des tampons

Le tampon d'un TypedArray peut également être copié vers un autre TypedArray. En utilisant la méthode set, vous pouvez copier à partir d'une position spécifiée.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• Ce code copie le contenu d’un Uint8Array dans un autre tableau en utilisant la méthode set et affiche le tableau copié dans la console.

Utiliser DataView

Alors qu'un TypedArray gère des tampons avec un type de données fixe, DataView est une interface qui permet de manipuler de manière flexible des données binaires avec des décalages et des types de données arbitraires. Cela permet de mélanger différents types au sein d'un même tampon.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• Ce code utilise un DataView pour écrire différents types de données — des entiers 32 bits et des nombres à virgule flottante 32 bits — sur le même tampon et vérifie les résultats.

• DataView offre une flexibilité d'accès aux données supérieure à TypedArray et est particulièrement utile lors de la manipulation de fichiers au format binaire ou de protocoles réseau.

Cas d'utilisation de TypedArray

TypedArray est principalement utilisé pour gérer efficacement de grandes quantités de données binaires. Les cas d'utilisation spécifiques incluent les suivants :.

Traitement d'images

TypedArray est utilisé pour manipuler les informations de pixels des données d'image. En utilisant Uint8Array, vous stockez les valeurs RGBA de chaque pixel et effectuez l'édition et le traitement d'images.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Ce code crée des données d’image d’une largeur de 100 et d’une hauteur de 100 au format RGBA en utilisant un Uint8Array, et définit tous les pixels sur la couleur rouge.

Interface avec WebAssembly

TypedArray est utilisé pour échanger des données binaires entre JavaScript et WebAssembly. En partageant l'espace mémoire de JavaScript et WebAssembly grâce à ArrayBuffer, un échange rapide de données est possible.

Traitement des données audio et vidéo

TypedArray joue un rôle important dans le traitement de l'audio et de la vidéo. Vous pouvez stocker des formes d'ondes de données audio dans un Float32Array pour effectuer la lecture et le traitement.

Conclusion

TypedArray est un outil puissant pour gérer efficacement de grandes quantités de données binaires. Il est particulièrement utile dans les applications critiques en termes de performances, telles que le traitement d'images, WebAssembly et le traitement des données audio/vidéo. TypedArray possède une API similaire aux tableaux classiques, mais il existe des contraintes concernant l'utilisation de la mémoire et les types de données, donc une différenciation correcte de l'utilisation est nécessaire.

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