Signatur
Beschreibung
DataView ermöglicht den direkten Zugriff auf die Rohdaten eines ArrayBuffer. Im Gegensatz zu typisierten Arrays wie Uint8Array oder Float32Array ist DataView nicht an einen einzigen Datentyp gebunden – ein einzelner Buffer kann gemischte Datentypen unterschiedlicher Größe enthalten, was es ideal für das Parsen und Erzeugen von Binärprotokollen (z. B. Netzwerkpakete, Dateiformate wie BMP, WAV) macht.
Ein zentrales Merkmal von DataView ist die explizite Kontrolle über die Byte-Reihenfolge (Endianness): Jede Lese- und Schreibmethode akzeptiert einen optionalen littleEndian-Parameter. So lassen sich Daten plattformunabhängig korrekt interpretieren, ohne auf systemabhängige Gegebenheiten angewiesen zu sein.
DataView wird über einen bestehenden ArrayBuffer (oder SharedArrayBuffer) instanziiert und kann optional auf einen Ausschnitt (Offset + Länge) beschränkt werden. Alle Lese-/Schreiboperationen prüfen Bereichsgrenzen und werfen bei Überschreitung einen RangeError.
- Lesen:
getInt8,getUint8,getInt16,getUint16,getInt32,getUint32,getFloat32,getFloat64,getBigInt64,getBigUint64 - Schreiben:
setInt8,setUint8,setInt16,setUint16,setInt32,setUint32,setFloat32,setFloat64,setBigInt64,setBigUint64
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $buffer Pflicht | ArrayBuffer|SharedArrayBuffer | Der zugrundeliegende Binärpuffer, auf den die DataView-Instanz zugreift. |
|
| $byteOffset | number | 0 | Byte-Offset ab dem Anfang des Buffers, ab dem die DataView beginnt. Muss eine nicht-negative ganze Zahl sein und darf die Buffer-Länge nicht überschreiten. |
| $byteLength | number | buffer.byteLength - byteOffset | Anzahl der Bytes, die die DataView umfasst. Standardmäßig reicht sie bis zum Ende des Buffers. |
Rückgabewert
DataView-Instanz, die auf den angegebenen Bereich des ArrayBuffer zeigt.Beispiele
Grundlegendes Lesen und Schreiben mit expliziter Endianness
// Einen 8-Byte-Buffer erstellen
const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);
// Einen 32-Bit-Integer (Little-Endian) an Offset 0 schreiben
view.setInt32(0, 305419896, true); // 0x12345678
// Denselben Wert als Big-Endian lesen
console.log(view.getInt32(0, false).toString(16)); // "12345678"
// Einzelnes Byte an Offset 4 schreiben und lesen
view.setUint8(4, 255);
console.log(view.getUint8(4)); // 255
// Float64 an Offset 0 schreiben
const view2 = new DataView(new ArrayBuffer(8));
view2.setFloat64(0, Math.PI, true);
console.log(view2.getFloat64(0, true)); // 3.141592653589793Binäres Dateiformat parsen (WAV-Header)
// Simulierter WAV-Header-Buffer (vereinfacht)
const response = await fetch('audio.wav');
const buffer = await response.arrayBuffer();
const view = new DataView(buffer);
// ChunkID: Bytes 0–3 (ASCII "RIFF")
const chunkId = String.fromCharCode(
view.getUint8(0), view.getUint8(1),
view.getUint8(2), view.getUint8(3)
);
// Dateigröße: Bytes 4–7, Little-Endian
const chunkSize = view.getUint32(4, true);
// Abtastrate: Bytes 24–27, Little-Endian
const sampleRate = view.getUint32(24, true);
// Bittiefe: Bytes 34–35, Little-Endian
const bitsPerSample = view.getUint16(34, true);
console.log(`Format: ${chunkId}`);
console.log(`Dateigröße: ${chunkSize + 8} Bytes`);
console.log(`Abtastrate: ${sampleRate} Hz`);
console.log(`Bittiefe: ${bitsPerSample} Bit`);DataView auf Ausschnitt eines SharedArrayBuffer
// SharedArrayBuffer für Worker-Kommunikation
const shared = new SharedArrayBuffer(16);
// Nur Bytes 4–11 (8 Bytes) betrachten
const view = new DataView(shared, 4, 8);
view.setFloat64(0, 1.23456789, true);
console.log(view.getFloat64(0, true)); // 1.23456789
console.log('byteOffset:', view.byteOffset); // 4
console.log('byteLength:', view.byteLength); // 8// Wichtig · Fallstricke
Endianness-Falle: Wird der littleEndian-Parameter weggelassen, verwendet DataView standardmäßig Big-Endian (Network Byte Order). Da x86-Systeme Little-Endian verwenden, führt das Weglassen des Parameters bei Multi-Byte-Typen häufig zu falsch interpretierten Werten – daher immer explizit angeben.
Bereichsprüfungen: Alle get/set-Methoden werfen einen RangeError, wenn der Zugriff über die Grenzen des byteLength hinausgeht. Dies macht DataView sicherer als direktes Puffer-Manipulation in anderen Sprachen.
Performance: Für homogene Arrays (z. B. nur Float32) sind typisierte Arrays wie Float32Array schneller. DataView eignet sich besonders für heterogene oder gemischte Datenstrukturen.
BigInt-Methoden (getBigInt64, setBigUint64 etc.) erfordern ECMAScript 2020 (ES2020) und sind in älteren Umgebungen nicht verfügbar.