`DataView` in JavaScript

Dieser Artikel erklärt DataView in JavaScript.

Wir werden die grundlegende Verwendung von DataView und spezifische Anwendungsbeispiele im Detail erklären.

YouTube Video

DataView in JavaScript

Das DataView von JavaScript ist eine praktische API zur Manipulation von Daten, die in einem Puffer (ArrayBuffer) in verschiedenen Formaten gespeichert sind. Dies ermöglicht flexibles und effizientes Lesen und Schreiben binärer Daten und spielt eine wichtige Rolle in der Netzwerkommunikation, Dateiverarbeitung und Interaktion mit WebAssembly.

Was ist DataView?

DataView bietet eine Ansichts-Schicht über ein ArrayBuffer-Objekt, das das Lesen und Schreiben verschiedener Datentypen (z. B. Ganzzahlen, Fließkommazahlen und Zeichen) von beliebigen Byte-Versatzpositionen aus ermöglicht. DataView ähnelt TypedArray, zeichnet sich jedoch dadurch aus, dass es Endianheit (Byte-Reihenfolge) spezifizieren und detaillierte Operationen auf Byte-Ebene durchführen kann.

Grundlegende Syntax von DataView

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

DataView verfügt über einen Konstruktor, der einen ArrayBuffer als Argument akzeptiert. In diesem Beispiel wird ein 16-Byte-Puffer erstellt, und DataView wird verwendet, um auf diesen Puffer zuzugreifen. Mit DataView können Sie beim Lesen oder Schreiben von Daten in einem Puffer unterschiedliche Byte-Größen und Endianheit (Big-Endian oder Little-Endian) angeben.

Grundlegende Methoden von DataView

DataView bietet Methoden zum Lesen und Schreiben von Werten verschiedener Datentypen. Diese sind hauptsächlich in get-Methoden zum Lesen von Daten und set-Methoden zum Schreiben unterteilt.

Die Hauptmethoden sind unten aufgeführt.

Methoden zum Lesen von Werten

• getInt8(byteOffset): Liest eine 1-Byte große vorzeichenbehaftete Ganzzahl an der angegebenen Offset-Position aus.
• getUint8(byteOffset): Liest eine 1-Byte große vorzeichenlose Ganzzahl an der angegebenen Offset-Position aus.
• getInt16(byteOffset, littleEndian): Liest eine 2-Byte große vorzeichenbehaftete Ganzzahl aus.
• getUint16(byteOffset, littleEndian): Liest eine 2-Byte große vorzeichenlose Ganzzahl aus.
• getInt32(byteOffset, littleEndian): Liest eine 4-Byte große vorzeichenbehaftete Ganzzahl aus.
• getUint32(byteOffset, littleEndian): Liest eine 4-Byte große vorzeichenlose Ganzzahl aus.
• getFloat32(byteOffset, littleEndian): Liest eine 4-Byte IEEE 754 Gleitkommazahl.
• getFloat64(byteOffset, littleEndian): Liest eine 8-Byte IEEE 754 Gleitkommazahl.

Methoden zum Schreiben von Werten

• setInt8(byteOffset, value): Schreibt einen 1-Byte vorzeichenbehafteten Integer.
• setUint8(byteOffset, value): Schreibt einen 1-Byte vorzeichenlosen Integer.
• setInt16(byteOffset, value, littleEndian): Schreibt einen 2-Byte vorzeichenbehafteten Integer.
• setUint16(byteOffset, value, littleEndian): Schreibt einen 2-Byte vorzeichenlosen Integer.
• setInt32(byteOffset, value, littleEndian): Schreibt einen 4-Byte vorzeichenbehafteten Integer.
• setUint32(byteOffset, value, littleEndian): Schreibt einen 4-Byte vorzeichenlosen Integer.
• setFloat32(byteOffset, value, littleEndian): Schreibt eine 4-Byte IEEE 754 Gleitkommazahl.
• setFloat64(byteOffset, value, littleEndian): Schreibt eine 8-Byte IEEE 754 Gleitkommazahl.

Mit diesen Methoden können Sie flexibel Daten lesen und schreiben, die in einem ArrayBuffer gespeichert sind.

Beispiel für die Verwendung von DataView

Sehen wir uns ein Beispiel für die Manipulation von Binärdaten mit DataView an.

Beispiel 1: Schreiben und Lesen eines 16-Bit-Integer

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 diesem Beispiel wird die Methode setInt16 verwendet, um einen 16-Bit vorzeichenbehafteten Integer im Little-Endian-Format zu schreiben, und die Methode getInt16 liest diesen Wert im Little-Endian-Format aus.

Beispiel 2: Schreiben und Lesen einer Gleitkommazahl

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 diesem Beispiel wird die Methode setFloat64 verwendet, um eine 64-Bit Gleitkommazahl im Big-Endian-Format zu schreiben, und dieser Wert wird mit getFloat64 ausgelesen.

Über Endianness

Sehen wir uns ein Beispiel für das Lesen und Schreiben von Werten im Big-Endian- und Little-Endian-Format mit DataView an.

 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 den DataView-Methoden werden Daten standardmäßig im Big-Endian-Format (Byte-Reihenfolge vom höchstwertigen zum niedrigstwertigen Byte) gespeichert, aber Little-Endian kann optional angegeben werden. Little-Endian kehrt die Byte-Reihenfolge um (vom niedrigstwertigen zum höchstwertigen Byte). Es ist wichtig, die Daten-Endianess korrekt zu behandeln, da verschiedene Systeme und Netzwerkprotokolle unterschiedliche Endianess verwenden.

Unterschied zu TypedArray

Sehen wir uns die Unterschiede zwischen DataView und TypedArray an.

 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 bietet ebenfalls Pufferoperationen basierend auf ArrayBuffer, ist jedoch geeignet für den Umgang mit zusammenhängenden Daten mit fester Länge und festem Format für jeden Datentyp. Andererseits kann DataView flexibel mit verschiedenen Datentypen arbeiten und bietet auch die Kontrolle über die Endianness. Daher ist DataView geeignet, um komplexe Binärdaten zu analysieren und zu erstellen.

Zusammenfassung

DataView ist eine leistungsstarke API zur Verarbeitung von Binärdaten in JavaScript. Sie können direkt auf ArrayBuffer zugreifen, um Daten zu lesen und zu schreiben, wobei Ganzzahlen, Gleitpunktzahlen und Unterschiede in der Byte-Reihenfolge (Endianness) berücksichtigt werden. Es ist nützlich in Situationen wie Netzwerkkommunikation und Dateiformatanalyse und unverzichtbar, wenn Kontrolle auf Byte-Ebene erforderlich ist. Durch die gemeinsame Verwendung mit TypedArray können Sie Binärdaten effizienter verarbeiten.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video