JavaScript DataView: Ein Anfängerleitfaden

Hallo da draußen, zukünftige JavaScript-Zauberer! Heute begeben wir uns auf eine aufregende Reise in die Welt der DataView-Objekte. Keine Sorge, wenn Sie noch nie von ihnen gehört haben – bis zum Ende dieses Tutorials werden Sie binäre Daten wie ein Profi handhaben!

Was ist eine DataView?

Bevor wir uns den Details widmen, beginnen wir mit den Grundlagen. Stellen Sie sich vor, Sie sind ein Detektiv und haben gerade ein mysteriöses Paket mit binären Daten erhalten. Wie würden Sie dessen Inhalt verstehen? Genau hier kommt die DataView zur Rettung!

Ein DataView-Objekt ermöglicht es Ihnen, verschiedene Numeriertypen in einem ArrayBuffer zu lesen und zu schreiben, unabhängig von der Byte-Reihenfolge (Endianness) des Computers (keine Sorge, das erklären wir später). Es ist wie ein universeller Übersetzer für binäre Daten!

Syntax

Schauen wir uns an, wie wir ein DataView-Objekt erstellen:

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

Lassen Sie sich davon nicht abschrecken! Es ist einfacher, als es aussieht. Lassen Sie uns das auseinandernehmen:

• buffer: Dies ist unser ArrayBuffer, der Behälter unserer binären Daten.
• byteOffset (optional): Wo im Puffer wir mit dem Lesen beginnen möchten.
• byteLength (optional): Wie viele Bytes wir in unserer Ansicht einschließen möchten.

Beispiel: Erstellen eines DataView-Objekts

Lassen Sie uns die Ärmel hochwerren und unser erstes DataView-Objekt erstellen:

// Zuerst erstellen wir einen ArrayBuffer mit 16 Bytes
const buffer = new ArrayBuffer(16);

// Nun erstellen wir eine DataView des gesamten Puffers
const view1 = new DataView(buffer);

// Lassen Sie uns eine andere DataView erstellen, beginnend bei Byte 12, mit einer Länge von 4 Bytes
const view2 = new DataView(buffer, 12, 4);

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

In diesem Beispiel erstellen wir zuerst einen ArrayBuffer mit 16 Bytes. Stellen Sie es sich als eine leere Leinwand mit 16 Pixeln vor. Dann erstellen wir zwei DataView-Objekte:

1. view1 deckt den gesamten Puffer ab.
2. view2 beginnt bei Byte 12 und deckt die letzten 4 Bytes ab.

Es ist, als hätten wir zwei verschiedene Lupe, um auf unsere Daten zu schauen!

JavaScript DataView-Eigenschaften

DataView bringt einige nützliche Eigenschaften mit. Schauen wir uns diese an:

Eigenschaft	Beschreibung
buffer	Gibt den von der DataView referenzierten ArrayBuffer zurück
byteLength	Gibt die Länge (in Bytes) der DataView zurück
byteOffset	Gibt den Offset (in Bytes) der DataView vom Anfang ihres ArrayBuffer zurück

So können wir diese Eigenschaften verwenden:

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

In diesem Beispiel erstellen wir eine DataView, die bei Byte 2 unseres Puffers beginnt und eine Länge von 12 Bytes hat. Die Eigenschaften helfen uns, diese Details zu bestätigen.

JavaScript DataView-Methoden

Nun kommen wir zum spannenden Teil – die Methoden! DataView bietet Methoden zum Lesen und Schreiben verschiedener Numeriertypen. Hier ist eine Tabelle der am häufigsten verwendeten Methoden:

