DataView.prototype.setFloat32() — Methode · JavaScript-Referenz

Signatur

DataView.prototype.setFloat32(byteOffset, value, littleEndian)

Beschreibung

setFloat32() wandelt den übergebenen Wert in eine Gleitkommazahl einfacher Genauigkeit (IEEE 754 binary32) um und legt die resultierenden 4 Bytes ab byteOffset im zugrunde liegenden ArrayBuffer ab. Anders als bei einem Float32Array muss der Offset nicht an 4 Bytes ausgerichtet sein, und die Byte-Reihenfolge (Endianness) lässt sich pro Aufruf explizit wählen.

Typische Einsatzgebiete sind binäre Dateiformate und Netzwerkprotokolle: Vertex-Daten für WebGL, Sensordaten über WebSockets oder Web Bluetooth, Audio-Samples, Header von Formaten wie glTF, STL oder WAV. Überall dort, wo Felder unterschiedlicher Typen dicht gepackt in einem Puffer liegen, ist DataView das passende Werkzeug.

Standardmäßig wird Big-Endian geschrieben. Da die meisten Dateiformate und praktisch alle heutigen CPUs Little-Endian verwenden, sollte man das dritte Argument meist auf true setzen. Beim Schreiben wird der Wert auf die nächste darstellbare Float32-Zahl gerundet – das bedeutet einen Genauigkeitsverlust gegenüber dem 64-Bit-number-Typ von JavaScript.

Parameter

Name	Typ	Default	Beschreibung
$byteOffset Pflicht	number		Offset in Bytes vom Anfang der View, an dem die 4 Bytes geschrieben werden. Wird in eine Ganzzahl umgewandelt.
$value Pflicht	number		Der zu speichernde Wert. Wird per `ToNumber` umgewandelt und auf Float32-Genauigkeit gerundet (`Math.fround`-Semantik).
$littleEndian	boolean	false	`true` für Little-Endian, `false` bzw. weggelassen für Big-Endian.

Beispiele

Grundlagen: Wert schreiben und Genauigkeitsverlust sehen

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);

view.setFloat32(0, 0.1);
console.log(view.getFloat32(0));   // gerundet auf Float32
console.log(Math.fround(0.1));      // identisches Ergebnis

view.setFloat32(0, 3.5);
console.log(view.getFloat32(0));

0.10000000149011612 0.10000000149011612 3.5

Endianness: Byte-Reihenfolge vergleichen

const view = new DataView(new ArrayBuffer(8));

view.setFloat32(0, 1.0);        // Big-Endian (Standard)
view.setFloat32(4, 1.0, true);  // Little-Endian

const hex = [...new Uint8Array(view.buffer)]
  .map((b) => b.toString(16).padStart(2, '0'))
  .join(' ');
console.log(hex);

3f 80 00 00 00 00 80 3f

Praxis: Sensor-Paket für WebSocket packen

// Paketformat (Little-Endian): uint8 id | float32 temp | float32 feuchte | float32 druck
const packReading = ({ id, temperature, humidity, pressure }) => {
  const view = new DataView(new ArrayBuffer(13));
  view.setUint8(0, id);
  view.setFloat32(1, temperature, true); // unausgerichteter Offset ist erlaubt
  view.setFloat32(5, humidity, true);
  view.setFloat32(9, pressure, true);
  return view.buffer;
};

const packet = packReading({ id: 7, temperature: 21.5, humidity: 48.25, pressure: 1013.25 });
console.log(packet.byteLength);

// Gegenprobe beim Empfänger
const rx = new DataView(packet);
console.log(rx.getUint8(0), rx.getFloat32(1, true), rx.getFloat32(9, true));
// socket.send(packet);

13 7 21.5 1013.25

// Wichtig · Fallstricke

Standard ist Big-Endian: Wer das dritte Argument vergisst, schreibt in der Regel in der falschen Reihenfolge für Formate wie glTF, WAV oder WebGL-Puffer. Im Zweifel immer explizit true oder false angeben.
RangeError: Wird ausgelöst, wenn byteOffset + 4 über das Ende der View hinausgeht oder der Offset negativ ist. Ein fehlender byteOffset wird als 0 behandelt, ein fehlender value als NaN geschrieben.
Genauigkeit: Float32 hat nur etwa 7 signifikante Dezimalstellen. Ganzzahlen über 2²⁴ (16.777.216) lassen sich nicht mehr exakt darstellen, Werte über ca. 3,4·10³⁸ werden zu Infinity. Für mehr Genauigkeit setFloat64() verwenden.
NaN wird geschrieben, das konkrete Bitmuster (Payload) ist aber nicht garantiert.
Bei einem abgelösten (detached) ArrayBuffer, z. B. nach einem Transfer per postMessage, wird ein TypeError ausgelöst.
Seit ES2024 funktioniert die Methode auch mit größenveränderbaren ArrayBuffers; die Grenzprüfung bezieht sich dann auf die aktuelle Größe.

Siehe auch

DataView.prototype.getFloat32() DataView.prototype.setFloat64() DataView Float32Array ArrayBuffer Math.fround()