TypedArray.BYTES_PER_ELEMENT — Eigenschaft · JavaScript-Referenz

Signatur

TypedArray.BYTES_PER_ELEMENT

Beschreibung

BYTES_PER_ELEMENT ist eine statische Dateneigenschaft, die jeder Konstruktor eines typisierten Arrays mitbringt, also Int8Array, Uint8Array, Float64Array usw. Sie gibt die feste Größe eines Elements in Bytes an. Zusätzlich gibt es dieselbe Eigenschaft auf dem Prototyp, deshalb kann man sie auch über eine Instanz abfragen (arr.BYTES_PER_ELEMENT).

Die Werte sind festgelegt:

1: Int8Array, Uint8Array, Uint8ClampedArray
2: Int16Array, Uint16Array, Float16Array
4: Int32Array, Uint32Array, Float32Array
8: Float64Array, BigInt64Array, BigUint64Array

Gebraucht wird die Eigenschaft vor allem, wenn man mit rohem Speicher arbeitet: um die Größe eines ArrayBuffer zu berechnen, um Byte-Versätze für Sichten auf einen gemeinsamen Puffer festzulegen oder um in WebGL- und WebGPU-Code die Parameter stride und offset zu ermitteln. Mit der Eigenschaft statt fest eingetragener Zahlen bleibt der Code richtig, auch wenn später ein anderer Datentyp verwendet wird.

Beispiele

Elementgrößen der Konstruktoren abfragen

const typen = [Int8Array, Uint16Array, Int32Array, Float32Array, Float64Array, BigInt64Array];

for (const Typ of typen) {
  console.log(`${Typ.name}: ${Typ.BYTES_PER_ELEMENT} Byte(s)`);
}

Int8Array: 1 Byte(s) Uint16Array: 2 Byte(s) Int32Array: 4 Byte(s) Float32Array: 4 Byte(s) Float64Array: 8 Byte(s) BigInt64Array: 8 Byte(s)

ArrayBuffer passender Größe anlegen

const anzahlPunkte = 1000;
// Jeder Punkt hat x, y, z als Float32
const bytes = anzahlPunkte * 3 * Float32Array.BYTES_PER_ELEMENT;

const buffer = new ArrayBuffer(bytes);
const punkte = new Float32Array(buffer);

console.log(buffer.byteLength, punkte.length);

12000 3000

Verschachteltes Vertex-Layout für WebGL berechnen

// Layout je Vertex: Position (3 × float) + Farbe (4 × float)
const F = Float32Array.BYTES_PER_ELEMENT;
const stride = (3 + 4) * F;   // Bytes pro Vertex
const farbOffset = 3 * F;     // Farbe beginnt nach der Position

console.log({ stride, farbOffset });
// In echtem WebGL-Code:
// gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, stride, 0);
// gl.vertexAttribPointer(colLoc, 4, gl.FLOAT, false, stride, farbOffset);

{ stride: 28, farbOffset: 12 }

Abfrage über eine Instanz und für Sichten auf einen gemeinsamen Puffer

const buffer = new ArrayBuffer(16);
const kopf = new Uint32Array(buffer, 0, 2);   // 8 Bytes Kopfdaten
const daten = new Uint16Array(buffer, 2 * Uint32Array.BYTES_PER_ELEMENT);

console.log(kopf.BYTES_PER_ELEMENT);  // über den Prototyp
console.log(daten.byteOffset, daten.length);

4 8 4

// Wichtig · Fallstricke

Nur lesbar: Zuweisungen wie Int32Array.BYTES_PER_ELEMENT = 2 haben keine Wirkung. Im Strict Mode lösen sie einen TypeError aus.
Kein Konstruktor TypedArray im globalen Bereich: TypedArray ist nur ein Oberbegriff für die gemeinsame, verborgene Basisklasse. Den Wert fragt man daher immer an einem konkreten Konstruktor ab, etwa Float64Array.BYTES_PER_ELEMENT. Die Basisklasse selbst, erreichbar über Object.getPrototypeOf(Int8Array), hat diese Eigenschaft nicht.
Ausrichtung beachten: Der byteOffset beim Erzeugen einer Sicht auf einen ArrayBuffer muss ein Vielfaches von BYTES_PER_ELEMENT sein. Sonst wird ein RangeError ausgelöst. Das gilt auch für die Länge des Puffers, wenn keine eigene Länge angegeben wird. Für nicht ausgerichtete Zugriffe verwendet man DataView.
Nicht mit byteLength verwechseln: BYTES_PER_ELEMENT gibt die Größe eines einzelnen Elements an. byteLength ist die Gesamtgröße der Sicht und entspricht length × BYTES_PER_ELEMENT.
Kompatibilität: Wird von allen modernen Browsern und von Node.js unterstützt. BigInt64Array und BigUint64Array gibt es seit ES2020. Float16Array ist neu (ES2025) und in älteren Umgebungen noch nicht vorhanden.

Siehe auch

TypedArray ArrayBuffer TypedArray.prototype.byteLength TypedArray.prototype.byteOffset DataView Float32Array TypedArray[Symbol.species]