CSSNumericArray.forEach() — Methode · JavaScript-Referenz

Signatur

CSSNumericArray.prototype.forEach(callbackFn, thisArg)

Beschreibung

forEach() läuft über alle Einträge eines CSSNumericArray und ruft für jeden Eintrag die übergebene Funktion auf. Die Reihenfolge entspricht dabei der Indexreihenfolge. Die Methode arbeitet genauso wie Array.prototype.forEach(), nur eben auf dieser speziellen, schreibgeschützten Liste des CSS Typed Object Model.

Einen CSSNumericArray legt man nie selbst an. Man bekommt ihn über die Eigenschaft values von mathematischen CSS-Werten wie CSSMathSum (calc(a + b)), CSSMathProduct (calc(a * b)), CSSMathMin (min()) und CSSMathMax (max()). Jeder Eintrag ist ein CSSNumericValue, also z. B. ein CSSUnitValue oder ein weiterer, verschachtelter Rechenausdruck.

Praktisch ist forEach(), wenn man calc()-Ausdrücke analysieren, Einheiten prüfen, Werte protokollieren oder in eigene Datenstrukturen umwandeln will. Wer ein neues Array als Ergebnis braucht, wandelt die Liste besser zuerst mit Array.from() oder dem Spread-Operator um und nutzt dann map() oder filter(). Diese Methoden gibt es auf CSSNumericArray nicht.

Parameter

Name	Typ	Default	Beschreibung
$callbackFn Pflicht	(value: CSSNumericValue, index: number, array: CSSNumericArray) => void		Wird für jeden Eintrag aufgerufen. Sie bekommt drei Argumente: den aktuellen Wert `value`, dessen Position `index` und den durchlaufenen `CSSNumericArray` selbst.
$thisArg	any	undefined	Wert, der beim Aufruf von `callbackFn` als `this` gilt. Bei Pfeilfunktionen hat er keine Wirkung.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. forEach() gibt immer undefined zurück und lässt sich daher nicht verketten.

Beispiele

Operanden einer calc()-Summe auflisten

// CSS.px(10).add(CSS.percent(50)) erzeugt einen CSSMathSum: calc(10px + 50%)
const summe = CSS.px(10).add(CSS.percent(50));

summe.values.forEach((wert, index) => {
  console.log(index, wert.value, wert.unit);
});

0 10 px 1 50 percent

Geparsten calc()-Ausdruck analysieren

const style = CSSStyleValue.parse('width', 'calc(100% - 2em + 4px)');

if (style instanceof CSSMathSum) {
  style.values.forEach((teil) => {
    // Eine Subtraktion wird intern als CSSMathNegate dargestellt
    const art = teil.constructor.name;
    console.log(`${art}: ${teil.toString()}`);
  });
}

CSSUnitValue: 100% CSSMathNegate: calc(-1 * 2em) CSSUnitValue: 4px

Verwendete Einheiten in min() sammeln (mit thisArg)

const breite = new CSSMathMin(CSS.px(300), CSS.vw(50), CSS.rem(40));

const sammler = { einheiten: new Set() };

breite.values.forEach(function (wert) {
  if (wert instanceof CSSUnitValue) {
    this.einheiten.add(wert.unit);
  }
}, sammler);

console.log([...sammler.einheiten]);

["px", "vw", "rem"]

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern (Chrome, Edge, Opera) ab Version 66 und in Safari ab 16.4. Firefox unterstützt es bisher nicht. Prüfe die Unterstützung vorher, z. B. mit if (window.CSS && CSS.px) oder 'CSSMathSum' in window.
Die Liste ist schreibgeschützt. Wenn du innerhalb des Callbacks etwas zuweist, ändert sich der ursprüngliche Ausdruck nicht. Ändern kannst du ihn nur, indem du einen neuen CSSMathSum usw. baust und ihn z. B. mit attributeStyleMap.set() setzt.
Einträge sind nicht immer CSSUnitValue. Sie können auch verschachtelte Ausdrücke wie CSSMathNegate, CSSMathInvert oder CSSMathProduct sein. Diese haben keine Eigenschaften value oder unit. Prüfe den Typ daher mit instanceof.
Mit break kannst du forEach() nicht abbrechen, und es wartet auch nicht auf async-Callbacks. Nutze dafür for...of: CSSNumericArray ist iterierbar.
computedStyleMap() liefert oft schon aufgelöste Einzelwerte (z. B. CSSUnitValue in px) statt eines calc()-Ausdrucks. Dann gibt es gar keinen values-Array.

Siehe auch

CSSNumericArray CSSNumericArray.length CSSNumericArray.entries() CSSNumericArray.values() CSSMathSum CSSMathMin CSSNumericValue Array.prototype.forEach()