`DataView` en JavaScript

Cet article explique le DataView en JavaScript.

Nous expliquerons en détail l'utilisation de base de DataView et des exemples spécifiques de son utilisation.

YouTube Video

DataView en JavaScript

Le DataView de JavaScript est une API pratique pour manipuler les données stockées dans un tampon (ArrayBuffer) sous divers formats. Cela permet une lecture et une écriture flexibles et efficaces des données binaires, jouant un rôle important dans la communication réseau, le traitement des fichiers et l'interfaçage avec WebAssembly.

Qu'est-ce que DataView ?

DataView fournit une couche de vue sur un objet ArrayBuffer, permettant de lire et d'écrire différents types de données (tels que des entiers, des nombres à virgule flottante et des caractères) à partir de n'importe quel décalage d'octet. DataView est similaire à TypedArray, mais se caractérise par sa capacité à spécifier l'endianness et à effectuer des opérations détaillées au niveau du byte.

Syntaxe de base de DataView

1let buffer = new ArrayBuffer(16);  // Create a 16-byte ArrayBuffer
2let view = new DataView(buffer);    // Manipulate the buffer with a DataView

DataView possède un constructeur qui prend un ArrayBuffer comme argument. Dans cet exemple, un tampon de 16 octets est créé et DataView est utilisé pour y accéder. Avec DataView, vous pouvez spécifier différentes tailles de bytes et l'endianness (big-endian ou little-endian) lors de la lecture ou de l'écriture de données stockées dans un tampon.

Méthodes de base de DataView

DataView fournit des méthodes pour lire et écrire des valeurs de divers types de données. Elles sont principalement divisées en méthodes get pour la lecture des données et en méthodes set pour l'écriture.

Les principales méthodes sont décrites ci-dessous.

Méthodes pour la lecture des valeurs

• getInt8(byteOffset): Lit un entier signé d'1 byte à l'offset spécifié.
• getUint8(byteOffset): Lit un entier non signé d'1 byte à l'offset spécifié.
• getInt16(byteOffset, littleEndian): Lit un entier signé de 2 bytes.
• getUint16(byteOffset, littleEndian): Lit un entier non signé de 2 bytes.
• getInt32(byteOffset, littleEndian): Lit un entier signé de 4 bytes.
• getUint32(byteOffset, littleEndian): Lit un entier non signé de 4 bytes.
• getFloat32(byteOffset, littleEndian): Lit un nombre à virgule flottante IEEE 754 sur 4 octets.
• getFloat64(byteOffset, littleEndian): Lit un nombre à virgule flottante IEEE 754 sur 8 octets.

Méthodes pour écrire des valeurs

• setInt8(byteOffset, value): Écrit un entier signé sur 1 octet.
• setUint8(byteOffset, value): Écrit un entier non signé sur 1 octet.
• setInt16(byteOffset, value, littleEndian): Écrit un entier signé sur 2 octets.
• setUint16(byteOffset, value, littleEndian): Écrit un entier non signé sur 2 octets.
• setInt32(byteOffset, value, littleEndian): Écrit un entier signé sur 4 octets.
• setUint32(byteOffset, value, littleEndian): Écrit un entier non signé sur 4 octets.
• setFloat32(byteOffset, value, littleEndian): Écrit un nombre à virgule flottante IEEE 754 sur 4 octets.
• setFloat64(byteOffset, value, littleEndian): Écrit un nombre à virgule flottante IEEE 754 sur 8 octets.

En utilisant ces méthodes, vous pouvez lire et écrire de manière flexible les données stockées dans un ArrayBuffer.

Exemple d’utilisation de DataView

Voyons un exemple de manipulation de données binaires à l’aide de DataView.

Exemple 1 : Écriture et lecture d’un entier 16 bits

1let buffer = new ArrayBuffer(4);  // Create a 4-byte buffer
2let view = new DataView(buffer);
3
4// Write a 2-byte integer value in little-endian format
5view.setInt16(0, 32767, true);  // byteOffset: 0, value: 32767, littleEndian: true
6
7// Read the data in little-endian format
8let value = view.getInt16(0, true);
9console.log(value);  // Output: 32767

• Dans cet exemple, la méthode setInt16 est utilisée pour écrire un entier signé 16 bits en format little-endian, et la méthode getInt16 pour lire cette valeur en little-endian.

