Signatur
Beschreibung
Der Konstruktor DataView() legt eine Sicht auf einen vorhandenen ArrayBuffer oder SharedArrayBuffer an. Anders als typisierte Arrays wie Uint8Array oder Float32Array ist eine DataView nicht auf einen einzelnen Elementtyp festgelegt. Mit Methoden wie getUint16(), setFloat32() oder getBigInt64() lassen sich an jedem beliebigen Byte-Offset unterschiedliche Zahlentypen lesen und schreiben.
Der größte Vorteil ist die ausdrückliche Wahl der Byte-Reihenfolge (Endianness). Typisierte Arrays verwenden immer die Byte-Reihenfolge der jeweiligen Plattform, in der Praxis fast immer Little-Endian. Bei DataView gibst du dagegen bei jedem Zugriff an, ob Big-Endian (Standard) oder Little-Endian gilt. Deshalb eignet sich DataView besonders zum Auslesen von Dateiformaten (WAV, PNG, BMP, ZIP), Netzwerkprotokollen und Binärnachrichten aus WebSockets oder fetch().
Die DataView kopiert keine Daten, sondern verweist auf denselben Speicher. Änderungen über die DataView sind also sofort in allen anderen Sichten auf denselben Puffer sichtbar. Mit byteOffset und byteLength lässt sich die Sicht auf einen Ausschnitt des Puffers begrenzen, etwa auf den Header einer Datei.
Der Konstruktor muss mit new aufgerufen werden. Ein Aufruf als normale Funktion wirft einen TypeError.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $buffer Pflicht | ArrayBuffer | SharedArrayBuffer | Der Puffer, auf dem die Sicht arbeitet. Ein typisiertes Array ist hier nicht erlaubt. Verwende stattdessen typedArray.buffer. |
|
| $byteOffset | number | 0 | Byte-Position im Puffer, an der die Sicht beginnt. Liegt der Wert außerhalb des Puffers, wird ein RangeError geworfen. |
| $byteLength | number | buffer.byteLength - byteOffset | Länge der Sicht in Bytes. Fehlt der Wert, reicht die Sicht bis zum Ende des Puffers. Bei einem größenveränderbaren Puffer wächst sie dann automatisch mit. Ragt byteOffset + byteLength über das Pufferende hinaus, wird ein RangeError geworfen. |
Rückgabewert
DataView-Objekt für den angegebenen Bereich des Puffers.Beispiele
DataView erzeugen und Werte mit Endianness schreiben
const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);
// 16-Bit-Wert als Big-Endian (Standard) schreiben
view.setUint16(0, 0x1234);
// 32-Bit-Wert als Little-Endian schreiben
view.setUint32(2, 0xdeadbeef, true);
console.log(new Uint8Array(buffer));
console.log(view.getUint16(0).toString(16));
console.log(view.getUint32(2, true).toString(16));Ausschnitt eines Puffers mit byteOffset und byteLength
const buffer = new ArrayBuffer(16);
// Sicht nur auf die Bytes 4 bis 11
const view = new DataView(buffer, 4, 8);
view.setFloat64(0, Math.PI);
console.log(view.byteOffset, view.byteLength);
// Derselbe Speicher über eine zweite Sicht
console.log(new DataView(buffer).getFloat64(4));WAV-Header aus einer heruntergeladenen Datei lesen
const readWavInfo = async (url) => {
const response = await fetch(url);
const buffer = await response.arrayBuffer();
const view = new DataView(buffer, 0, 44); // Standard-WAV-Header
const text = (offset, length) =>
String.fromCharCode(...new Uint8Array(buffer, offset, length));
if (text(0, 4) !== 'RIFF' || text(8, 4) !== 'WAVE') {
throw new Error('Keine gültige WAV-Datei');
}
// WAV speichert Zahlen als Little-Endian
return {
kanaele: view.getUint16(22, true),
abtastrate: view.getUint32(24, true),
bitsProSample: view.getUint16(34, true)
};
};
readWavInfo('/audio/beispiel.wav').then(console.log);DataView auf ein vorhandenes typisiertes Array
const bytes = new Uint8Array([0x00, 0x00, 0x80, 0x3f, 0xff]);
// Nicht bytes selbst übergeben, sondern dessen Puffer mit Offset und Länge
const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
console.log(view.getFloat32(0, true));// Wichtig · Fallstricke
- Standard ist Big-Endian: Ohne
littleEndian = truelesen und schreiben alleget…- undset…-Methoden in Big-Endian-Reihenfolge. Typisierte Arrays arbeiten dagegen fast immer in Little-Endian. Werden beide gemischt, entstehen leicht vertauschte Bytes. - Nur Puffer als erstes Argument:
new DataView(new Uint8Array(4))wirft einenTypeError. ÜbergibtypedArray.bufferzusammen mitbyteOffsetundbyteLength. Das gilt auch für Node.js-Buffer, die sich oft einen größeren gemeinsamen Speicherbereich teilen. - RangeError: Wenn Offset oder Länge über den Puffer hinausgehen, wirft schon der Konstruktor einen Fehler. Dasselbe gilt für jeden späteren Zugriff außerhalb der Sicht.
- Abgetrennte Puffer: Wird der Puffer abgetrennt (detached), etwa durch
postMessagemit Übertragungsliste oder durchArrayBuffer.prototype.transfer(), wirft jeder weitere Zugriff einenTypeError. - Größenveränderbare Puffer (ES2024): Ohne
byteLengthwächst die Sicht mit einem größenveränderbarenArrayBufferautomatisch mit. - Kompatibilität:
DataViewwird in allen modernen Browsern und in Node.js unterstützt.getBigInt64()undsetBigInt64()gibt es erst seit ES2020.getFloat16()ist sehr neu und noch nicht überall verfügbar. - Leistung: Für große, einheitliche Datenmengen sind typisierte Arrays meist schneller.
DataViewspielt seine Stärken bei gemischten Strukturen und festgelegter Byte-Reihenfolge aus.