ArrayBuffer.prototype.slice() — Methode · JavaScript-Referenz

Signatur

ArrayBuffer.prototype.slice(start, end)

Beschreibung

slice() erzeugt einen neuen, unabhängigen ArrayBuffer und kopiert die Bytes des angegebenen Bereichs hinein. Anders als bei TypedArray.prototype.subarray() teilen sich Original und Ergebnis keinen Speicher: Änderungen am einen wirken sich nicht auf den anderen aus.

Die Methode ist nützlich, wenn du einen Ausschnitt aus Binärdaten dauerhaft behalten, an einen Worker übertragen (postMessage mit Transfer-Liste) oder weiterverarbeiten willst, ohne das Original zu verändern – etwa einen Header aus einer Datei, ein Segment eines Netzwerkpakets oder einen Chunk für einen Upload.

Negative Indizes zählen vom Ende des Puffers rückwärts (-1 ist das letzte Byte). Werte außerhalb von 0 bis byteLength werden auf diesen Bereich begrenzt. Ist start nach der Normalisierung größer oder gleich end, entsteht ein leerer ArrayBuffer mit byteLength 0 – es wird kein Fehler geworfen.

Das Ergebnis ist stets ein nicht größenveränderbarer Puffer, auch wenn das Original mit maxByteLength als resizable angelegt wurde.

Parameter

Name	Typ	Default	Beschreibung
$start	number	0	Byte-Index (inklusive), ab dem kopiert wird. Negative Werte zählen vom Ende (`byteLength + start`). Nicht-numerische Werte werden in Ganzzahlen umgewandelt.
$end	number	this.byteLength	Byte-Index (exklusiv), bis zu dem kopiert wird. Negative Werte zählen vom Ende. Fehlt der Wert oder ist er `undefined`, wird bis zum Ende kopiert.

Rückgabewert

Typ

ArrayBuffer

Beschreibung

Ein neuer ArrayBuffer mit der Länge max(end - start, 0), der eine Kopie der ausgewählten Bytes enthält.

Beispiele

Grundlagen: Bereich kopieren

const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer);
view.set([10, 20, 30, 40, 50, 60, 70, 80]);

const teil = buffer.slice(2, 5);
console.log(teil.byteLength);
console.log(new Uint8Array(teil));

// Negative Indizes: die letzten zwei Bytes
console.log(new Uint8Array(buffer.slice(-2)));

3 Uint8Array(3) [30, 40, 50] Uint8Array(2) [70, 80]

Kopie statt geteilter Speicher (Vergleich mit subarray)

const buffer = new Uint8Array([1, 2, 3, 4]).buffer;

const kopie = new Uint8Array(buffer.slice(0, 2));
const sicht = new Uint8Array(buffer).subarray(0, 2);

new Uint8Array(buffer)[0] = 99;

console.log(kopie[0]); // unverändert
console.log(sicht[0]); // teilt Speicher mit dem Original

1 99

Datei-Header auslesen und PNG erkennen

const istPng = async (file) => {
  const buffer = await file.arrayBuffer();
  const header = new Uint8Array(buffer.slice(0, 8));
  const signatur = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
  return signatur.every((byte, i) => header[i] === byte);
};

document.querySelector('input[type=file]').addEventListener('change', async (e) => {
  const [file] = e.target.files;
  console.log(file.name, await istPng(file) ? 'ist ein PNG' : 'ist kein PNG');
});

bild.png ist ein PNG

Puffer in Chunks aufteilen

const inChunks = (buffer, groesse) => {
  const chunks = [];
  for (let offset = 0; offset < buffer.byteLength; offset += groesse) {
    chunks.push(buffer.slice(offset, offset + groesse));
  }
  return chunks;
};

const daten = new ArrayBuffer(10);
console.log(inChunks(daten, 4).map((c) => c.byteLength));

[4, 4, 2]

// Wichtig · Fallstricke

Kopie kostet Speicher und Zeit: Bei großen Puffern (z. B. Videodaten) ist slice() ein echter Kopiervorgang. Brauchst du nur eine Sicht auf die Daten, sind new Uint8Array(buffer, offset, length), subarray() oder DataView ohne Kopie deutlich günstiger.
Kein Fehler bei ungültigem Bereich: buffer.slice(5, 2) liefert still einen leeren Puffer. Prüfe bei Bedarf byteLength des Ergebnisses.
Abgelöste Puffer: Wurde der ArrayBuffer übertragen (z. B. per postMessage oder transfer()), wirft slice() einen TypeError.
Nicht resizable: Das Ergebnis ist immer fest in der Größe, selbst wenn das Original größenveränderbar ist.
SharedArrayBuffer besitzt eine eigene slice()-Methode, die einen neuen SharedArrayBuffer liefert.
Unterstützt in allen modernen Browsern und Node.js; nicht zu verwechseln mit Array.prototype.slice() oder TypedArray.prototype.slice().

Siehe auch

ArrayBuffer ArrayBuffer.prototype.byteLength ArrayBuffer.prototype.transfer() TypedArray.prototype.subarray() TypedArray.prototype.slice() SharedArrayBuffer.prototype.slice() DataView