Signatur
Beschreibung
TypedArray ist kein eigenständiger globaler Konstruktor, sondern ein Oberbegriff für eine Familie von neun konkreten Klassen: Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array und Float64Array (seit ES2020 auch BigInt64Array und BigUint64Array). Alle teilen dieselbe Prototyp-Kette über das interne %TypedArray%-Objekt.
Ein TypedArray interpretiert einen ArrayBuffer als Sequenz fest typisierter Zahlenwerte. Jeder Eintrag belegt exakt so viele Bytes, wie der Typ vorgibt (z. B. 4 Bytes für Int32Array). Das macht sie ideal für Binärprotokolle, WebGL-Puffer, Web Audio, Dateiverarbeitung mit der FileReader-API sowie für performantes Number-Crunching ohne Boxing-Overhead.
Viele Array-Methoden stehen zur Verfügung: map, filter, reduce, forEach, find, every, some, sort, slice, subarray und set. subarray() erzeugt eine neue Ansicht ohne Kopie des Puffers, während slice() einen neuen ArrayBuffer anlegt.
Wichtig: Der zugrundeliegende ArrayBuffer hat eine feste Länge. Schreibzugriffe außerhalb des gültigen Bereichs werden stillschweigend ignoriert. Zugriffe auf den Puffer eines SharedArrayBuffer über mehrere Threads hinweg erfordern Atomics, um Race Conditions zu vermeiden.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $length | number | Anzahl der Elemente (nicht Bytes). Es wird intern ein neuer ArrayBuffer der Größe length × BYTES_PER_ELEMENT angelegt. |
|
| $typedArray | TypedArray | Ein bestehendes TypedArray, dessen Werte konvertiert und in einen neuen Puffer kopiert werden. |
|
| $object | object|Array|Iterable | Ein array-ähnliches oder iterierbares Objekt. Jeder Wert wird in den Elementtyp konvertiert und in den neuen Puffer geschrieben. | |
| $buffer | ArrayBuffer|SharedArrayBuffer | Ein bestehender Puffer, auf den die Ansicht verweist. Optionale Parameter byteOffset und length grenzen die Ansicht ein. |
|
| $byteOffset | number | 0 | Byte-Offset innerhalb des buffer, an dem die Ansicht beginnt. Muss ein Vielfaches von BYTES_PER_ELEMENT sein. |
Rückgabewert
Uint8Array), die auf einen ArrayBuffer zeigt.Beispiele
Grundlegendes Erzeugen und Befüllen eines Uint8Array
// Neues typisiertes Array mit 6 Elementen (je 1 Byte)
const bytes = new Uint8Array(6);
bytes[0] = 255;
bytes[1] = 128;
bytes[2] = 300; // Overflow: wird auf 44 gekürzt (300 % 256)
console.log(bytes); // Uint8Array(6) [255, 128, 44, 0, 0, 0]
console.log(bytes.byteLength); // 6
console.log(bytes.BYTES_PER_ELEMENT); // 1
// Aus einem normalen Array erstellen
const floats = new Float32Array([1.1, 2.2, 3.3]);
console.log(floats[1]); // 2.200000047683716 (IEEE-754-Genauigkeit)Gemeinsamen ArrayBuffer mit mehreren Ansichten nutzen
// 16-Byte-Puffer anlegen
const buffer = new ArrayBuffer(16);
// Verschiedene Ansichten auf denselben Puffer
const int32View = new Int32Array(buffer); // 4 Elemente à 4 Byte
const uint8View = new Uint8Array(buffer); // 16 Elemente à 1 Byte
// Schreiben via Int32Array
int32View[0] = 0x01020304;
// Dieselben Bytes via Uint8Array lesen (Little-Endian auf x86)
console.log(uint8View[0]); // 4 (LSB zuerst)
console.log(uint8View[1]); // 3
console.log(uint8View[2]); // 2
console.log(uint8View[3]); // 1
// subarray() — keine Kopie, nur neue Ansicht
const sub = uint8View.subarray(0, 4);
console.log(sub.buffer === buffer); // trueBinärdaten aus einem Fetch-Response verarbeiten
const response = await fetch('https://example.com/data.bin');
const buffer = await response.arrayBuffer();
const view = new Float32Array(buffer);
// Alle Float32-Werte summieren
const sum = view.reduce((acc, val) => acc + val, 0);
console.log(`Summe: ${sum}, Elemente: ${view.length}`);
// set() zum Zusammenführen zweier Arrays
const combined = new Uint8Array(10);
const a = new Uint8Array([1, 2, 3]);
const b = new Uint8Array([4, 5, 6]);
combined.set(a, 0);
combined.set(b, 3);
console.log(combined); // Uint8Array(10) [1, 2, 3, 4, 5, 6, 0, 0, 0, 0]// Wichtig · Fallstricke
Konkrete Unterklassen: TypedArray selbst kann nicht direkt instanziiert werden (new TypedArray() wirft einen TypeError). Immer eine konkrete Klasse wie new Uint8Array() verwenden.
- Byte-Reihenfolge (Endianness):
TypedArrayverwendet immer die plattformnative Byte-Reihenfolge (auf x86/x64 Little-Endian). Für portables, Endianness-unabhängiges Lesen/SchreibenDataViewverwenden. - Overflow-Verhalten: Bei
Uint8Arrayund anderen Ganzzahltypen werden Werte außerhalb des Bereichs modulo-reduziert;Uint8ClampedArrayklemmt hingegen auf 0–255 (nützlich z. B. für Canvas-Pixel). - SharedArrayBuffer + Atomics: Beim Einsatz mit
SharedArrayBufferin mehreren Threads (Web Workers) müssen Lese-/Schreibzugriffe überAtomicssynchronisiert werden, um Datenverlust durch Race Conditions zu vermeiden. - Transfer / Detach: Ab ES2023 kann
ArrayBuffer.prototype.transfer()einen Puffer übertragen und den alten detachen, sodass darauf zeigendeTypedArray-Instanzen ungültig werden (TypeErrorbei Zugriff). - BigInt-Typen:
BigInt64ArrayundBigUint64ArrayerfordernBigInt-Werte (1n) und sind seit ES2020 / Baseline 2020 verfügbar.