`DataView` in JavaScript

Dit artikel legt DataView in JavaScript uit.

We zullen de basisgebruik van DataView en specifieke voorbeelden van het gebruik ervan in detail uitleggen.

YouTube Video

DataView in JavaScript

De DataView in JavaScript is een handige API om gegevens die zijn opgeslagen in een buffer (ArrayBuffer) in verschillende formaten te manipuleren. Dit maakt flexibele en efficiënte lees- en schrijfbewerking van binaire gegevens mogelijk, en speelt een belangrijke rol in netwerkcommunicatie, bestandsverwerking en interfacing met WebAssembly.

Wat is DataView?

DataView biedt een weergavelaag over een ArrayBuffer-object, waarmee je verschillende datatypes (zoals gehele getallen, drijvende-kommagetallen en tekens) vanaf elke byte-offset kunt lezen en schrijven. DataView lijkt op TypedArray, maar onderscheidt zich door de mogelijkheid om endianness te specificeren en gedetailleerde bewerkingen op byteniveau uit te voeren.

Basis-syntaxis van DataView

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

DataView heeft een constructor die een ArrayBuffer als argument aanneemt. In dit voorbeeld wordt een buffer van 16 bytes gemaakt en wordt DataView gebruikt om toegang te krijgen tot die buffer. Met DataView kun je verschillende bytegroottes en endianness (big-endian of little-endian) specificeren bij het lezen van of schrijven naar gegevens die in een buffer zijn opgeslagen.

Basis-methoden van DataView

DataView biedt methoden voor het lezen en schrijven van waarden van verschillende datatypes. Ze zijn voornamelijk verdeeld in get-methoden voor het lezen van gegevens en set-methoden voor het schrijven.

De belangrijkste methoden worden hieronder weergegeven.

Methoden om waarden te lezen

• getInt8(byteOffset): Leest een 1-byte signed integer op de gespecificeerde offset.
• getUint8(byteOffset): Leest een 1-byte unsigned integer op de gespecificeerde offset.
• getInt16(byteOffset, littleEndian): Leest een 2-byte signed integer.
• getUint16(byteOffset, littleEndian): Leest een 2-byte unsigned integer.
• getInt32(byteOffset, littleEndian): Leest een 4-byte signed integer.
• getUint32(byteOffset, littleEndian): Leest een 4-byte unsigned integer.
• getFloat32(byteOffset, littleEndian): Leest een 4-byte IEEE 754 drijvende-kommagetal.
• getFloat64(byteOffset, littleEndian): Leest een 8-byte IEEE 754-commafloating-getal.

Methoden voor het schrijven van waarden

• setInt8(byteOffset, value): Schrijft een 1-byte ondertekend geheel getal.
• setUint8(byteOffset, value): Schrijft een 1-byte geheel getal zonder teken.
• setInt16(byteOffset, value, littleEndian): Schrijft een 2-byte ondertekend geheel getal.
• setUint16(byteOffset, value, littleEndian): Schrijft een 2-byte geheel getal zonder teken.
• setInt32(byteOffset, value, littleEndian): Schrijft een 4-byte ondertekend geheel getal.
• setUint32(byteOffset, value, littleEndian): Schrijft een 4-byte geheel getal zonder teken.
• setFloat32(byteOffset, value, littleEndian): Schrijft een 4-byte IEEE 754-commafloating-getal.
• setFloat64(byteOffset, value, littleEndian): Schrijft een 8-byte IEEE 754-commafloating-getal.

Door gebruik te maken van deze methoden kun je flexibel gegevens lezen en schrijven die in een ArrayBuffer zijn opgeslagen.

Voorbeeld van het gebruik van DataView

Laten we een voorbeeld bekijken van het manipuleren van binaire gegevens met behulp van DataView.

Voorbeeld 1: Het schrijven en lezen van een 16-bits geheel getal

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

• In dit voorbeeld wordt de setInt16-methode gebruikt om een 16-bits ondertekend geheel getal te schrijven in little-endian-indeling, en leest de getInt16-methode deze waarde in little-endian.

Voorbeeld 2: Het schrijven en lezen van een floating-point-getal

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

• In dit voorbeeld wordt de setFloat64-methode gebruikt om een 64-bits floating-point-getal te schrijven in big-endian-indeling, en wordt die waarde gelezen met getFloat64.

Over endianness

Laten we een voorbeeld bekijken van het lezen en schrijven van waarden in zowel big-endian als little-endian indelingen met behulp van 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));

In de methoden van DataView worden gegevens standaard opgeslagen in big-endian (byte-volgorde van meest significante naar minst significante byte), maar optioneel kan little-endian worden opgegeven. Little-endian keert de byte-volgorde om (van minst significante naar meest significante byte). Het is belangrijk om de endianness van gegevens correct te verwerken omdat verschillende systemen en netwerkprotocollen verschillende endianness gebruiken.

Verschil met TypedArray

Laten we kijken naar de verschillen tussen DataView en 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 biedt ook bufferoperaties op basis van ArrayBuffer, maar TypedArray is geschikt voor het werken met aaneengeschakelde gegevens met een vaste lengte en formaat voor elk gegevenstype. Aan de andere kant kan DataView flexibel werken met verschillende gegevenstypen en biedt het ook controle over endianness. Daarom is DataView geschikt voor het parseren en construeren van complexe binaire gegevens.

Samenvatting

DataView is een krachtige API voor het omgaan met binaire gegevens in JavaScript. U kunt direct toegang krijgen tot ArrayBuffer om gegevens te lezen en te schrijven, rekening houdend met gehele getallen, floating-point getallen en verschillen in endianheid. Het is nuttig in situaties zoals netwerkcommunicatie en het ontleden van bestandsindelingen, en het is onmisbaar wanneer byte-niveau controle vereist is. Door het samen te gebruiken met TypedArray, kun je efficiënter binaire gegevens manipuleren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video