Signatur
Beschreibung
ArrayBuffer ist die Grundlage der binären Datenverarbeitung in JavaScript. Ein ArrayBuffer selbst ist nicht direkt les- oder schreibbar — er stellt lediglich einen zusammenhängenden Speicherbereich einer bestimmten Byte-Anzahl bereit. Um auf die Daten zuzugreifen, benötigt man eine sogenannte View, entweder ein typisiertes Array wie Uint8Array oder Float32Array, oder eine DataView-Instanz.
Typische Einsatzgebiete sind die Verarbeitung von Binärdaten, die über die Fetch-API oder WebSockets empfangen werden, die Arbeit mit Bild- oder Audiodaten (z. B. in WebAudio oder Canvas), sowie der effiziente Datenaustausch in Web Workers über SharedArrayBuffer oder Transferable Objects. Da die Größe eines ArrayBuffer nach der Erzeugung unveränderlich ist (sofern nicht resizable: true angegeben wurde), sollte man die benötigte Größe im Voraus kennen.
Seit ES2024 kann ein ArrayBuffer optional als resizable erstellt werden, indem man beim Konstruktor die Option maxByteLength angibt. Die tatsächliche Größe kann dann bis zu diesem Maximum mit der Methode resize() verändert werden, ohne neuen Speicher allokieren und kopieren zu müssen.
- Unveränderliche Größe (Standard): einmal erstellt, bleibt die Byte-Länge konstant.
- Resizable (ES2024): mit
maxByteLength-Option kann die Größe nachträglich angepasst werden. - Transfer: Per
transfer()kann der Puffer effizient verschoben werden, ohne die Daten zu kopieren.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $byteLength Pflicht | number | Die Größe des Puffers in Bytes. Muss eine nicht-negative ganze Zahl sein. Zu große Werte werfen einen RangeError. |
|
| $options | { maxByteLength?: number } | {} | Optionales Konfigurationsobjekt. Wird maxByteLength angegeben, wird der Puffer als resizable erstellt und kann später bis zu dieser Maximalgröße in Bytes angepasst werden (ES2024). |
Rückgabewert
ArrayBuffer-Instanz mit dem angeforderten Speicherbereich, der mit Nullen (0x00) initialisiert ist.Beispiele
Einfachen Puffer erstellen und über typisiertes Array befüllen
// Puffer mit 16 Bytes erstellen
const buffer = new ArrayBuffer(16);
// Mit einem Uint8Array auf den Puffer zugreifen
const view = new Uint8Array(buffer);
for (let i = 0; i < view.length; i++) {
view[i] = i * 10;
}
console.log(view); // Uint8Array [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150]
console.log(buffer.byteLength); // 16Binärdaten via Fetch empfangen und verarbeiten
// Bild als ArrayBuffer laden und Byte-Größe ausgeben
const response = await fetch('https://example.com/image.png');
const buffer = await response.arrayBuffer();
console.log(`Empfangen: ${buffer.byteLength} Bytes`);
// Mit DataView einzelne Bytes auslesen
const dataView = new DataView(buffer);
const firstByte = dataView.getUint8(0);
const secondByte = dataView.getUint8(1);
console.log(`PNG-Magic-Bytes: 0x${firstByte.toString(16).toUpperCase()} 0x${secondByte.toString(16).toUpperCase()}`);
// PNG beginnt mit 0x89 0x50 (= 'P')Resizable ArrayBuffer (ES2024)
// Resizable Puffer mit anfänglich 8 Bytes, maximal 64 Bytes
const resizableBuffer = new ArrayBuffer(8, { maxByteLength: 64 });
console.log(resizableBuffer.byteLength); // 8
console.log(resizableBuffer.resizable); // true
// Puffer auf 32 Bytes vergrößern
resizableBuffer.resize(32);
console.log(resizableBuffer.byteLength); // 32
// Puffer wieder verkleinern (Daten am Ende gehen verloren)
resizableBuffer.resize(4);
console.log(resizableBuffer.byteLength); // 4// Wichtig · Fallstricke
Browserkompabilität: ArrayBuffer selbst ist seit langer Zeit in allen modernen Browsern und Node.js verfügbar. Die Methoden resize() und transfer() sowie die resizable-Eigenschaft sind jedoch Teil von ES2024 und werden erst ab Chrome 111+, Firefox 128+ und Safari 16.4+ unterstützt — in älteren Umgebungen sollte man Polyfills oder alternative Ansätze verwenden.
SharedArrayBuffer: Für die gemeinsame Nutzung von Speicher zwischen dem Haupt-Thread und Web Workers gibt es den verwandten SharedArrayBuffer. Er erfordert aus Sicherheitsgründen (Spectre-Angriffe) bestimmte HTTP-Header (Cross-Origin-Opener-Policy und Cross-Origin-Embedder-Policy).
Transfer: Wenn ein ArrayBuffer per postMessage() an einen Worker übergeben wird, wird er standardmäßig kopiert. Durch Angabe in der Transfer-Liste wird er stattdessen transferiert (Eigentümerschaft wechselt, Original wird detached und unbrauchbar) — was deutlich effizienter ist.