Exemple 2 : Écriture et lecture d’un nombre à virgule flottante

1let buffer = new ArrayBuffer(8);  // Create an 8-byte buffer
2let view = new DataView(buffer);
3
4// Write an 8-byte floating-point number
5view.setFloat64(0, 3.14159, false);  // byteOffset: 0, value: 3.14159, bigEndian: false
6
7// Read the data in big-endian format
8let pi = view.getFloat64(0, false);
9console.log(pi);  // Output: 3.14159

• Dans cet exemple, la méthode setFloat64 est utilisée pour écrire un nombre à virgule flottante 64 bits en format big-endian, et cette valeur est lue avec getFloat64.

À propos de l’endianness

Voyons un exemple de lecture et d’écriture de valeurs aux formats big-endian et little-endian à l’aide de DataView.

 1// Example: Handling Endianness with DataView in TypeScript
 2// Create an ArrayBuffer of 4 bytes
 3const buffer = new ArrayBuffer(4);
 4const view = new DataView(buffer);
 5
 6// Store the same number (0x12345678) in both endian formats
 7// By default, DataView uses big-endian
 8view.setUint32(0, 0x12345678); // Big-endian
 9console.log("Big-endian (default):");
10console.log(buffer);
11
12// Overwrite the buffer with little-endian
13view.setUint32(0, 0x12345678, true); // Little-endian
14console.log("Little-endian:");
15console.log(buffer);
16
17// Read values back in both endian modes
18const bigEndianValue = view.getUint32(0); // Big-endian read
19const littleEndianValue = view.getUint32(0, true); // Little-endian read
20
21console.log("Read as Big-endian:", bigEndianValue.toString(16));
22console.log("Read as Little-endian:", littleEndianValue.toString(16));

Dans les méthodes de DataView, les données sont stockées par défaut en big-endian (ordre des octets du plus significatif au moins significatif), mais le little-endian peut être spécifié en option. Le little-endian inverse l’ordre des octets (du moins significatif au plus significatif). Il est important de gérer correctement l’ordre des octets des données, car différents systèmes et protocoles réseau utilisent des ordres différents.

Différence avec TypedArray

Voyons les différences entre DataView et TypedArray.

 1// Example: TypedArray vs DataView
 2
 3// Create a 8-byte buffer
 4const buffer = new ArrayBuffer(8);
 5
 6// --- Using TypedArray (Int32Array) ---
 7const int32View = new Int32Array(buffer);
 8int32View[0] = 42;
 9int32View[1] = 100;
10
11console.log("TypedArray (Int32Array):");
12console.log(int32View); // Int32Array [42, 100]
13
14// --- Using DataView ---
15const dataView = new DataView(buffer);
16
17// Write different types of data at arbitrary byte offsets
18dataView.setInt8(0, 65);         // 1 byte
19dataView.setUint16(1, 500, true); // 2 bytes, little-endian
20dataView.setFloat32(3, 3.14, true); // 4 bytes, little-endian
21
22console.log("\nDataView:");
23console.log("Int8 at 0:", dataView.getInt8(0));      // 65
24console.log("Uint16 at 1:", dataView.getUint16(1, true)); // 500
25console.log("Float32 at 3:", dataView.getFloat32(3, true)); // 3.14
26
27/*
28Output:
29TypedArray (Int32Array):
30Int32Array [42, 100]
31
32DataView:
33Int8 at 0: 65
34Uint16 at 1: 500
35Float32 at 3: 3.140000104904175
36*/

TypedArray fournit également des opérations sur le tampon basées sur ArrayBuffer, mais TypedArray est adapté à la manipulation de données contiguës avec une longueur et un format fixes pour chaque type de données. En revanche, DataView peut manipuler différents types de données de manière flexible et permet également de contrôler l’endianness. Par conséquent, DataView est adapté pour analyser et construire des données binaires complexes.

Résumé

DataView est une API puissante pour manipuler des données binaires en JavaScript. Vous pouvez accéder directement à ArrayBuffer pour lire et écrire des données tout en prenant en compte les entiers, les nombres à virgule flottante et les différences d'endianness. Il est utile dans des situations comme la communication réseau et l'analyse des formats de fichiers, et est indispensable lorsque le contrôle au niveau des octets est nécessaire. En l’utilisant avec TypedArray, vous pouvez manipuler les données binaires de manière plus efficace.

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