Signatur
Beschreibung
Float32Array ist ein typisiertes Array (TypedArray), das ausschließlich 32-Bit-Gleitkommazahlen (Single Precision, IEEE 754) speichert. Jedes Element belegt genau 4 Byte. Die Byte-Reihenfolge (Endianness) richtet sich nach der Host-Plattform – in der Praxis ist das auf x86/x64-Systemen Little-Endian.
Das Array eignet sich besonders für rechenintensive Anwendungen, bei denen Speicher und Performance eine Rolle spielen: WebGL-Vertex-Daten, Audio-Verarbeitung mit der Web Audio API, wissenschaftliche Berechnungen oder maschinelles Lernen im Browser. Gegenüber normalen JavaScript-Number-Arrays bietet es einen kompakteren Speicher-Footprint (4 statt 8 Byte pro Zahl) auf Kosten der Präzision.
Alle allgemeinen Methoden typisierter Arrays stehen zur Verfügung: map, filter, reduce, slice, set, subarray usw. Ein Float32Array kann auf einem bestehenden ArrayBuffer oder SharedArrayBuffer aufgebaut werden, um Speicher gemeinsam mit anderen Views zu nutzen.
Wichtig: Da 32-Bit-Floats nur ca. 7 signifikante Dezimalstellen besitzen, können Werte, die als JavaScript-Number (64-Bit Float) exakt darstellbar sind, beim Speichern in einem Float32Array gerundet werden. Für hohe numerische Präzision sollte stattdessen Float64Array verwendet werden.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $length | number | Anzahl der Elemente. Erzeugt ein neues, mit Nullen initialisiertes Array der angegebenen Länge. | |
| $typedArray | TypedArray | Ein beliebiges typisiertes Array, dessen Werte in ein neues Float32Array konvertiert und kopiert werden. |
|
| $object | Iterable|ArrayLike | Ein iterierbares oder array-ähnliches Objekt (z. B. ein normales Array), dessen Einträge in Float32Array-Elemente umgewandelt werden. |
|
| $buffer | ArrayBuffer|SharedArrayBuffer | Ein existierender Puffer, auf dem die View aufgebaut wird. Kann mit byteOffset und length kombiniert werden. |
|
| $byteOffset | number | 0 | Byte-Offset innerhalb des buffer, ab dem die View beginnt. Muss ein Vielfaches von 4 sein. |
| $length | number | Anzahl der Elemente innerhalb des buffer (ab byteOffset). Wird weggelassen, erstreckt sich die View bis zum Ende des Puffers. |
Rückgabewert
Float32Array-Instanz, die einen ArrayBuffer als Hintergrundspeicher verwendet.Beispiele
Einfaches Float32Array erstellen und befüllen
// Aus einem normalen Array erzeugen
const temperatures = new Float32Array([36.6, 37.1, 38.5, 36.9]);
console.log(temperatures[0]); // 36.599998474121094 (Rundung durch 32-Bit-Präzision)
console.log(temperatures.length); // 4
console.log(temperatures.byteLength); // 16 (4 Elemente × 4 Byte)
// Element setzen
temperatures[1] = 37.2;
console.log(temperatures[1]); // 37.20000076293945
// Über Elemente iterieren
temperatures.forEach((val, i) => {
console.log(`Index ${i}: ${val}`);
});WebGL-Vertex-Daten mit gemeinsam genutztem ArrayBuffer
// Drei 2D-Punkte als Float32Array für WebGL
const buffer = new ArrayBuffer(24); // 6 Floats × 4 Byte
const vertices = new Float32Array(buffer);
// Dreieck-Koordinaten setzen (x, y je Punkt)
vertices.set([
0.0, 0.5, // Punkt 1
-0.5, -0.5, // Punkt 2
0.5, -0.5 // Punkt 3
]);
console.log(vertices); // Float32Array(6) [0, 0.5, -0.5, -0.5, 0.5, -0.5]
// Subarray für den ersten Punkt
const firstPoint = vertices.subarray(0, 2);
console.log(firstPoint); // Float32Array(2) [0, 0.5]
// Mit WebGL verwenden (pseudocode)
// gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Werte skalieren mit map
const scaled = vertices.map(v => v * 2);
console.log(scaled); // Float32Array(6) [0, 1, -1, -1, 1, -1]Float32Array mit Float32Array.from() und Mapping
// Gradwerte in Bogenmaß umrechnen
const degrees = [0, 30, 45, 60, 90, 180];
const radians = Float32Array.from(degrees, deg => (deg * Math.PI) / 180);
console.log(radians[5]); // 3.1415927410125732 (Pi als 32-Bit-Float)
console.log(Math.PI); // 3.141592653589793 (64-Bit-Referenz)
// Statische of()-Methode
const specific = Float32Array.of(1.1, 2.2, 3.3);
console.log(specific); // Float32Array(3) [1.100000023841858, 2.200000047683716, 3.299999952316284]// Wichtig · Fallstricke
Präzisionsverlust: 32-Bit-Floats besitzen nur ca. 7 signifikante Dezimalstellen. Dezimalwerte wie 0.1 oder 36.6 werden gerundet. Für präzise Berechnungen Float64Array bevorzugen.
Endianness: Die Byte-Reihenfolge ist plattformabhängig. Beim Serialisieren/Deserialisieren von Binärdaten über Netzwerk oder Datei sollte stattdessen DataView mit expliziten getFloat32/setFloat32-Methoden und dem littleEndian-Parameter verwendet werden.
Speicherfreigabe: Ein Float32Array hält eine Referenz auf seinen ArrayBuffer. Solange die View oder der Buffer erreichbar sind, wird kein Speicher freigegeben. Bei sehr großen Puffern auf explizites Aufräumen (Dereferenzieren) achten.
Browser-Kompatibilität: Float32Array ist in allen modernen Browsern und Node.js (ab v0.10) unterstützt und gilt als Baseline-Feature.