Methode	Beschreibung
getInt8(byteOffset)	Einen vorzeichenbehafteten 8-Bit-Integer an der angegebenen Byte-Offset-Position lesen
getUint8(byteOffset)	Einen unvorzeichenbehafteten 8-Bit-Integer an der angegebenen Byte-Offset-Position lesen
getInt16(byteOffset [, littleEndian])	Einen vorzeichenbehafteten 16-Bit-Integer an der angegebenen Byte-Offset-Position lesen
getUint16(byteOffset [, littleEndian])	Einen unvorzeichenbehafteten 16-Bit-Integer an der angegebenen Byte-Offset-Position lesen
getInt32(byteOffset [, littleEndian])	Einen vorzeichenbehafteten 32-Bit-Integer an der angegebenen Byte-Offset-Position lesen
getUint32(byteOffset [, littleEndian])	Einen unvorzeichenbehafteten 32-Bit-Integer an der angegebenen Byte-Offset-Position lesen
getFloat32(byteOffset [, littleEndian])	Einen 32-Bit-Float an der angegebenen Byte-Offset-Position lesen
getFloat64(byteOffset [, littleEndian])	Einen 64-Bit-Float an der angegebenen Byte-Offset-Position lesen

Es gibt auch entsprechende set-Methoden für jede dieser get-Methoden.

Sehen wir uns einige dieser Methoden in Aktion an:

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

// Daten schreiben
view.setInt16(0, 42);
view.setFloat32(2, 3.14);

// Daten lesen
console.log(view.getInt16(0));   // Ausgabe: 42
console.log(view.getFloat32(2)); // Ausgabe: 3.140000104904175

In diesem Beispiel schreiben wir einen 16-Bit-Integer (42) bei Byte-Offset 0 und einen 32-Bit-Float (3.14) bei Byte-Offset 2. Dann lesen wir diese Werte zurück. Beachten Sie, dass der Float-Wert nicht genau 3.14 ist – dies liegt daran, wie Fließkommazahlen in Binärformat gespeichert werden.

Das Geheimnis der Endianness

Erinnern Sie sich daran, dass ich earlier von Endianness gesprochen habe? Es ist an der Zeit, dieses Geheimnis zu lüften! Endianness bezieht sich auf die Reihenfolge, in der Bytes zu größeren numerischen Werten zusammengestellt werden. Es gibt zwei Typen:

1. Little-endian: Der vähnwertigste Byte kommt zuerst.
2. Big-endian: Der höhnwertigste Byte kommt zuerst.

Stellen Sie sich vor, wie Sie eine Zahl schreiben: 123 ist big-endian (höhnwertigste Ziffer zuerst), während 321 little-endian wäre.

Das Tolle an DataView ist, dass es Ihnen ermöglicht, die Endianness beim Lesen oder Schreiben mehrbyteiger Werte anzugeben. Sehen wir uns ein Beispiel an:

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

view.setUint16(0, 0x1234, true);  // true für little-endian
view.setUint16(2, 0x5678, false); // false (oder weggelassen) für 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

In diesem Beispiel schreiben wir die gleichen Werte in不同的 Endianness und lesen sie dann in beiden Endianness zurück. Es ist, als könnten Sie ein Buch sowohl von links nach rechts als auch von rechts nach links lesen!

Fazit

Glückwunsch! Sie haben gerade Ihre ersten Schritte in die Welt der DataView unternommen. Wir haben das Erstellen von DataView-Objekten, die Verwendung ihrer Eigenschaften und die Manipulation von Daten mit ihren Methoden behandelt. Wir haben sogar das Geheimnis der Endianness gelüftet!

Erinnern Sie sich daran, dass die Arbeit mit binären Daten zunächst beängstigend erscheinen mag, aber mit DataView haben Sie ein mächtiges Werkzeug zur Verfügung. Es ist wie ein Schweizer Army Knife für binäre Daten – vielseitig, präzise und unglaublich nützlich.

Während Sie Ihre JavaScript-Reise fortsetzen, werden Sie feststellen, dass DataView unersetzlich ist, wenn Sie mit komplexen binären Datenstrukturen wie denen in Dateiformaten oder Netzwerkprotokollen arbeiten. Üben Sie weiter und bald werden Sie Bits und Bytes wie ein echter Codetäter manipulieren können!

Credits: Image by storyset