Guide du DataView JavaScript : Un Guide pour Débutants

Salut à toi, futur(e) magicien(ne) JavaScript ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte des objets DataView. Ne t'inquiète pas si tu n'en as jamais entendu parler auparavant - d'ici la fin de ce tutoriel, tu manipuleras les données binaires comme un pro !

Qu'est-ce qu'un DataView ?

Avant de plonger dans les détails, penchons-nous sur les bases. Imagine que tu es un/d'une détective et que tu viens de recevoir un paquet mystérieux rempli de données binaires. Comment ferais-tu pour les comprendre ? C'est là que DataView intervient pour te sauver !

Un objet DataView te permet de lire et d'écrire plusieurs types de nombres dans un ArrayBuffer, indépendamment de l'endianness de l'ordinateur (ne t'inquiète pas, nous expliquerons cela plus tard). C'est comme avoir un traducteur universel pour les données binaires !

Syntaxe

Jetons un coup d'œil sur la manière dont nous créons un objet DataView :

new DataView(buffer [, byteOffset [, byteLength]])

Ne laisse pas cela te faire peur ! C'est plus simple qu'il n'y paraît. Décomposons-le :

• buffer : C'est notre ArrayBuffer, le conteneur de nos données binaires.
• byteOffset (optionnel) : Où dans le buffer nous voulons commencer à lire.
• byteLength (optionnel) : Combien d'octets nous voulons inclure dans notre vue.

Exemple : Créer un objet DataView

Mettons les mains dans le cambouis et créons notre premier objet DataView :

// D'abord, nous créons un ArrayBuffer de 16 octets
const buffer = new ArrayBuffer(16);

// Maintenant, créons un DataView de l'ensemble du buffer
const view1 = new DataView(buffer);

// Créons un autre DataView, en partant du byte 12, avec une longueur de 4 octets
const view2 = new DataView(buffer, 12, 4);

console.log(view1.byteLength); // Output: 16
console.log(view2.byteLength); // Output: 4

Dans cet exemple, nous créons d'abord un ArrayBuffer de 16 octets. Pense à cela comme une toile vierge de 16 pixels. Ensuite, nous créons deux objets DataView :

1. view1 couvre l'ensemble du buffer.
2. view2 commence à l'octet 12 et couvre les 4 derniers octets.

C'est comme avoir deux lupes différentes pour observer nos données !

Propriétés de DataView JavaScript

DataView possède quelques propriétés pratiques. Jetons un coup d'œil :

Propriété	Description
buffer	Retourne l'ArrayBuffer référencé par le DataView
byteLength	Retourne la longueur (en octets) du DataView
byteOffset	Retourne le décalage (en octets) du DataView à partir du début de son ArrayBuffer

Voici comment nous pouvons utiliser ces propriétés :

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer, 2, 12);

console.log(view.buffer);       // ArrayBuffer(16)
console.log(view.byteLength);   // 12
console.log(view.byteOffset);   // 2

Dans cet exemple, nous créons un DataView qui commence à l'octet 2 de notre buffer et a une longueur de 12 octets. Les propriétés nous aident à confirmer ces détails.

Méthodes de DataView JavaScript

Passons maintenant à la partie passionnante - les méthodes ! DataView fournit des méthodes pour lire et écrire différents types de nombres. Voici un tableau des méthodes les plus couramment utilisées :

Méthode	Description
getInt8(byteOffset)	Obtient un entier signé 8 bits à l'offset d'octet spécifié
getUint8(byteOffset)	Obtient un entier unsigned 8 bits à l'offset d'octet spécifié
getInt16(byteOffset [, littleEndian])	Obtient un entier signé 16 bits à l'offset d'octet spécifié
getUint16(byteOffset [, littleEndian])	Obtient un entier unsigned 16 bits à l'offset d'octet spécifié
getInt32(byteOffset [, littleEndian])	Obtient un entier signé 32 bits à l'offset d'octet spécifié
getUint32(byteOffset [, littleEndian])	Obtient un entier unsigned 32 bits à l'offset d'octet spécifié
getFloat32(byteOffset [, littleEndian])	Obtient un float 32 bits à l'offset d'octet spécifié
getFloat64(byteOffset [, littleEndian])	Obtient un float 64 bits à l'offset d'octet spécifié

Il existe également des méthodes set correspondantes pour chacun de ces méthodes get.

Voyons quelques-unes de ces méthodes en action :

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);

// Écrivons des données
view.setInt16(0, 42);
view.setFloat32(2, 3.14);

// Maintenant, lisons les données
console.log(view.getInt16(0));   // Output: 42
console.log(view.getFloat32(2)); // Output: 3.140000104904175

Dans cet exemple, nous écrivons un entier 16 bits (42) à l'offset d'octet 0, et un float 32 bits (3.14) à l'offset d'octet 2. Ensuite, nous lisons ces valeurs. Note que la valeur du float n'est pas exactement 3.14 - c'est dû à la manière dont les nombres à virgule flottante sont stockés en binaire.

Le Mystère de l'Endianness

Rappelle-toi quand j'ai mentionné l'endianness plus tôt ? Il est temps de lever le voile sur ce mystère ! L'endianness fait référence à l'ordre dans lequel les octets sont rangés en valeurs numériques plus grandes. Il y en a deux types :

1. Little-endian : Le octet le moins significatif comes en premier.
2. Big-endian : Le octet le plus significatif comes en premier.

Pense à l'écriture d'un nombre : 123 est big-endian (digit le plus significatif en premier), tandis que 321 serait little-endian.

La beauté du DataView est qu'il vous permet de spécifier l'endianness lors de la lecture ou l'écriture de valeurs multi-octets. Voyons un exemple :

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);

view.setUint16(0, 0x1234, true);  // true pour little-endian
view.setUint16(2, 0x5678, false); // false (ou omis) pour big-endian

console.log(view.getUint16(0, true));  // 0x1234
console.log(view.getUint16(0, false)); // 0x3412
console.log(view.getUint16(2, true));  // 0x7856
console.log(view.getUint16(2, false)); // 0x5678

Dans cet exemple, nous écrivons les mêmes valeurs en différentes endianness et les lisons ensuite dans les deux endianness. C'est comme pouvoir lire un livre à la fois de gauche à droite et de droite à gauche !

Conclusion

Félicitations ! Tu viens de faire tes premiers pas dans le monde du DataView. Nous avons couvert la création d'objets DataView, l'utilisation de leurs propriétés, et la manipulation des données avec leurs méthodes. Nous avons même démystifié le mystère de l'endianness !

Souviens-toi, travailler avec des données binaires peut sembler effrayant au début, mais avec DataView, tu as un outil puissant à ta disposition. C'est comme avoir un couteau suisse pour les données binaires - polyvalent, précis et extrêmement utile.

En continuant ton voyage JavaScript, tu trouveras DataView inestimable lorsque tu travailles avec des structures de données binaires complexes, comme celles utilisées dans les formats de fichiers ou les protocoles de réseau. Continue à pratiquer, et bientôt tu manipuleras les bits et les octets comme un véritable détective de code !

Credits: Image by storyset